Codeable info

Make Your WordPress Titles SEO Friendly

Posted on by in WordPress Tutorials

Adam posted a question in the WordPress forums recently regarding the issue of the default WordPress theme Twenty Eleven using an H1 tag for the website title on all pages on the site. It also uses an H1 tag for each post title on the home page and on category and archive pages. This can result in several H1 tags on a page.

The World Wide Web Consortium (W3C), who are responsible for ensuring design standards on the web, state that you should only use H1 header tags once on a page for top level headings. The general consensus is that you should use an H1 tag for your logo or site title on your home page but on posts and pages you should ensure that the page or post title is using an H1 tag. The reason is that from an SEO point of view, header tags are indicators of importance and relevancy. Therefore it makes sense to place more importantance on the post and page titles as they describe what the article is about.

So what we want is:

  • The home page, archives and category pages displaying the site logo/title using an H1 tag and all post/page titles using an H2 tag.
  • Posts and pages displaying the site logo/title using an H2 tag and all post/page titles using an H1 tag.

It’s actually very straight forward to achieve this. What we want to do is use if statements so that we can control what pages displays H1 tags and which pages control h2 tags. We do this using WordPress Conditional Tags. These tags allow you to display certain pieces of code only if certain parameters are met e.g. only on certain pages.

Some of the more popular tags include:

  • is_home() – Display on blog index.
  • is_front_page() – Display on home page.
  • is_single() – Display if blog post pages.
  • is_page() – Display on pages.
  • is_page_template() – Display if a page template is being used.
  • is_category() – Display on category archives.
  • is_archive() – Display on all archive pages (category, Tag, Author and Date based pages).

You can use if statements with these conditional tags to only show content on certain areas of your site. For example, perhaps there is an advertisement banner that you only want to show on posts and archive pages or a footer that you want displayed on all pages except the home page. This is easily achieved using these tags.

The conditions aren’t limited to general areas of your site. If you prefer, you can be very specific about what you want displayed and where. For example, you could use is_page( ‘about’ ) to only display content on your about page or is_single( ‘522’ ) if you only want to display something when the blog post with ID 522 is displayed.

For most people, the main conditional tags such as is_front_page, is_single and is_page will be used frequently, however it’s worth remembering that there are dozens of conditional tags available to you.

Here is the full list:

I will now be showing you the steps required to make your template SEO friendly. I have noted specific changes that can be applied to the Twenty Eleven theme though you can apply these changes to any theme by following these steps. As you will soon see, the steps are very straight forward.

Making Your Logo or Site Title SEO Friendly

You will nearly always find the code for your site title or logo in the theme header.php template (unless the template you are using has created a lot of custom templates). Most themes use an H1 tag for the site title or logo though you may find your design is not using any header tag. If that’s the case, you will want to ensure that you add header tags.

Site Title and Description

By default the Twenty Eleven header.php template uses an H1 tag for the site title and an H2 tag for the description that is displayed underneath.

<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>

We want to ensure that all posts and pages use an H1 tag for the post or page title. The Twenty Eleven theme already uses H1 tags for post and page titles however as we only want one H1 tag used per page, we need to change the site title to an H2 tag on all posts and pages.

To do this all you need to do is change the site title code (i.e. the code mentioned above) to:

<?php         
 
if ( is_single() OR is_page()) {
 
?>
<h2 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h2>
<h3 id="site-description"><?php bloginfo( 'description' ); ?></h3>		
 
<?php
} else {
?>
 
<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
 
<?php
}
?>

The above code will use an H1 tag for the site title on all pages except blog posts and pages. This is what the majority of WordPress websites use.

In it’s more simpler form:

<?php         
 
if ( is_single() OR is_page()) {
 
?>
<h2>Site Title or Logo Code</h2>
 
 
<?php
} else {
?>
 
<h1>Site Title or Logo Code</h1>
 
<?php
}
?>

You can customise this further on other areas of your site if you wish. For example, if you want to use an H1 tag for the page title in your archive pages such as category and date archives, you would need to change your archive.php template so that the page title is changed from a H2 (or H3) tag to an H1 tag. If you did do this, you would need to ensure that your website title is using an h2 tag. You could do this easily by using this:

<?php         
 
