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:
- 5 basic principles about HTML headings
- The headings for your homepage
The issue of full posts on archive pages
- Heading structure for your single posts / single pages
- Structure of headings for your category / tag / taxonomy pages
- Headings and HTML5
- 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:
- The most important heading on the page should be the H1.
- There is usually only one H1 on any page.
- Sub-headings should be H2’s, sub-sub-headings should be H3’s, etc.
- Each heading should contain valuable keywords, if not, it’s a wasted heading.
- 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:
- [h1] The heading structure for your blog
- [h2] 5 basic principles about headings
- [h2] The headings for your homepage
- [h3] The issue of full posts on archive pages
- [h2] Heading structure for your single posts / single pages
- [h2] Structure of headings for your category / tag / taxonomy pages
- [h2] Headings and HTML5
- [h2] Conclusion: re-think your blog’s headers
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:
- H1: Blog’s name
- H2: Your blog’s tagline, if it’s “keyword-rich”; if not, all your recent posts should have an H2.
- H3: Your recent posts, or, if those have an H2, this could be used for somewhat older posts.
- H4: related content in the sidebar, like the heading of an “about” widget.
- H5: Unrelated headings in your sidebar, footer, etc.
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:
- H1: post / page title
- H2’s and H3’s: subheadings and sub-subheadings
- H4: your blog’s name, and possibly related widgets
- H5: same as above: sidebars etc.
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:
- H1: category / tag title
- H2’s: post titles
- H3: blog’s name
- Rest: repeat from homepage.
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!