Page Hierarchy: The importance of telling Google what is important

Google SEO

Page hierarchy is simple, right?

You have a header, a main content area, a sidebar and a footer, right? You have headings and subheadings.

But is that it? Wouldn’t it be nice to know what the most important thing on the page is? How about the second most important thing? The third, the fourth, and so on?

If YOU would like to answer the question, “What is the point?”, you’re not alone. As it turns out, that is one of Google’s highest priorities when they index your page, and your search rankings will be effected by what they find.

Use headings appropriately

This is easily one of the most neglected pieces of on-site optimization, and is an easy fix if you know what you’re looking for.

On most sites, the site name gets a great big <h1> tag. Why? Because it’s the first thing on a page, and it’s usually the biggest. But is that optimal?

According to the W3C:

A heading element briefly describes the topic of the section it introduces. …

There are six levels of headings in HTML with H1 as the most important and H6 as the least.

You notice that first phrase? “Briefly describes the topic of the section it introduces”. That’s important. Let me illustrate:

Example usage of the H1 element

Lets say you sell widgets, and your website is Widgets-R-Us.com. Here’s what your typical structure will be:

Example heading structure

	<h1>Widgets-R-Us</h1>
	<h2>We sell red, blue, and green widgets of all sizes</h2>

Now, ask yourself, Which phrase “briefly describes the topic of the section it introduces”? Is your page about “Widgets-R-Us” the website, or is it about selling widgets of all sorts?

The answer is, it’s about selling widgets. That’s what your company does, and that’s what your website is built to do. That means that the typical heading structure shown above isn’t optimal.

Here’s one solution to fix this:

Optimal heading structure

	<span id="site_title">Widgets-R-Us</span>
	<h1>We sell red, blue, and green widgets of all sizes/h1>

But wait, you say! Now the first line will look tiny, and the second line will look huge!

That’s the beauty of semantics. You mark up things according to what they are, rather than what they should look like. This is where Cascading Style Sheets (CSS) come into play.

By styling the <span> element via it’s #ID selector in your stylesheets, and styling your <h1> elements appropriately, you can then match the look of the original code, but retain the better hierarchical structure that we’ve just created.

But don’t stop at the H1 element!

If you apply the same approach to the rest of your page, you will soon come to the realization that most designs are flawed when it comes to proper use of its heading tags.

For instance, many blogs us <h2> elements for marking up their sidebars. Do you really want your “Categories” heading in your sidebar to be considered one of the second most important items on your page?

I sure wouldn’t.

(A heading IS appropriate, however, since again a heading should “briefly describe the topic of the section it introduces”, and it’s hard to have a list of categories without some description that says “Categories”.)

The importance of telling Google what is important

Just be sure that whatever you choose for your heading structure, you keep in mind what your main objectives are. Headings allow you to tell your users exactly what is most important to your page, but just as importantly, they allow you to tell the search engines what you feel are the most important elements on your page.

Keeping these principles in mind, along with the important principles of keyword placement, you should soon be on your way to a fully optimized site that the search engines will thank you for.

Structural Design

Coming Soon