20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

How To Create Valid HTML5 Blogger Header

Tutorial on Installing adding code for making blogger header validated html5.learn trick to create blogger header validate html5 in google structure data testing tool for better seo to improve website ranking.
How to create validate html5 blogger template for better seo
Hello Folks, Today in this article we are going to explain How to create blogger header valid HTML 5 in blogger template.We have already shared Validating Blogger template with HTML 5  and Complete Guide For Installing HTML 5 Meta tags for better SEO in blogspot template and we hope you guys have already implemented HTML 5 in your website or blog.Making your blogger header valid with HTML 5 is a great step towards the SEO.Points to remember that The imporant heading on the page should be H1 and there is generally one H1 tag in every website or blogs.And use H2 tag for sub headings and H3 for sub sub headings.All the headings tag contains the imporant keywords of your article/post.So your homepage heading structure will look like this:
  • <H1>: Declares Website/Blog’s name or you can say Title of your Website.
  • <H2>: Contains Website Taglines, Keywords If you are not using anyone of this with H2 tag then your all the posts headings will be H2.
  • <H3>: You can use for the Sub headings under the artilce or recent posts or in related posts gadget..
  • <H4>: Goes for sidebar Widget headings and also for some widgets.
  • <H5>: Goes for footer widgets.
After reading above points you must understand the use of headings.In order to make your header valid HTML5 version you must follow the steps mentioned below.

How to Make Blogger Header Validate HTML5 In Template

Installation Steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard and take backup of your template before proceeding to next step.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for the following tag or if not able to find select from drop down header1 widget.
<b:widget id='Header1' locked='true' title='Bloggersstand (Header)' type='Header'>
..
</b:widget>
Step 4. Now copy the below code snippet and replace the above code with the it.
<b:widget id='Header1' locked='true' title='Bloggersstand (Header)' type='Header'>
      <b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <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='&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>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
            <div style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='description'/></div>
          </b:if>
        </b:if>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:title='data:title' itemprop='image' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
          <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
               <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
                <div style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='description'/></div>
            </b:if>
          </b:if>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>    
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <h1 class='title'><b:include name='title'/></h1>
           <b:else/>
             <h1 class='title'><b:include name='title'/></h1>
           </b:if>
        <b:else/>
          <h2 class='title'><b:include name='title'/></h2>
        </b:if>
        <b:include name='description'/>
      </div>
    </div>
  </b:if>
</b:includable>
      <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description' itemprop='description'><span><data:description/></span></p>
  </div>
</b:includable>
      <b:includable id='title'>
    <a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'><data:title/></span></a>
</b:includable>
    </b:widget>
 Step 5. Now Save your template..Done !

Now to check you have installed perfectly blogger header HTML5 validate trick,visit the below url:
and check you will section of WPheader and there you can see your all details will displaying perfectly,look below for example.
trick to solve wpheader in google structure data testing tool
In the Above image you can see that there is clearly display of Url of website , name , description and image that means google is able to read your blogger header.so you must add this trick in your blogger template.

Post a Comment