Wednesday, March 20, 2013

Blogger H1 Tag on Post Pages Only

All Blogger templates uses the H2 or H3 as header tags, but for a better SEO is best to use the H1 tag only ONCE in every post page.

The problem is that if you change the H2 tag into the H1 in a blogger template, then you've got the home page that lists your latest posts with multiple H1 tags.

So here is how to solve this:

  • Click on: Template -> Edit HTML
  • Check: Expand Widget Template
  • Copy everything into a file to make a backup.

Then find this block of code:

 <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>


In your template H3 can be H2, then replace the above code by this one:

<b:if cond='data:post.title'>
            <b:if cond='data:blog.pageType != "item"'>
                <b:if cond='data:blog.pageType != "static_page"'>
                    <h2><a expr:href='data:post.url' rel='bookmark' title='Permanent Link' expr:id='data:post.id'><data:post.title/></a></h2>
                <b:else/>
                    <h1><a expr:href='data:post.url' rel='bookmark' title='Permanent Link' expr:id='data:post.id'><data:post.title/></a></h1>
                </b:if>
            <b:else/>
                <h1><a expr:href='data:post.url' rel='bookmark' title='Permanent Link' expr:id='data:post.id'><data:post.title/></a></h1>
            </b:if>
        <b:else/>
            <h2><a expr:href='data:post.url' rel='bookmark' title='Permanent Link' expr:id='data:post.id'>UNTITLED ENTRY</a></h2>
  </b:if>


 This way the H1 tag will be displayed once on posts pages and static pages only, the rest will display the H2 tag. It is checking that the current page is neither an item page (post) or a static page (a page), that's how it works.

This is true if your blog title is an image or logo and not an H1, otherwise you'll get tww H1 tags.
Well I'm going to change my blog title by a logo image header.



7 comments:

Rakesh Panchal said...

Very Nice Article, I Have used on my website www.top10worldz.com

Anonymous said...

I got error while changing tags
can you help me with my code

www.gizmoload.com

Maria M. Olivares said...

Sorry it didn't work for you, remember to always backup your template.
What kind of errors did you get?
You need to find the code in blue color and replace it with the one in red, you need to cut and paste the whole block to make it work.

OM Softnews said...

Thanking to Maria M. Olivares,
This codes works fine and without any error...
I also check on my site and here is the proof at : Softfully.com

subaharan nithiyananthan said...

this is good than normal h1 replace instead of h2,h3

Angel Costa said...

Great, but to be more precise, you need to remove the "a" tag in h1. SEO does not like links to the page itself.

Johnny Bigfoot said...

This works and corrects the error in Bing webmasters but it makes it so "headline" is missing in Google webmasters tools. I'd rather please Google than Bing but there has to be a way. I switched all my H3 to H1 but my home page has 10 articles. www.bigfootresearchnews.com

Post a Comment

Your opinion is very appreciated, thank you!