Junecloud

We make apps for iPhone, iPad, Mac, and Web

Better search engine results with web standards

With the recent design of Holly Tickner's Tiny Forest, one of the biggest changes was largely unseen. Gone was the bloated, Dreamweaver-generated code, and in its place was streamlined, valid XHTML markup, using CSS for all of the layout (all hand-coded in BBEdit). It's fairly common knowledge that good markup can improve search engine rankings, but this was a great opportunity to see it first hand.

Just before the new site went live, I checked the rankings of a few different Google searches:

• 9th result for "Holly Tickner"
• 46th result for Holly Tickner (without quotes)
• 400th result for "Tiny Forest"

The day after the site went live, I checked again:

• 3rd result for "Holly Tickner"
• 5th result for Holly Tickner
• 376th result for "Tiny Forest"

The second search is impressive... From 46th to 5th place overnight! While part of this can be attributed to other sources (like my new links to the site) it's quite fair to say that much of the change is a result of the new markup. Since moving to web standards for all of my web sites, I've seen a notable improvement in search engine results.

Update on June 7th, 2005: Less than seven weeks after the debut of the new site, Tiny Forest has jumped from the 400th result to the first result in a Google search for "Tiny Forest". Even more impressive, it is now the first result for Tiny Forest as well (without quotes). Previously it was so far off the map that I couldn't be bothered to dig for it. It's the first result for both of the other searches now as well.

Here are some things I recommend:

Use tags appropriately. I use <h1> (level one heading) tags around the title of the site. I use <h2> tags around the current section of the site. And so on. Navigation links are marked up as lists (<ul>), since that's what they are: lists of links or sections of the site. How you want each of these things to appear is unimportant here, as you can use CSS to style each element, or even one of the many image replacement techniques to replace text with an image.

Use CSS for styling. On the original site, Holly added spaces between the letters of "tiny forest" manually in some places. As a result, search engines wouldn't see "tiny forest", they'd see the separate letters "t i n y f o r e s t". The CSS letter-spacing property can be used for the same effect, spacing out letters without altering the text. The CSS articles at A List Apart are an excellent resources for learning CSS.

Structure the page in the proper order. The idea here is simple: even if you want the title of your site to appear at the bottom of the page, it should appear at the top of the markup. If you're using tables to style your pages, it can be particularly difficult to keep the content in the proper order. This can be an issue with CSS as well, but it generally improves matters a bit. You can also get a good visual look at how search engines "see" your pages just by removing the CSS temporarily. (I like to add a dash in front of the style sheet's file name, and just reload the page. You could also comment the styles out.)

Use appropriate link text. Search engines take link text into account when the index the pages those links point to. To see this in use (and abuse), try a Google search for "miserable failure". President Bush's biography doesn't contain these words, but many people have linked to it using those words... Enough to make it the top Google result! So take that into consideration: don't say "click here to check out Holly's awesome Hips comic", say "Holly Tickner's Hips comic is awesome". This is useful for other people too; it's much easier to see what you're linking to at a glance. (And don't worry, if we made it to your page we already know that links are for clicking on!)

Use valid markup. Google probably doesn't care about this much; after all, Google.com doesn't even validate. It's a good habit to get into though, and it helps ensure that search engine spiders won't get confused by your markup. If they do get confused, it could undermine everything else you've done! The W3C Markup Validation Service well help you find problems in your HTML. (There is also a W3C CSS Validation Service that's very helpful.) I use a bookmarklet to make validating pages quick and easy.

Not only can these suggestions improve search engine rankings, but they're a huge step towards other improvements as well: better browser compatibility, improved accessibility for the visually impaired, and custom style sheets for print, just to name a few. If you're not using web standards, it's a great time to start.

View more

Design

About us

We’re a small software company in the Metro Detroit area of Michigan. We create software for the iPhone, iPad, Mac, Apple Watch, and the web. Learn more about us here. If you have any comments or questions please contact us.