Every Blogger’s desire is to boost their traffic and make money. But Search Engine Optimization determines your ranking if you’re following wrong heading tag structure for your post title. So, it’s not a good practice for having more than one H1 tag per page, especially for post pages. If you wanna follow HTML standards, having multiple H1 tags is not recommended; it’s just because of Search Engines follow HTML standards. So try to use the heading tags the right way.
Therefore, in this article, we’re gonna change post title header tag to H1 and having H2 header tag for post title in your home page without changing any styles. I’ve already applied these changes to my blog LabStrike and you can check it out via Chrome’s Inspect element and if you’re a newbie, simply scroll down this post and see the image screenshots under the title "How Can I find Whether Header Tag Changed or Not?"
Changing Heading Tag for post Title to Boost SEO
Due to Blogger’s tweak in Blogger template HTML editor, become more advanced for developers. So if you’re a novice Blogger, it’ll be a little bit complicated. Therefore, follow each steps provided below very carefully and in advance, backup your template before you dive into the template HTML editor.
Also make sure to steer clear untrue click on invalid clicks on Format template, Revert changes and Revert widget templates to default buttons, if you’re using high customized Blogger template.
- Go to Blogger Dashboard » Template
- Backup your Blogger Template before making any changes
- Click on Edit HTML
- Expand your Blogger template skin | See how it's - screenshot
- Press Ctrl + F and search the code shown below ▼
1
| <h3 class='post-title entry-title' itemprop='name'> |
Can’t find?: Guys, if you’re not able to find the above code snippet on your Blogger template, you can simply search for <a expr:name='data:post.id'/> instead of above code. You’ll find this code twice in your Blogger template and be concern to the second one. Please see the image granted below for your better understanding.
After finding the above code snippet on your template, replace the marked code section [you’ll be able to see this in above marked area of the image] with the 39 lines of code section provided below.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <b:if cond='data:blog.pageType != "index"'><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> |
Congratulations! You’ve successfully made a change to your Blogger header tags in your Blog’s Home and Post Pages. Nonetheless, you should be consistent with styles. Therefore, press Ctrl+F again in your template and search for h3.post-title and replace all of them with h1.post-title [please note, you’ll be able to find at least three h3.post-title in your Blogger template].
Click on Save template and you’re almost done! But we haven’t yet finished. To see the sneak peek of the finished result, add the below CSS style to your Blogger template skin. If you’re a newbie, not familiar with template customization and don’t know how to apply CSS style sheets to your template skin, just go to Blogger Template Designer via Blogger Dashboard » Template » Customise » Advanced » Add CSS and paste the below CSS style sheets. The detailed screenshot has given below the CSS style sheet for detailed preview.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| h2.post-title, .post h2 #Blog1 h2, #Blog2 h2 { border-bottom: 0px Dotted #000000; border-top: 0px Dotted #000000; margin: .25em 0 0; padding: 0 0 2px; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-size: 22px; font-weight: normal; line-height: 1.4em; color: #000000;}h2 a:hover { text-decoration: none;} |
Simply press Spacebar or Enter key and click on Apply to Blog button once you finished adding CSS style sheets. Remember, I just screenshot adding this CSS snippets for novice bloggers only. Hence, If you’re familiar with template customization add the above code snippet via Edit HTML itself.
How Can I find Whether Header Tag Changed or Not?
Yeah...We’re completely done. Let’s find whether header tag for your post title changed or not? Just go to your Blog’s home page and right click on any post title and choose Inspect element (I suggest you use Google Chrome browser). If you’ve any doubt, see the image screenshot given below for better understanding.
After choosing Inspect element, you’ll be able to find your post title contains H2 tag and the post title structure will seem like the image screenshot (see above highlighted area) provided below.
Home Page’s Post Title Contains H2 Tag
Now, close Inspect element and go to post page by clicking the post title and check your post title in your post page changed or not via Inspect element as same as we do just before. Now your post title contains H1 tag for blog post page. See the image screenshot (see inside the highlighted area) provided below. And understand the difference between these two images.
Post Page’s Post Title Contains H1 Tag
Also see: Why You Should Add rel="nofollow" Tag to All Your Label Links?
I’ve already changed my HTML header tag for post title on LabStrike as above screenshots declare. What about you Guys? We’re awaiting for your feedback and suggestions via comment. Moreover, I’ve simplified this post as much I can. Still confused? Use our Contact form to get in touch with us for further assistance!
تم النشر يوم
السبت، 14 يونيو 2014 ' الساعة
ليست هناك تعليقات:
إرسال تعليق