if ( is_front_page()  ) {
 
?>
 
				<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
 
 
<?php
} else {
?>
 
<h2 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h2>
<h3 id="site-description"><?php bloginfo( 'description' ); ?></h3>
 
<?php
}
?>

In my opinion, changing the site title to an H2 tag on all posts and pages is the way to go (i.e. >if ( is_single() OR is_page()) ).

Making Your Posts & Pages SEO Friendly

As I mentioned earlier, you want to ensure that your post and page titles are using an H1 tag. This will ensure that emphasis is placed on your article title rather than the site title.

Post or Page Title

The article title code for blog posts can usually be found in the single.php template whilst page titles can be found in the page.php template. This isn’t always the case though.

The Twenty Eleven theme uses several unique loop templates for displaying content. A different template is used for each post type (e.g. posts, pages, quotes, links etc). In the Twenty Eleven theme you you will find the code for post titles for blog posts in content.php and for pages in content-page.php. In the previous default WordPress theme Twenty theme, loop-single.php was used for blog posts and loop-page.php for pages. Note however that the vast majority of themes still place all code for blog posts in single.php and all code for pages in page.php.

Once you have found the right template, you need to look for ‘the_title()’. If an H2 or H3 tag is wrapped around the title code instead, make sure you change it to an H1 tag.

It should look something like this:

<h1 class="entry-title"><?php the_title(); ?></h1>

Most themes correctly use an H1 tag for post and page titles so it’s probably not an issue you need to address (however it is worth checking).

Making Sure H2 Tags Are Used For Excerpt Post Titles

It’s important to remember that you should only use one H1 tag per page. Whilst post and page titles should use H1 tags, posts and post excerpts should not as there are several listed per page. Instead, an H2 tag should be used.

Excerpt Post Titles

If you view the source of your blog index and archive pages (category archives,tag archives, date archives etc) and find that all of your excerpts are using H1 tags for post titles, you will need to edit your template. In most themes you will find the excerpt code in your index.php template for your home page or blog index and your archive.php template for category, tag and date archives (some developers do things differently though).

Once again, you want to find the part where the_title() is displayed in the template and simply change the header tag that wraps around the title from an H1 tag to an H2 or H3 tag.

If your template uses a separate template for the WordPress loop, you may have to use an if statement. Popular themes such as Coraline and the previous default theme Twenty Ten use a template called loop.php to display posts and post excerpts. Both of these designs use an H1 tag if no posts are displayed but correctly use an H2 tag for post titles (you could always change the H1 tag to H2 for when no posts are found – it depends on what pages your site title uses an H1 tag).

Unfortunately, the current default WordPress theme Twenty Eleven uses an H1 tag for all post titles (except sticky posts). Thankfully it only takes two seconds to address this issue.

You simply need to open up the themes content.php template and look for this:

<?php if ( is_sticky() ) : ?>
				<hgroup>
					<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
					<h3 class="entry-format"><?php _e( 'Featured', 'twentyeleven' ); ?></h3>
				</hgroup>
			<?php else : ?>
			<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
			<?php endif; ?>

The first part of the if statement is displayed for sticky posts. The second part is what we need to change. You simply need to change the h1 tag to h2.

<?php if ( is_sticky() ) : ?>
				<hgroup>
					<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
					<h3 class="entry-format"><?php _e( 'Featured', 'twentyeleven' ); ?></h3>
				</hgroup>
			<?php else : ?>
			<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
			<?php endif; ?>

Your site should now correctly only display one h1 tag per page.

Making Sure Your Design Is Consistent Throughout Your Site

Depending on how your theme is styled, you may find that changing H1 tags to H2 tags and vice versa will mean your design isn’t consistent. For example, your site title may be larger on the home page that on your posts and pages and your post titles on posts may be larger than on your archives.

If this happens you need to find the class that styles the area that has changed in your stylesheet template (style.css) and adjust the font size of your H1 and H2 tags accordingly. It’s relatively easy to do this and shouldn’t pose you any major problems :)

Overview

I hope you have found this tutorial on H1 and H2 tags useful. Once you have completed these steps your site should correctly display only 1 H1 tag per page.

If you are unsure about to modify your own design, please feel free to explain the issue in the comment area here or in our WordPress forums and I’ll do my best to help you with the changes.

Good luck,

Thanks,
Kevin

)
Codeable info

