I made this article as a continuation to complete the previous article. Actually I myself still feel inferior when discussing issues related to SEO tips (Search Engine Optimization). However, because this has been discussed in many other blogs, so I consider this to be an important part of SEO. And as far as I know, what they present is still problematic with the case of h1 multi tags on post pages, especially when using images as blog titles, where those problems can be very bad for SERP. From some of the reasons above, I tried to present articles with similar topics but with a slightly different method and the most important thing was not to cause multi-tag problems h1.
All codes (HTML & css) in this tutorial are adopted from the Blogger default template. It will be very easy to follow if you use the template, both the original version and the transfer version, the default template user Blogger who has followed the tutorial on how to change the main page from post body to post snippet . Whereas for custom template users, Blogger who is looking for ways to overcome multi h1 tags, at stage number two, can be used as reference material to resolve your problem.
The following is how to modify the h1 heading to be dynamic and
SEO friendly. 1. Enter Blogger >> select blog >> click template, then click Edit HTML.
2. Look for the code below.
<b:widget id='Header1' locked='true' title='Percobaanku (Header)' type='Header' visible='true'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<!--Show image as .... -->
<b:if cond='data:mobile'>
<div id='header-inner'>
<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='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<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:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>⋯</b:includable>
<b:includable id='title'>⋯</b:includable>
</b:widget>
If the header displays an image as the background title (image and writing), delete the code marked in red, then replace it with the following HTML code.
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>
If the blog header only displays images. So that the image is detected as h1 but does not cause multi tags h1. delete the code marked in orange, then replace it with the code. The following HTML.
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</h1>
<b:else/>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</b:if>
If the header only displays the title (writing), delete the code marked in blue, then replace it with the following HTML code.
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title'>
<b:include name='title'/>
</p>
</b:if>
If your blog template still activates cellular display, delete the code marked in green (top), then replace it with the following HTML code.
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>
Note:
Please change as needed, if confused just change everything.
3. Change the article title from h3 to h1 for the post page and page. Please find the code like the one below.
<b:includable id='post' var='post'>
.....
.....
.....
<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 or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
.....
.....
.....
</b:includable>
Delete the code marked in red, then replace it with the HTML code below.
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<h3 class='post-title entry-title' itemprop='name'>
<a expr:href='data:post.link ? data:post.link : data:post.url'>
<data:post.title/>
</a>
</h3>
<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
<data:post.title/>
</h1>
</b:if>
Special additions to users of the Blogger template that still enable cellular display.
Search for codes like the one below
<b:includable id='mobile-post' var='post'>⋯</b:includable><h3 class='post-title entry-title' itemprop='name'>
Change it to below
<h1 class='post-title entry-title' itemprop='name'>
Also change the cover
</h3>to </h1>5. In stage 2 the blog title on the item page (post and page), is redirected to the <p> tag, where the tag is used for comments. This causes the size of the blog title on the page to be small as written in the comment. So is the title of the article, because it uses the h1 tag. The size of the article title changes to large and thick like the title of the blog. If this is left alone it will certainly look very strange.
In order for the size and color of the blog title on the post page and the page to return to normal '. Please search in
<b:skin>the css code as below or similar..Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
Change it to below
.Header p, .Header h1 {
margin: 0;
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header p a, Header h1 a {
color: $(header.text.color);
}
So that the size of the article title / post becomes normal again. Please find the css code as below or similar.
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
Change it to below
h1.post-title, h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
Especially for responsive template users.
Look for the following code inside
@media screen and(max-width:.....px). If you follow the tutorial on how to create a responsive template on this blog, the location is at 768px..Header h1 {font-size: 30px; text-align: center}
Change it to below.
.Header p, .Header h1 {font-size: 30px; text-align: center}
So that the image is in the middle, and force the image to follow the width of the screen (responsive). Add the following code, just place it under the code above.
.Header img {max-width:100%;width:100%;margin:0 auto;padding:0;text-align:center}
Description: The
code marked in red is a new code that must be added. Pay attention to periods and commas (don't get left behind).
6. Click Format Template, then Save Template.
So many tutorials on how to create dynamic H1 headings. Hopefully useful and good luck.
0 Comments:
Post a Comment