 |
| Optimised Blog Headers Tags? |
Out of the box, blogger.com templates and themes comes with dedicated H tags (Headers Tags) for its blog posts and blog static pages. A blogger static page would be your "Home" page, "About Us" page or maybe your "Contact Me" page.
A header tag are indicators for the importance of a page structure which is; H1 would be your Post Title, H2 tags dedicated for your posts descriptions or sub titles and so forth.
For Blogger themes and templates, the H1 tags is dedicated for your blog title and H2 tags would be for your blog posts titles. For search engine optimisation, to make your blog posts more relevant to search engines, it is recommended to change your blog posts titles to H1 tags. Thus will prevent duplications of post to blog titles, which would definitely harm your articles and posts in search engines result pages.
This tutorial will help you to re-arrange your Header Widgets tags automatically by tweaking your themes or template HTML code. This simple and easy tweak will definitely turn your blog pages and posts to a more search engine friendly site for web crawlers and boost your blog on line presence.
Restructure your Blogger Themes and Templates H-Tags for Search Engines Best Results.
Automatically change your blog Header widget H-Tags
> Go to blogger.com > "Your Blog" > Dashboard > Template > Backup/Restore > (Pop Up Window) Save your existing templste to your PC.
> Go to Edit HTML > Proceed > Tick on Expand Widget Templates.
> Press Ctrl-F and copy the code below and paste to your search bar > press Enter.
<div class='titlewrapper'><h1 class='title'><b:include name='title'/></h1></div>
> You will find a line of codes which would look similar to this:-
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
> Copy the code below and replace with the line of codes above > click Save.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='titlewrapper'>
<h2 class='title'>
<b:include name='title'/>
</h2>
</div>
</b:if>
Explanation: What this does is to re-organise your Header widgets to automatically switch your Home page H1 (Blog Title) tags to H2 tags on your blog posts. And in the same event, on your blog Home Page, your blog post title snippets will be indicated as H2 tags, thus preventing from duplications of H1 tags on the home page it self.
Changing your Blog Posts Titles H-Tags
While still in Edit HTML window:-
> Press Ctrl-F and copy this code: h3 class='post-title entry-title - and paste to your search bar.
> Press Enter and you will find a similar line of codes like below:
<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'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Note: Certain themes would have a slight difference coding depending on the template designers, but the above line of codes would be a good indicator.
> Now replace H3 code to H1 at the start and ending of the given line of codes.
> Click Save and Preview your Blog.
Explanation: What this does is to replace your blog posts H3 tags to H1 tags all through out your blog site, even for your previous and future posts and articles.
Your CSS Stylesheets
When changing your H1 to H2 tags vise versa, certain stylesheets of your standard blogger templates have some differences. Additonal code is required to synchronise the changes with the above tags; while still in Edit HTML window:-
> Press Ctrl-F and copy this code: ]]></b:skin> - and paste to your search bar. Press Enter.
> Copy code below and paste above the given code:-
h1.post-title, .post h1 #blog1 h1, #blog H1 {font-size:1.5em;}
> Click save and Preview. You can change the font height which suits your blogger template
Note: You can change your blog title sizes by adding the numbers in the code above, for instance 1.5em equals to 150% larger than your existing font size, and so forth.
Congratulations! You have successfully optimised your blog main header-tags. You can use free online tool such as SEO Site Tools to re-check if the steps above was successful. Just click the browser built SEO Site Tools here if you're using Google Chrome and install. Installation is pretty much straight forward and with a simple click on your browser, it can detect your blog H-Tags instantly.
But wait! How about the other H-Tags? What about optimising H2, H3 and the other header tags for your blog for full on page optimisation?
Don't worry, below are several links for you to optimise your blog pages H-Tags including basic optimisations techniques. If you have any quires, you can just leave a message below and we will gladly assist you. Note that we are +800 GMT, so time difference can be a slight factor for support, but never the issue. Shout out to Googlertech for the assistance and help for this tutorial.
