Header tags like <h1> are important HTML structural items. They define the semantic layout of a page. The highest weight header tag, <h1>, defines the main subject of a section. Search engines value header tags when examining a web page/ The correct use of <h1> can add value, but incorrect use can see a page penalised by the likes of Google. WordPress makes it easy to use the <h1> correctly.
Using <h1> Tags Badly
<h1> tags are commonly used as the logo of a website. They use CSS image replacement to wrap the logo graphic inside the tags. The <h1> is always the site name, whichever page you’re on. Other page headings are tagged with <h2>. The <h1> tag is not intended to define the name of a site, but the topic of a page or section. Sites that use this practice are only using <h1> correctly on their home page (on that page the site name is the main topic), but incorrectly on subsequent pages.
<h1> tags should define the primary topic of each page. Each page should have a single <h1> tag (except in very rare situations where a single page has two equally important and clearly seperate topics).
Ways To Correctly Use <h1> Tags
WordPress
This site is powered with WordPress. On the front page the title of the site is the <h1>. On sub-pages it’s the page topic that’s the <h1>. WordPress makes it easy to achieve this automatically.
My template’s header.php has the following code:
<h1><?php bloginfo ( ‘name’ ) ?> | <?php bloginfo ( ‘description’ ) ?></h1>
<?php } elseif ( has_excerpt() ) { ?>
<h1>Blog Index | <?php bloginfo (‘name’ ) ?></h1>
<?php } else { ?>
<p><?php bloginfo ( ‘name’ ) ?> | <?php bloginfo ( ‘description’ ) ?></p>
<?php } ?>
WordPress automatically identifies if someone is on the frontpage of my site. If they are, it wraps the blog name and description in an <h1> tag. If not, that information is wrapped in a <p> tag. <h1> and <p> tags in the “blog-title” div are styled to look identical using CSS.
I also need to define the “post” title as an <h1> in my index.php, page.php and other template files. I use a custom template for my home page. If I was using the blog index as my home page then I’d set blog entry titles to be <h2> in the index.php and <h1> in other template files.
I can ensure that the <h1> tag accurately describes the subject of a particular page in my template. I don’t devalue the search engine benefits of the <h1> tag’s weight by always using it to define the logo
3 Comments
Hi – Thanks for the explanation. Do you offer this tweak as a service? I’m still not sure I can do it correctly.
Hi Laura. Sure, no problem. Just drop me a note at info@fogofeternity.com with some details and we can discuss it in more depth. It’s a pretty quick process, so even if you’re struggling to implement it the first time any service will see me heavily comment the code so that it’ll be as easy as possible for you to repeat in future.
Great post!
I just set up wordpress, started blogging and this was the first thing I wanted to change when I saw the markup of my single post page : )
I’m glad that you’ve shown an elegant way to fix the H1 problem.
Thanks.