Most Blogger blogs are poorly optimized when it comes to Headline tags which includes H1, H2 and H3 either because newbie publishers are imp...
Most Blogger blogs are poorly optimized when it comes to Headline tags which includes H1, H2 and H3 either because newbie publishers are implementing wrong SEO techniques by reading unauthentic articles across the web or may be because they are using a custom template which may look quite attractive when it comes to User interface (UI) but they are the worst when it comes to Optimized XHTML Structure. In our previous tutorial we share how you can assign H1 Tag to Blog Title on homepage, search pages and Archives, in todays tutorial we will discuss how to correctly optimize Post titles and Static Page titles in blogspot by assigning H1 Tag to a title on Item Page and H2 tags on Index and Archive pages. We will also empower the title Structure with the correct Schema Markup.
I have used the word 'Overused' because rarely do people understand that keeping a logical hierarchy of Headline tags on a HTML DOM is not only SEO friendly but also sensible thing to do. Bloggers today rarely understand that and as a result they often use Multiple H1 tags on a single page or they assign H2 to Post titles on item pages which is a terrible SEO mistake. H2 is overdosed to post tiles on every single Page may it be index, item or archive pages.
For The Record: This tutorial is the first tutorial of its kind shared online which focuses on adding H1 Tag to Post titles and optimizing the Headline tags with Microdata tags
Just like the headlines in a newspaper attract a reader's attention, similarly the Headline tags in a blog article attracts the attention of a search robot. H1 is given the most importance followed by H2, H3 and so on till H6. In web typography we normally use H1,H2 and H3 a lot and it is important that you may optimize the layout of your template such that these tags may be correctly placed on the basis of Importance. To make it worst Post Titles are even Self-Hyperlinked or Self-Linked when Post is viewed. Why would you link a page to the page itself? Makes no logic.
Note: Please first read Part 1 of this tutorial series so that you may understand the default hierarchy for Headline Titles in Blogger
What's The Plan?
Be default Blogger blogs have the following Heading Settings:
Before:
| Heading Tag | Assigned to |
|---|---|
| h1 | Assigned to Blog Title. Not assigned at all when Logo Image is used |
| h2 | Assigned to Sidebar Titles. |
| h3 | Assigned to Post Titles and Subheadings! Weird! |
I called it weird because your Sidebar tiles are given more importance than your Post titles! By default blogger assigns <H3> tag to Post titles on all pages which makes them even less important than the sidebar headlines which have a H2 tag. Fixing this is really important to better rank your titles.
In case where a logo image is used, no H1 tag is used at all! Which means there is almost no presence of <h1> tag on any page of your blog which is really not recommended in SEO.
After:
| Heading Tag | Assigned to |
|---|---|
| h1 | Assigned To Blog Title only on Index Pages and archives and assigned to Post Title on the Item Page only. This way every page on your blog will have a H1 tag assigned to your most important Title. |
| h2 | Assigned to Post Titles on Index Pages and archives. Assigned to Sidebar Titles on all pages. Due to widget XHTML structure configuration, the sidebar headlines tags can not be edited. H2 is fixed for sidebar Headlines |
| h3 | Assigned to Subheadings only |
This way you will assign <H2> tag to Posts titles on Index and Archive Pages
- Index Pages: These pages are your Homepage and Label Pages
and you will assign <H1> Tag to Post Tiles on Item Pages only
- Item Pages: These are your Post or Static Pages When viewed
Lets get to work!
Optimizing Post Title Headline Tags
Remember that we are not just optimizing titles, we will also be adding schema microdata tags to better help search bots to recognize the structure of your entire site. This will also help eliminating Data structured errors on your webmaster account.
Follow these sequential steps:
1 Go To Blogger > Template > Backup your template
2 Click Edit HTML
3 Search for this code or its alike
class='post hentry'
Which will be contained inside a div section as shown below
<div class='post hentry'>
4 Replace it with this
<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
info: The above highlighted parameters are microdata tags that help describe your content.
5 Next find this code or one similar to it:
<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/>
<data:post.title/>
</b:if>
</h3>
</b:if>
or in new blogger templates the code will look like this
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
Replace the code you just found with this optimized version of the code
<b:if cond='data:post.title'>
<b:if cond='data:blog.pageType == "index"'>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' itemprop='url'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' itemprop='url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2><b:elseif cond='data:blog.pageType == "archive"'/>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' itemprop='url'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' itemprop='url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2><b:else/>
<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<data:post.title/>
<b:else/>
<b:if cond='data:post.url'>
<data:post.title/>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
</b:if>
6 Save your template and you are done!
Customize the Titles!
Since we have changed the tag for post titles therefore you will see a change in your title colors and appearance. You need to style the new tags using the following css code.
Paste the code below just above ]]></b:skin>
.post h2 a,.post h2 a:visited, .post h1{
display:block;
text-decoration:none;
color:#242729;
font-family:arial;
font-size:27px;
line-height:36px}.post h2 a:hover{
color:#828282;
text-decoration:none}
- Replace 242729 with Title color
- Replace 828282 with Title Color when mouse is hovered on it
Save your template and all done!
Need Help?
We have implemented the same method on MBT and we have seen amazing results so far. I hope to see your blogs rank well on SERPs and it benefit you as much as possible. Please let me know if you need any help in understanding any part of this tutorial. Wish you all a happy blogging experience, full of fun and free of bugs.
Peace and blessings buddies! =)
COMMENTS