How to Change HTML Header Tag for Post Title in Blogger

Have you been using headings in your blog posts or articles? Headings are helpful to break down information for readers without overwhelming them with texts all over the page. Not only human readers, but also electronic devices and automated tools read your content and make use of headings to structure your posts or articles to present in a better way for human readers. Even search engines index your content effectively and structured manner if you use HTML header tags properly and your content will perform better in search results too. You love some SEO boost. Don't you?

I assume you are familiar with header tags as we already discussed about the importance of using HTML header tags properly in posts or articles. Now we gonna talk about something related to HTML header tags, but in Blogger platform.

Post Title

Were you aware that, by default, the post titles in Blogger are using H3 header tags? Yes, it is.

Generally, Top level headings in a web page advised to use H1 HTML header tags. If we take a closer look at a single page in a blog on other popular blogging platforms, we can find the post title were tagged with H1 header tag.

In the post about HTML header tags, I've mentioned that headings available to use in Blogger Post Editor starts with H2 and continue all the way to H4. If you use headings in your content, your heading structure on the page is,

There's some obvious questions. How come H2 comes after H3? Shouldn't the post title header tag be H1?

If the post title header tag is H1,

Wow... The structure is much better with H1 header tag for post title. In that scenario, post title acts as a top level heading and content headings falls under that. Isn't it the way that heading structure should be? Let's go and change it NOW.

Misconception

If the post title is using H1 header tag, it's structurally correct according to HTML standards. The more structural, it's more optimized for search engines too. As you are having H3 header tags for post titles, it's probably affecting on search results negatively? Not at all.

What?!

You are missing the whole picture. You were gazing at the part of your blog. If you need your blog to be more optimized and technically correct according to HTML standards, you need to look at the whole blog structure and how headings were used.

Yeah, your blog title and date header is defined as headings too. They are using H1 and H2 header tags. Still thinking about changing post title header tag to H1?

However, Blogger is using structured data tags / properties in template source code to define headings more descriptively. Therefore even you change the header tags accessing your template, it will be safe for some extent.

Eventhough it is safe with structured data properties defined, if you don't know what you are dealing with or not familiar with heading structure in your blog, don't try to tweak headings just because it says "Post titles should be tagged with H1 for better SEO". It depends on your blog structure. If you don't know about it, it's best the way it is.

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.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

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.


Enjoy :-)