2

How to Change HTML Header Tag H1 for Bloggers to Increase SEO
H1 tags can improve your search engine ranking. But maybe you don’t know what that means, or even how to tell if your website is using the H1 tag properly to maximize your search engine placement. In order for you to know about this H1 thing, you should have knowledge with HTML and the like.

This may take time for you if you will go through the normal process of learning. If you are going to enroll in an institution, well, there will be improvement on your skills on this one but we have to accept the fact that there are times when you cannot go to school anymore. I am not saying that you don’t have the means to study but once you are packed with so many responsibilities, you might find it hard to deal with this matter.

This SEO tutorial video is meant to teach you all about using the H1 tag to improve your onsite SEO. Remember that videos can teach you a lot of things if you will only pay attention to them. Well, in my case, I cannot deny the fact that I learned a lot through videos and here, I am sharing my experience.

When to Change Post Title Header Tag?

If you are familiar with your heading structure, you can go ahead and tweak your post title HTML header tag. But make sure there is no H1 header tags present on the page and no lower header tags such as H2, H3 comes before your post title. Well, you will have to think about your post date header in that scenario.

Let's say you have replaced standard header with a custom blog header and displaying post date in a different way or with no header tags involved.

Then you can safely change post title header tag to H1 in few steps. But, as Blogger applies template changes to every page, once you change it to H1, if your blog homepage lists multiple blog posts, the homepage will end up with multiple H1 header tags listed. Ugh... It's not what you asked for.

Here I'm gonna let you know how to change the post title header tag by accessing your template. Worrying about multiple H1 tags on homepage? You will find the code snippet not to list multiple H1 tags on homepage while having H1 tag for post title on single pages too.

Anyway, as I implied earlier, make sure you are aware of heading structure on your blog before you proceed with changing post title header tag. Shall we?

Steps:

1. Go to Blogger Dashboard.
2. Click on your Blog Title.
3. Navigate to Template tab.
4. Click on Edit Template button.
5. Now search for following line of code in your template,

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

Note: If you encounter two search results for your search, stick with the second result.

6. Take a good look at the code snippet where you found above line of code.

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 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>
</h3>
</b:if>

7. Replace above code snippet with following,

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

Color Indication Information:

   - Post Title Header Tag on Other Pages

This defines what HTML header tag to use for post title on pages except for homepage.

   - Post Title Header Tag on Homepage

Here it defines what HTML header tag to use for post titles displayed on homepage. The default tag defined is H2 and you can change it to what you prefer.


8. Though we made changes to header tags, we need to be consistent with styles. So, search and replace all h3.post-title with following,

h1.post-title

9. Further, add following CSS styles to your template too.

h2.post-title {
  font: $(post.title.font);
  margin: .75em 0 0;
}

h2 a:hover {
  text-decoration: none;
}

Notes:

* If you defined different value for Post Title Header Tag on Homepage in the code snippet, replace highlighted header tag with the same header tag you have defined.

* If you don't know how to add CSS styles to your template, read Easily Add Custom CSS to Your Template in Blogger.

10. Once you done with changes, click Save template button to save changes.

Note: If you have further questions and suggestions just post comment below, thanks 
The Author

I'm Frank from Philippines. born on July 20, 1986 Author of www.theblogservices.net. I was a blogger since July 2010, I have a great passion about blogging and all other stuff online. Follow Me on Google+ or Join our official FB Group HERE

Related Post



2 comments:

  1. ang hirap di ko mahanap sa template na gamit ko., =(

    ReplyDelete
    Replies
    1. okay lang po yan, kung di nyo mahanap sa sunod nyo nalang po gawin. minsan wala yan sa mga templates, much better use customized templates po para madali mo sya makita.

      Delete