Do it Yourself: Optimize your WordPress Page Headings

This is second article in the "Do it yourself" series and this one will be about heading tags.

Most theme authors still do not pay particular attention to the layout and usage of header tags (H1, H2, H3...) in theme layouts. From the HTML optimization perspective, H1 is the most essential page tag and should appear as first on the page, and only once.

H2 tags is next in hierarchy and you can have several of them on the page. Below each H2 you can have several H3 tags and so forth. H3 and H4 are not as important, but having H1 and H2 correct on your page is (at least from the HTML semantic point of view!).

Two most important pages on your site will probably be the home page and the single article page. The preferred layout for these pages is as following.

Home Page

  • Blog title OR Blog Description H1
  • Post titles H2

Single Page

  • Blog title and Blog description no heading (just a simple <p>)
  • Post title H1
  • Headings inside the post H2 and lower

To achieve this layout can modify your theme code in several ways. Here is what I did in mine, file header.php:

'; else echo '

'; if (current_user_can('level_10')) echo ''; else echo ''; bloginfo('description'); if (is_home()) echo ''; else echo '

'; ?>

What this code does  is embed my blog description in H1 tags if on home page and also ads a link to the wordpress admin if I am logged in. It does this with following:

  1. In case of home page (is_home() check) it outputs <h1> else it outputs a <p>
  2. Next comes the link. If I am logged in as admin (current_user_can('level_10')), blog description will actually point to my wp-admin, otherwise it will point to my home page. This is only for my convenience
  3. Then comes the printing of the actual blog description, and closing the tags afterwards

Next part of the exercise is to print your post titles in H2 in your index.php, and as H1 in single.php and page.php of your theme:

This simple change tells the search engines what is important on your page, and allows them to make a better decision on what should they rank you for.


More like this:


Posted in: WordPress
TAGS:, , , , , , , , , , , , , , , , , , ,
Both comments and trackbacks are currently closed.

