Fix Tags Heading errors on Blogger

Question

The H1 tag refers to the title of the post and the title of the blog. And there should only be one H1 tag per page.

And that's where it complicates because the title of the blog is repeated in the pages of the posts, thus creating an error of having 2 H1 tags per page.

When we put an image in the blog header and set this image to be displayed instead of the blog name we are automatically deleted the header from the SEO point of view.

How to solve this?

This is the code in my template that refers to the blog title

                      <b:widget id='Header1' locked='true' title='Xamãs Urbanos (Cabeçalho)' type='Header' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='displayUrl'>https://1.bp.blogspot.com/-Zq-xjYJ4FPg/W6N3Pw888DI/AAAAAAAAHms/123YJTNssl0xQJ5ES82c5QuV6Gr6YwD5ACLcBGAs/s1600/Logo_Xamas_Urbanos_Ayahuasca_em_Porto_Alegre.png</b:widget-setting>
              <b:widget-setting name='displayHeight'>202</b:widget-setting>
              <b:widget-setting name='sectionWidth'>150</b:widget-setting>
              <b:widget-setting name='useImage'>true</b:widget-setting>
              <b:widget-setting name='shrinkToFit'>true</b:widget-setting>
              <b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
              <b:widget-setting name='displayWidth'>150</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main' var='this'>
          <div class='header-widget'>
            <b:include cond='data:imagePlacement in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='image'/>
            <b:include cond='data:imagePlacement not in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='title'/>
            <b:include cond='data:imagePlacement != &quot;REPLACE&quot;' name='description'/>
          </div>
        </b:includable>
            <b:includable id='behindImageStyle'>
          <b:if cond='data:sourceUrl'>
            <b:include cond='data:this.image' data='{                    image: data:this.image,                    selector: &quot;.header-widget&quot;                  }' name='responsiveImageStyle'/>
            <style type='text/css'>
              .header-widget {
                background-position: <data:blog.locale.languageAlignment/>;
                background-repeat: no-repeat;
              }
            </style>
          </b:if>
        </b:includable>
            <b:includable id='description'>
          <p>
            <data:this.description/>
          </p>
        </b:includable>
            <b:includable id='image'>
          <a class='header-brand' expr:href='data:blog.homepageUrl'>
            <img expr:alt='data:blog.title.escaped' expr:data-height='data:height' expr:data-width='data:width' expr:src='data:image'/>
          </a>
        </b:includable>
            <b:includable id='title'>
          <h1>
            <b:tag cond='data:view.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
              <data:title/>
            </b:tag>
          </h1>
        </b:includable>
          </b:widget>

Answer 1

What about adding h1 title after image tag

Try this

 <b:widget id='Header1' locked='true' title='Xamãs Urbanos (Cabeçalho)' type='Header' version='2' visible='true'>
        <b:widget-settings>
          <b:widget-setting name='displayUrl'>https://1.bp.blogspot.com/-Zq-xjYJ4FPg/W6N3Pw888DI/AAAAAAAAHms/123YJTNssl0xQJ5ES82c5QuV6Gr6YwD5ACLcBGAs/s1600/Logo_Xamas_Urbanos_Ayahuasca_em_Porto_Alegre.png</b:widget-setting>
          <b:widget-setting name='displayHeight'>202</b:widget-setting>
          <b:widget-setting name='sectionWidth'>150</b:widget-setting>
          <b:widget-setting name='useImage'>true</b:widget-setting>
          <b:widget-setting name='shrinkToFit'>true</b:widget-setting>
          <b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
          <b:widget-setting name='displayWidth'>150</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main' var='this'>
      <div class='header-widget'>
        <b:include cond='data:imagePlacement in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='image'/>
        <b:if cond='data:imagePlacement in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;} and data:blog.pageType == &quot;index&quot;'><h1 style='display:none'><data:title/></h1></b:if>
        <b:include cond='data:imagePlacement not in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='title'/>
        <b:include cond='data:imagePlacement != &quot;REPLACE&quot;' name='description'/>
      </div>
    </b:includable>
        <b:includable id='behindImageStyle'>
      <b:if cond='data:sourceUrl'>
        <b:include cond='data:this.image' data='{                    image: data:this.image,                    selector: &quot;.header-widget&quot;                  }' name='responsiveImageStyle'/>
        <style type='text/css'>
          .header-widget {
            background-position: <data:blog.locale.languageAlignment/>;
            background-repeat: no-repeat;
          }
        </style>
      </b:if>
    </b:includable>
        <b:includable id='description'>
      <p>
        <data:this.description/>
      </p>
    </b:includable>
        <b:includable id='image'>
      <a class='header-brand' expr:href='data:blog.homepageUrl'>
        <img expr:alt='data:blog.title.escaped' expr:data-height='data:height' expr:data-width='data:width' expr:src='data:image'/>
      </a>
    </b:includable>
        <b:includable id='title'>
      <h1>
        <b:tag cond='data:view.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
          <data:title/>
        </b:tag>
      </h1>
    </b:includable>
</b:widget>