Improve SEO Via Customizing Header Tag for Post Title


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


Header tags for post title SEO
Every Bloggers desire is to boost their traffic and make money. But Search Engine Optimization determines your ranking if youre following wrong heading tag structure for your post title. So, its not a good practice for having more than one H1 tag per page, especially for post pages. If you wanna follow HTML standards, having multiple H1 tags is not recommended; its just because of Search Engines follow HTML standards. So try to use the heading tags the right way.


Therefore, in this article, were gonna change post title header tag to H1 and having H2 header tag for post title in your home page without changing any styles. Ive already applied these changes to my blog LabStrike and you can check it out via Chromes Inspect element and if youre a newbie, simply scroll down this post and see the image screenshots under the title "How Can I find Whether Header Tag Changed or Not?"

   Changing Heading Tag for post Title to Boost SEO

Due to Bloggers tweak in Blogger template HTML editor, become more advanced for developers. So if youre a novice Blogger, itll be a little bit complicated. Therefore, follow each steps provided below very carefully and in advance, backup your template before you dive into the template HTML editor.

Also make sure to steer clear untrue click on invalid clicks on Format template, Revert changes and Revert widget templates to default buttons, if youre using high customized Blogger template.

  • Go to Blogger Dashboard » Template
  • Backup your Blogger Template before making any changes
  • Click on Edit HTML
  • Expand your Blogger template skin | See how it's - screenshot
  • Press Ctrl + F and search the code shown below 

<h3 class='post-title entry-title' itemprop='name'>

Can’t find?: Guys, if youre not able to find the above code snippet on your Blogger template, you can simply search for <a expr:name='data:post.id'/> instead of above code. Youll find this code twice in your Blogger template and be concern to the second one. Please see the image granted below for your better understanding.

new-blogger-template-search

After finding the above code snippet on your template, replace the marked code section [youll be able to see this in above marked area of the image] with the 39 lines of code section provided below.

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title' itemprop='name'>
<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>
</h1>
</b:if>
<b:else/>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title' itemprop='name'>
<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>
</h2>
</b:if></b:if>

Congratulations! Youve successfully made a change to your Blogger header tags in your Blogs Home and Post Pages. Nonetheless, you should be consistent with styles. Therefore, press Ctrl+F again in your template and search for h3.post-title and replace all of them with h1.post-title [please note, youll be able to find at least three h3.post-title in your Blogger template].

Click on Save template and youre almost done! But we havent yet finished. To see the sneak peek of the finished result, add the below CSS style to your Blogger template skin. If youre a newbie, not familiar with template customization and dont know how to apply CSS style sheets to your template skin, just go to Blogger Template Designer via Blogger Dashboard » Template » Customise » Advanced » Add CSS and paste the below CSS style sheets. The detailed screenshot has given below the CSS style sheet for detailed preview.

h2.post-title, .post h2 #Blog1 h2, #Blog2 h2 {
    border-bottom: 0px Dotted #000000;
    border-top: 0px Dotted #000000;
    margin: .25em 0 0;
    padding: 0 0 2px;
    font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
    font-size: 22px;
    font-weight: normal;
    line-height: 1.4em;
    color: #000000;
}
h2 a:hover {
    text-decoration: none;
}

Simply press Spacebar or Enter key and click on Apply to Blog button once you finished adding CSS style sheets. Remember, I just screenshot adding this CSS snippets for novice bloggers only. Hence, If youre familiar with template customization add the above code snippet via Edit HTML itself.

Blogger-template-designer-add-css

   How Can I find Whether Header Tag Changed or Not?

Yeah...Were completely done. Lets find whether header tag for your post title changed or not? Just go to your Blogs home page and right click on any post title and choose Inspect element (I suggest you use Google Chrome browser). If youve any doubt, see the image screenshot given below for better understanding.

Chrome-inspect-element

After choosing Inspect element, youll be able to find your post title contains H2 tag and the post title structure will seem like the image screenshot (see above highlighted area) provided below.

Home Page’s Post Title Contains H2 Tag

Blogger Home Page’s Post Title Contains H2 Tag

Now, close Inspect element and go to post page by clicking the post title and check your post title in your post page changed or not via Inspect element as same as we do just before. Now your post title contains H1 tag for blog post page. See the image screenshot (see inside the highlighted area) provided below. And understand the difference between these two images.

Post Page’s Post Title Contains H1 Tag

Blogger Post Page’s Post Title Contains H1 Tag

Also see: Why You Should Add rel="nofollow" Tag to All Your Label Links?

I’ve already changed my HTML header tag for post title on LabStrike as above screenshots declare. What about you Guys? Were awaiting for your feedback and suggestions via comment. Moreover, Ive simplified this post as much I can. Still confused? Use our Contact form to get in touch with us for further assistance!