15 Comments

  1. Jun 28th, 2012

    I'm a real amateur at this, and like many others I need just that bit more detail before safely making this kind of change that I desperately need. How does the last change listed, apparantly the same change for index.php, single.php and page.php do anything with h2's as h2 is not in the code?
    Where exactly in EXISTING code on a header.php does the code listed go? And what code do I leave out if I don't need the wizzy bit to do with being an Admin? I'm sure most readers won't need this level of detail, but without it, I can't make any progress. Any help much appreciated.

  2. Bob
    Mar 12th, 2011

    First, thanks for the great info and plugins etc - lots more reading to do.

    I'm currently trying to amend a theme to show H1 tags which currently dissapear if I include a header image. I was going to add a h1 tag and hide it from visitors as the site name is included in the header image but was wondering if there was any preference to using the h1 {display: none} vs. indenting the h1 tag off the page using css.

    I'm not sure if these methods are frowned on now but I can't work out any other way of using a header image and including a h1 tag for the current theme. In my defence I normally just use text headers but this is for someone else.

    I know this is an old post, so I don't really expect a reply, but thought I'd ask.

    Cheers

    Bob

  3. Sep 2nd, 2010

    Hi Vladimir,

    I use a variety of WordPress themes on my websites and it always frustrates me that I want to use the , and tags for seo purposes, but even with your advice it is still much more complicated to change the style.css sheets than I think it could be.

    I would appreciate it if you could do an even more simplified "how to change , tag sizes in 3 easy steps" kind of tutorial - i.e. just focus on the 3 things you need to do to readjust the size of these tags in your posts.

    Thanks in advance,
    Chronic Tinnitus

  4. Jan 15th, 2010

    Hi, great info, anyway to make this a plugin?

    WordPress should do this by default or have a way to turn this on.

    To me this is a HUGE flaw in how WP deal with SEO

  5. Nov 14th, 2009

    Thanks for your great tips to optimize wordpress

  6. ken
    Jul 9th, 2009

    I am totally new to php but would really like to add this code if possible.
    Once I open header.php do I just add this code someplace, if so where(between what and what)?
    If its a bit more complicated then that, I would really appreciate if someone could post a step by step instruction to get guide me through this.

    ..Thanks!

  7. Jun 26th, 2009

    that's cool, thnk's for your sharing.

  8. Jan 2nd, 2009

    Very nice article...just started a webmaster forum...would be using all the tips mentioned...thanks

  9. You can see my keyword phrase for the blog, "What is a blog" right up at the top of the page. I'll probably be changing the keyword soon as it has gone from average 1500 daily searches a few months back to less than a hundred and the market is getting crowded, but we shall see. I digress though, if you look at any given page you will see the page title attached to that phrase. The coding for that is really easy to do. The power of this puts the blog keywords and post keywords in a prime spot for google.

    Since I don't know your settings I won't try and post the code but yu can download the theme at http://bloggingfornoobs.com/wordpressthemes/black-white/ it is all in the header.php file, though more recent versions of my theme will let you ad the keyword directly from the options menu.

    I don't associate myself with the blog I was speaking with since I bought it with a rather loyal following and have continued to write it under the original owners penname and persona for almost a year. I was using that as an example,you won't see high ranking tag pages until you have been around a while with huge amounts of content. I expect this same thing to actually start happening on another blog http://bradstinyworld.com in either the next PR update or the one after that though. I'll let you know how that works out.

    The first heading tag a search engine does see in my blog is the H1 tag. Take a look at my themes header file. You get two div tags then the h1 tag with my keyword and title right after the body tag. With that bit of code every page gets served up with your blog keyword and post title inside H1 tags before anything else. Your blog title just isn't that important nor can you ever make it dynamic to include the post title.

    I have started using SEO smart links (which is what led me to your blog) and have been looking at it and insights for several blogs. I use Smart links in a way that I wish you would build into the program. I would love to use it to the full extent of the plugin linking everything but the blog really bogs down with everything else I run. I turn the plugin on and do a copy and paste of the page into the wysiwyg editor hard coding the links. It is taking a while to get through my old posts this way, but I am getting there. I would love to see a function in the editor that would add the links and let me save them at the time I post. You can see where I have done this at http://bradstinyworld.com the entirety of the last months posts and some of the older tag heavy posts have all been updated by this method.

  10. Dec 22nd, 2008

    Brad, thanks for sharing your tips with my readers. I always welcome fresh thought but I am afraid there are few things I'd like you to explain in more detail.

    Every page gets a single H1 tag but it is the blogs specific keyword(s) and on single pages I attach the title tag to it.

    I took a look at your blog but was not able to see what do you mean by this. How do you attach something to title?

    I have a PR 4 blog with about 5% of the 3000 tag pages with PR 5 or more and more than half of them have at least pr 1. This doesn't sound important until people start wanting to buy internal page links. I also have a pr 2 blog with a single pr 7 tag page.

    Maybe you haven't applied these techniques to your blog as I see a PR2 front page and most of the tags unranked. Can you give a better example?

    Giving the blog title and description high priority is actually counter productive, unless you title and description are highly searched terms with very few results. My titles used to get h3 tags and descriptions h4, but I have since reversed this. My thought is I can make the description a lot more search friendly than I can the title. Neither are as important however as the links.

    I advocate the use of h1 for blog title or description only on one page of your site, and that is the home page where it makes most sense. Blog description can be highly optimized for your target keyword.

    Having titles h3 and descriptions h4 actually breaks the flow of the page as the first heading tag search engine expects to see is a H1.

    Every primary link is an H2 and secondary self links on single pages get h3, h4, and h5 depending on where they are page. H3 is labeled the permalink, h4 at the start of the comments gives the comments for , and finally at the bottom of the post I have another h5 link saying return to the top of the page with the permalink. Google loves internal linking and this update I have it going on.

    I suggest trying my Insights and SEO smart links plugins for added comfort in interlinking.

    Visual designers often aren't coders and can't grasp an H5 tag can be larger than an h1 tag.

    I agree and that's why I always have to work closely with designers on my projects :)

  11. I take a slightly different approach to the importance in my theme building as a student of the Courtney Tuttle school of keyword use. Every page gets a single H1 tag but it is the blogs specific keyword(s) and on single pages I attach the title tag to it. This is a very powerful search technique. It has put my blogs on the frontpage edging ever closer to the top of several highly competitive unquoted searches, and at the top on all of them for quoted "search terms". This technique has also rated a number of individual pages pages with high page ranking, especially my tags which get selected from text keywords whenever possible. I have a PR 4 blog with about 5% of the 3000 tag pages with PR 5 or more and more than half of them have at least pr 1. This doesn't sound important until people start wanting to buy internal page links. I also have a pr 2 blog with a single pr 7 tag page.

    Giving the blog title and description high priority is actually counter productive, unless you title and description are highly searched terms with very few results. My titles used to get h3 tags and descriptions h4, but I have since reversed this. My thought is I can make the description a lot more search friendly than I can the title. Neither are as important however as the links.

    Every primary link is an H2 and secondary self links on single pages get h3, h4, and h5 depending on where they are page. H3 is labeled the permalink, h4 at the start of the comments gives the comments for , and finally at the bottom of the post I have another h5 link saying return to the top of the page with the permalink. Google loves internal linking and this update I have it going on.

    Last but not least are the unimportant titles. This is easily corrected with a simple coding and css changes. I think the reason people design poorly is coders don't tend to be visual and want things the same size. Visual designers often aren't coders and can't grasp an H5 tag can be larger than an h1 tag.

  12. Dec 20th, 2008

    That's a very good guide. My current theme has no h1 on home page and single pages have h1 post headings...

  13. Dec 19th, 2008

    Very useful information, thank you!

  14. Dec 17th, 2008

    Its frustrating why many of the WordPress themes (including the default Kubrick) use H2 for their sidebar headers. They should be relegated to H4 or lower.

    Excellent DIY tutorial for Semantic Markup for Blogs!

    With this markup, sometimes I feel that the default formatting of the H tags are also a pain. I'd rather have them reset early in CSS code to the same size, weight, margin and padding upfront, then style them with classes. Is that a better approach?

  15. Dec 17th, 2008

    Nice said. Good approach - Thank you for the tip - I was using lots of H1. Sorry

  • ManageWP