SEO, Part III: What Comes First?

When Google indexes a page on your site, it assumes that whatever is at the top of the page is most important. So what’s at the top of the page? Probably your navigation bar!

Obviously, we’re more interested in having Google index the page content than the page navigation, but on the other hand, the navigation bar is important for users. How do we resolve this?

Remember when I said that your site generally shouldn’t look different to users and search engines? One exception is when you’re displaying the same content, but they read that content differently. Enter CSS!

Suppose your content is first in the html file, followed by your navigation, but your CSS style forces the navigation bar to be rendered at the top of the page. Your users see the page as you intended; Google, however, ignores the style and parses the page in the order it appears in your HTML file. Everybody wins!

To make this work, your HTML body will look something like this:

<body>
<div id=”content”>Your important stuff goes here</div>
<div id=”navigation”>Your nav bar goes here</div>
</body>

Meanwhile, your CSS style will define where each div goes in absolute terms:

#navigation {
position: absolute;
top:  10px;
<!– other alignment code –>
}

#content {
position: absolute;
top: (10+size of nav bar)px;
<!– other alignment code –>
}

Congratulations! You now have the layout you want, while still putting your most important content where Google wants to see it!

Next time: more on keywords.