Monday, July 9, 2012

The heading structure for your blog

- no title specified

The heading structure for your blog

by Joost de Valk on 2 September, 2010 at 16:00 45 comments

The heading structure of your pages is one of the very important aspects of on-page SEO. It defines which parts of your content are important, and how they're interconnected. Because they have different goals, a single post needs another heading structure than your blog's homepage or your category archives. This post intends to give you the basic pointers to get your heading structure right for those three different cases.

If you've ever heard of this new kid on the block called HTML5, or maybe even consider yourself an expert on it, please note that this post still treats headings in the HTML4 / XHTML1 way of using headings. I'll briefly talk about headings in HTML5 in the end, it's a whole 'nother ball game!

This post will cover:

  1. 1.5 basic principles about HTML headings 

  2. 2.The headings for your homepage 

    1. 1.The issue of full posts on archive pages 

  3. 3.Heading structure for your single posts / single pages 

  4. 4.Structure of headings for your category / tag / taxonomy pages 

  5. 5.Headings and HTML5 

  6. 6.Conclusion: re-think your blog's headers 

5 basic principles about HTML headings

Let's get these things straight before we do anything about our heading structure:

  1. 1.The most important heading on the page should be the H1. 

  2. 2.There is usually only one H1 on any page. 

  3. 3.Sub-headings should be H2's, sub-sub-headings should be H3's, etc. 

  4. 4.Each heading should contain valuable keywords, if not, it's a wasted heading. 

  5. 5.In longer pieces of content, a heading is what helps a reader skip to the parts that they find interesting. 

Based on headings, there are tools out there that can, and will, make an outline for your content. If you were to make an outline for this article, it would look like this:

The most widely known, and probably also the easiest, tool capable of doing this is the W3 Validator.

The headings for your homepage

So while we can (and will) discuss some specifics in the comments, your homepage should probably have a structure that looks like this:

As you can see, I differentiate between "related" widgets and unrelated widgets. It's no use at all to have an H3 heading saying "Our Sponsors". An H4 HTML heading saying "About this SEO blog" could be useful though, if "SEO blog" is what you want to rank for.

The issue of full posts on archive pages

Maybe you've seen it, maybe you didn't yet, but this sort of heading structure creates a problem. If you're displaying full posts on your front page, your sub headings would be H2's, just like your post titles. That's wrong, of course, and a good example of why we should be separating our content and markup a bit more then we're doing now, but that's not an easy fix. Basically, if you're displaying a post on an archive, category, tag or home page, each H2 should become an H3, H3 should become H4, etc.

No code samples yet, but my mind is working on this now, so it might come soon.

Heading structure for your single posts / single pages

This one is simple:

Makes sense right? The most important line on the page is the post or page title, second come the subheadings. Your blog title still has some value because, if the post is good, people will search later on for "Yoast WordPress SEO", for instance.

Structure of headings for your category / tag / taxonomy pages

If you actually want your category and tag pages to rank, meaning you've given them some unique content and are making them interesting for people, the heading structure should basically be the same as the homepage, with this difference:

Headings and HTML5

In HTML5 the entire method of dealing with HTML headings changes, and while it's a bit harder to grasp for people at first, the new system makes a lot more sense for content management systems. In short: headings and heading structures are section specific there, where section could be any part of a page. It would take too long to explain here, but if you're interested, read the header section of Mark Pilgrims excellent Dive into html5.

Truth be told, Mark doesn't talk about how search engines deal with HTML5 headers yet. In all honesty: I couldn't tell you yet. Simply a case of "not enough data to tell".

Conclusion: re-think your blog's headers

Now it's time for you to take some action. Go and use the W3 Validator now to check your blog's outline. If you've read an understood all the above, you should now be able to determine whether your theme is doing a good job. If you're using a premium theme or a theme that you downloaded from WordPress.org, I'd love for you to share your results in the comments!

No comments:

Post a Comment