Comments (17)

Comment by Wilton Calderon says:

ok,nice post,,but sice iam not to familiar dealing with codes,, is any pluging to do this tag h1 page title and keyword h1 tag.??

Comment by Mike Roberts says:

Hi Kevin,
Great write up. I do wonder why most WordPress themes don’t come with h1 tags on the post titles out of the box?
Is there some unknown benefit to having your h1 tag your site title and your h2 tags your page/post titles?

Comment by Kevin Muldoon says:

I’m curious: Where does Google say this? Can you provide a link to the article?

Comment by Dhruv Thaker says:

Nice article. However, I came to know that putting blog post title in H1, google will consider it as spam, so whether to put title in H1 or not, if yes then how.

Thanks in advance.

Comment by Michael Scott says:

There are still some timeless SEO tips that everyone should still use.

Comment by yskan says:

Great tutorial. I still use this method when a theme hasnt got it yet.

A must have these days for a good SEO

Comment by whatsthebigidea says:

And for those using a page or post or even a custom page for their homepage:
 
<code><?php         if ( is_home() OR is_front_page()) { ?> <h1 id=”site-title”><span><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></span></h1> <h2 id=”site-description”><?php bloginfo( ‘description’ ); ?></h2>        <?php } else { ?> <p id=”site-title”><span><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></span></p> <p id=”site-description”><?php bloginfo( ‘description’ ); ?></p> <?php } ?></code>

Comment by SEO in Chennai says:

A very useful guide for online optimization, this article is right, from search engine point of view, especially in Google eyes, one should not use H1 tag more than once in a page, otherwise it will lead your page to Google sandbox, i recommend fellow readers to book mark this article for you reference for a good seo practice. Thanks for this wonderful article and for the list of conditional tags, Cheers Kevin :)

Comment by Chirag patel says:

Nice share !!

Comment by Chirag patel says:

Heading tags are really important in seo optimization !! Thanks a lot for this great post :D  

Comment by Hammad Baig says:

@ Great info thanks for sharing

Comment by Ian Campbell says:

Great work Kev. I’d recommend downloading SEO Doctor (http://www.prelovac.com/vladimir/browser-addons/seo-doctor#h2) as this is a great way to check whether your headings are all in the right order (H1 before H2 etc) as well as checking things like Alt text on images.

Ironically, this page has two H1 tags on it, so SEO Doctor is giving you a 98% score and an amber flag! It may well be one of them is in your article, but it still means your page is not 100%.

Comment by Ayush Gupta says:

Thanks. I was looking for same info. Changing Title to h1 is really important and now everything is complete on my blog :) Thanks again

Comment by Kevin Muldoon says:

Search engines look at pages individually – they don’t look across a website and try and work out an average.

From an seo and accessibility point of view, the article title is the most important piece of information on a page – not the logo or any sub heading.

Comment by Nitin Reddy Katkam says:

The idea of swapping the H1 and H2 positions on a single post/page template does seem logical because if a script were to pick up the first H1 tag on the website, it would get the topic of the page right away.

However, I am not too sure about swapping the H1 and H2 for SEO because I think search engines could use the common H1 tags for the logo across multiple pages to determine that a particular area of the page is the site header. This all works down to implementation detail for the search engine, but I would avoid swapping the two because of this bit of speculation and because screen readers for accessibility would read out the site title as the level 2 heading and the post title as the level 1 heading.

Comment by Kevin Muldoon says:

Hi Kirsten,

I’m swamped this week as I have a lot of articles to write and I’m moving house at the weekend. However if you post your problem in the forums I’ll be sure to check it out in a day or so. Make sure you also post one of your templates too such as index.php or page.php.

Comment by Kirsten Leggat says:

Hi Kevin, Thank you for taking the time to post this informative article. I am a novice with WordPress and have a personal blog utilizing the Dictum Theme. I am very concerned that my H1, H2, and H3 tag structure is incorrect. I have attempted to follow your instructions, but quickly got lost. It appears that the theme I am utilizing does not have the same structure as Twenty-Eleven. Do you think you could take a look and help me with setting my tag structure correctly. I should mention that I am using SEOPressor plugin to optimize my posts and pages, and the plugin prompted me to improve my H1, H2, and H3 tag structure. Regards, Kirsten

Codeable info