July 18, 2015

How To Change Blogger Post Title Tag And Blog Title Tag For Better Optimization

|
Having the correct heading tags for your blog is crucial if you want your site to be well optimized for search results.

But many free blog templates provided by Blogger, the blog post title is in h3 and the blog title is in h1. And this is not good for Google search optimization.

The preferred title tags should be:

Blog Post Title Tag - h1

Blog Title Tag - h3

Here is a guide on how to change them into the proper title tags.

Change Blog Post Title Tag h3 To h1 

1. Log into Blogger Dashboard.

2. Click on "Theme".

3. Click on "Edit HTML".

4. Press Ctrl together with F key.

5. A small empty search box pops up.

6. Type in this text: post-title entry-title in the search box and press the "Enter" key.

7. Now you should see this portion of the code in the template, as shown below:

<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>
8. Now change <h3> to <h1> and </h3> to </h1> as highlighted in blue color.

9. Now it should look like this:

<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>
10. Then click "Save template" button above.

Change Blog Title Tag h1 To h2

1. Now type name='description in the search box again and press the "Enter" key (just like #6)

2. You should see this portion of the code in the template:

<div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
3. Now change <h1> to <h2> and </h1> to </h2> as highlighted in blue color.

4. Now it should look like this:

<div class='titlewrapper' style='background: transparent'>
              <h2 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h2>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h2 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h2>
            </div>
Note: There are two (2) set of  h1 to change.

5. Then click on "Save template" button above.

That's all you need to do to change Blogger header tags to get SEO optimization by Google search engine.

Note: After you have changed the title tags, you won't see the changes right away in your source page. It needs at least 24 hours to take effect.