post

WordPress Twenty Eleven Theme SEO

I hesitate to title this post “SEO Fix” because optimizing for Google takes a lot of guess-work and many things that are passed-off as “rules” are really just conjecture. That being said, when I created the TaB13 theme I spent a lot of time investigating the various arguments for and against different title tag schemes and came to the conclusion that the safest course of action is to use only one H1 element on any page.

Default Twenty Eleven theme heading elements

This runs counter to the way that the WordPress Twenty Eleven theme uses title tags, with an H1 assigned to the site title and every post title. This guarantees at least two H1 elements on every page and multiple H1 elements on the main blog page, depending on how many posts are displayed, there.

My strategy here is to reduce the site title and blog description to H3 elements, the post titles to H2 elements on the main page, but elevating them back to H1 elements on the single post page, and reduce the widget titles to H4 elements.

Site Title and Blog Description

This is the easiest change to make, since these are located in the header.php file which should already reside in the child theme folder (a blank Twenty Eleven child theme is available here if you do not have one).

<hgroup>
<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>
</hgroup>

Simply change each occurrence of h1 and h2 to an h3:

<hgroup>
<h3 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></h3>
<h3 id="site-description"><?php bloginfo( 'description' ); ?></h3>
</hgroup>

Make Post Titles Conditional H1 or H2 Elements

Modifying the post titles is a bit more involved because we want to keep them as H1 elements on single post pages, but on the main index page where there are a lot of post titles, we want to demote them to H2 elements.

This modification will be made to the content.php file, which should first be copied into the child theme folder, from the Twenty Eleven theme folder.

<?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 Twenty Eleven theme uses a conditional statement to detect if the post is a sticky post and assigns an H2 element to the title. For all other posts, an H1 element is assigned.

<?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 elseif (is_single()) : ?>
<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 else : ?>
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'tab13' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<?php if ( 'post' == get_post_type() ) : ?>
<?php endif; ?>

I did not change the elements for sticky posts, although a case could certainly be made for demoting the “entry-format” to an H4 or H5 element, as it seems rather unimportant to anything a potential reader would search for.

After the sticky post title, I have added a second conditional statement, elseif (is_single()), to test whether the post is being displayed on a single post page and, if it is, to assign an H1 element to the title. Finally, if it is not a sticky post and it is not a single post page, the default condition for all other posts is an H2 element.

Widget Titles

Changing widget titles from the Twenty Eleven theme default H3 element to an H4 element is an easy modification, but you will need to copy the sidebar.php file from the Twenty Eleven theme folder into your child theme folder.

<h3 class="widget-title"><?php _e( 'Archives', 'twentyeleven' ); ?></h3>

Inside sidebar.php you will find two occurances of the widget title – one for ‘Archives’ (shown) and another for ‘Meta’. Simply change each occurance to h3 to h4, save the file and view your results.

WordPress Twenty Eleven theme with modified SEO

16 thoughts on “WordPress Twenty Eleven Theme SEO

  1. I agree – 1 H1 per page, but that should be on the page title, except for the front page, where it should be on the site title.
    Twentyten did this – surprised 2011 doesn’t!

    What do you think about using an h4 or similar for the tags and categories – I haven’t seen much talk about this.

    • Thanks, Dallas – I am a bit biased because my blog title is not something people would search for, but I think elevating a site title to an H1 on a front page and then demoting it on an individual post page (to accommodate the post title’s H1) does not provide any benefit. The “throwingabrick” term is stronger now than it was when I was running Twenty Ten, but I am sure that has more to do with age and depth-of-content than anything else. An H1 site title is semantically correct, though.

      There could be some benefit to tagging categories and/or tags (e.g. I only use tags in this theme) – they are definitely more relevant than widget titles :)

  2. Im a beginner trying to use the Twenty Eleven Theme, but has problems with the SEO. Im not that much in to creating “new” themes so I wondered if it would be possible to download a SEO friendly child theme somewhere?

    • Jesper – you can use the Twenty Eleven theme and simply add a plugin like WordPress SEO by Yoast. The key part of that plugin is the meta description for every post and page – the plugin shows you exactly how it will look on the Google search page, which is handy.

      • Hi Roy
        Thanks for the reply. Im already using WordPress SEO by Yoast, but as I see it, that does not change the amount oh H1 etc.?
        Jesper

  3. Your last instruction on changing the widget’s H3 to H4 is not entirely correct or complete. In my case (http://www.samsung-galaxy-s4.eu) I needed to change the functions.php file, where there is a function called twentyeleven_widgets_init(). In here are the H3 set, and i had to change the H3 in to H4 in this function.

    • Yeah, I think you are right Peter – it worked for me because I was just using the default sidebar widgets in the example. I’ll have to update that – thanks!

  4. I think sometimes moving to another theme just because you’re worried that TwentyEleven isn’t SEO friendly can be counter-productive. I’ve seen plenty of examples of bloated themes claiming to be optimised for SEO, when if you look at the code – they are far from it.
    In fact, they’d probably have had better results sticking with 20-11 because if nothing else, it’s clean, lightweight and fast.
    If 20-11 suits your blog and technical needs, then I say just stick with it!

    Thanks for the tip on conditional H1 tags – could be useful.

    • I totally agree – Twenty Ten & Twenty Eleven, particularly if you add Yoast or All In One for meta descriptions, are pretty good.

  5. I’m not too worried. The Matt Cutts video is from March 2009 and 3 years is a long time in Google algorithm years. They will have adjusted to HTML5 by now, as so many legitimate sites, including Google, use it.

  6. Just a newbie on Bluehost/Wordpress. Installed twenty-eleven theme but am worried that it may not be SEO optimized and since I am just learning, maybe I should start out with another theme that is better optimized.

  7. Good article, but personally I think that this isn’t such a black and white subject. Google has had the reputation of punishing those who didn’t use layouts as they were intended (ie, too many H1 tags). But with the pervasiveness of HTML5 now, things might be shifting soon.

    According to the spec, we are now supposed to be using H1 tags for each article.

    At the very least, it is something to keep a watch on.

    • That is right, Jordan – I do not want to give the impression that this is a black-and-white subject. My general rule about SEO is to first do no harm, and to me that means not being innovative with new elements or strategies.

      Yes, HTML5 allows for multiple H1 elements on a page – but Google is a big, monolithic organization and for all I know they could still be looking at that signal. One would think that with the proliferation of HTML5 they have at least de-weighted its significance, but the ambiguity leads me to consider that the safest course-of-action is to maintain a legacy tag scheme, for now.

  8. Thanks for this post. It’s been bothering me too that the newer html5 themes all use multiple h1 tags.

    • Thanks, Marcy – it has been bugging me, too. I do not think it is technically wrong, but I worry that Google’s algo is still using a lot of these old signals.

Comments are closed.