Optimal HTML Headings for Proper Information Hierarchy in WordPress Blogs

I was back tweaking my blog templates these days, and I learned that many of the WordPress Plug-Ins for the sidebar use the HTML header H2, for sidebar headers.

For example, in order to generate the list of links from your blogroll automatically (with the headers), one would normally use <?php get_links_list(); ?>. This, however wraps the link category heading with H2, according to the documentation.

While this is suitable for most users using the many templates available for free at the WordPress themes directory, I personally feel that sidebar header (where the blogroll usually goes) do not deserve the importance of having wrapped around H2.

The Blog Information Hierarchy

Like any word processing application, the information on HTML pages should follow a hierarchy, and the HTML headers H1 to H6 exists for the purpose of highlighting this hierarchy.

In the case of a blog main page, the H1 tag obviously belongs to the blog title. No qualms and no worries about that is the template. What I do not understand is, why are sidebar headers put in the same importance as post titles?

I think the most significant sections of a blog should be (1) the blog title (2) the post titles. Sidebar headers should be put further down the hierarchy, not equal as compared to the post titles. The highlight of every blog should be your blog content (which is the content in the post itself) doesn’t it make sense?

My Blog Information Hierarchy

After some consideration, I have decided to implement my own blog information hierarchy, and move away from the typical WordPress blog template information hierarchy. I feel this would better highlight the importance of each section of information to the search engines.

But again, this is only when you are working to please the spiders. A H6 heading can be tweaked to look more prominent than a H1 tag using CSS.

So here are how I use my headers in my blog.

H1 headings

  • Blog main page – Blog title
  • Blog single (permalink) page – Post title
  • Blog archive page – Archive title
  • Blog custom (WordPress pages feature) page – Article title

Notice I highlight the post title and article title in the pages where I feature single articles or posts. In that page, I don’t even put my blog title. I want the search engines to tell immediately and very specifically what the post or article is about.

H2 headings

  • Blog main page – Post titles
  • Blog single (permalink) page – “# of responses”, “Join in the conversation”

I think H2 represents what is second most important after the main title of the page. I normally have only one H1 tag on a page, but several H2 tags. In the blog main page, the post titles are definitely important enough for H2. In the single post page, I think after reading the post, the next thing you want to highlight are the responses that follow in that post, and invite conversation.

H3 headings

  • Blog archive page – Post titles

Actually, I think the blog archive page post titles, can be done with H2, but I since I use only the excerpt in the archive page, I thought that as compared to the blog main page, this should be of less importance.

The emphasis of an archive page is that “from here you can link to the older posts”, and not in presenting all the information that has been posted before. I feel that blog archive pages should be seen a “content page”, or a “list of links”, rather than an information source by itself.

H4 headings

  • Sidebar headers

Since most information on the sidebar should be miscellaneous information (if not they won’t be on the sidebar, should they? :mrgreen: ), the importance of that information should be pushed down to a H4. While this means that I will have to do something like this : <?php get_links(28, '<li>', '</li>', '', false, 'rand', false, false, -1, false, true); ?> to display the links for my blogroll (I don’t know of any other way yet), I think the optimization is worth it.

H5 headings

  • Subtitles within a post

One of the ways to highlight the start of a different section within a post is to use one of the header tags within the post. I personally use H5 for this.

Search Engine Optimization

Some people don’t believe in tweaking too much code or optimizing for search engines, but I believe that all things equal, a better optimized template would make a difference between a second place and first place. Since tweaking the template is often a one time job, spending the time into these details are worthwhile.

The original Kubrick theme shipped with WordPress, and many other themes provided in the WordPress themes directory are optimized for aesthetic appeal, with a lot of very beautiful graphics which really appeal to human visitors. I admit, I’m terrible at web design, I’m “old fashioned”, but as far as search optimization is concerned, until the day search engines can categorize images without meta data, tweaking the HTML code is the way to go.

An ugly website can perform better than a pretty website… as long as it is not too ugly to irk all your visitors away. :mrgreen:

Your thoughts?

Comments

  1. Pingback: Wigetizing WordPress Themes and the Blog Information Hierarchy

  2. Pingback: Finally back in town and in front of my computer!

  3. Pingback: Blog Roundup for the 26th of February 2007 :: Christopher Ross

  4. I’m not a hands on tech geek but know enough from researching and reading that ranking has heaps to do with accurately telling your story in SE-speak and their language is hierarchy.

    I’m grateful to hear your ideas specifically relating to WordPress themes and your comments on sights can look awful and rank well and vice-versa.

    Some designers, not up with SEO, have been delighted with my Guidelines for SEO which I give away free(perhaps dumb me). They implement them along with their great design work and achieve SE visibility their business customers expect. Plus their own sites finally rank well.

    Thank you for the helpful thorough breakdown. One comment about sidebar info. I’d say from a business website standpoint. A sidebar should act as a feature window. It doesn’t go away, is on display. Thus I’d want an H1, H2 at the lowest.