Enable and Disable Stylesheets as an SEO Tool

As a web developer, I sometimes have to look for tricks to find out how my web sites will look in various web browsers, or even to the search engines. Most people use newer browsers, but there are some lingerers that don’t. I don’t always support them, but I sometimes need to know how bad things will look.

The big deal, though, is how the sites look to search engines robots like the GoogleBot. I mention this because search engines don’t “see” like we do. They simply read the HTML as it appears in a text file. The web browser itself is what generates the look of the content on your pages. Placement of your text in the source HTML can make a big difference in the coveted top 10 ranking you seek.

Today I ran into a little problem that created this little tidbit of info. I was visiting a local community clinic in which I am going to volunteer time to build them a new web site. I asked for them to pull up this blog so I could show them the benefits of using Wordpress as a simple (now advanced) content management system. My blog looked horrible!

I looked at their browser version, and I thought… it’s Internet Explorer 7, so why should it look like this. I know that Javascript could be turned off, but this site isn’t dependent on Javascript… what would it be? I’ve pasted a screen shot below.

No Stylesheet Screenshot of JoeVeler.com

My client looked at me and said that sites that are not part of their network always look crazy like this. “It’s something with our network settings,” she said. So, with a moment of contemplation, I knew exactly what was happening… Javascript and CSS BOTH were turned off!

I got back to my office and I thought… I wonder how many state/government/business offices turn these kinds of features off for sites outside their networks. I mean, it didn’t disable my site, but it hurt it visually. And, besides the number… how many of my sites would work if css were disabled. Javascript wasn’t a problem as I usually test that anyway. It was important to me though as I hadn’t thought of CSS stylesheets being disabled on newer browsers. Oh my gosh, this could affect my Blue Ridge Parkway site. It’s regularly looked at by many education, non-proft, and government employees.

I don’t know why I hadn’t really thought about CSS being disabled. I mean, I knew it could be off because of an older browser, but that’s less than 10% of my audience on a typical web site. Geez, it’s “part” of the browser itself. I knew I hadn’t seen any advanced options to disable it in the standard “Tools -> Internet Options” settings and I didn’t even think I had seen it in the group policy editor. So, it wouldn’t even be a concern as it shouldn’t be able to be turned off.

So, I dug a little and found that it is indeed an option and it’s set through the windows registry. Apparantly, it’s a legacy option that used to be “checkable” in Internet Explorer 3’s options that are available to the user, but was removed in IE 4. I found the registry key in a Microsoft support article where it told you how to “fix” the key should you have disabled it in IE 3, and then couldn’t find a way to enable it in IE 4.

Athough this is a pain in what it could be doing to the Parkway site, I thought the tidbit of knowledge itself could be useful in SEO. This is a way to be able to tell what your site could look like to a search engine quickly. I mean, you can always use Lynx, but most SE’s can at least read tables and such now, so why go back to a text-only browser.

Another thing, is that it is an SEO strategy to use stylesheets to position navigational elements below the content in the HTML, but to use absolute CSS positioning so that it shows up visually first in the browser viewport.

So, if I can find a way to do this quickly without having to edit the registry, then it allows me to strip my css out and then I can make sure that my page content does indeed look good and positions correctly. At the same time I can still easily see the H1, H2, and strong tags which are a little harder to recognize in Lynx. You see, these tags place importance on your text and you want to make sure you are using them wisely when implementing SEO.

So, there’s the background, and here’s the how to.

You can edit the registry key manually:

• Close Internet Explorer
• Start regedit.exe.
• Go to [HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main].
• Double-click “Use StyleSheets” or create this value of type “String” if it doesn’t exist).
• To enable style sheets, set the value of the key to yes; to unable, set it to no.
• Click OK.
• Close regedit.
• Open Internet Explorer.

To make this even easier, I created 2 .reg files so that I can just close my IE browser, double-click to enable or disable, and then start IE back up. If you don’t know, .reg files allow you to make quick updates by setting values in the Windows Registry.

Here are the links to these files.  Simply right-click and save the file to your harddrive.  Then double-click the file to merge with your Windows registry.

• stylesheets-disable.reg
• stylesheets-enable.reg

Be aware, don’t try this unless you know what you’re doing!