Membuat Tag Heading Blogspot SEO Friendly

Banyak sekali cara yang dilakukan untuk meningkatkan SEO blog Anda, salah satunya dengan memodifikasi template blogspot. Ulasan kali ini akan dijelaskan cara membuat Tag Heading lebih dinamis dan pastinya menjadikan blog Anda SEO friendly.

Cara membuat Tag Heading Blogspot Dinamis:

1. Masuk ke dashboard blogger
2. Template > Edit HTML
Untuk mempercepat pencarian kode tekan Ctrl + F (petujuk)
3. Copy kode di bawah ini

  <b:widget id='Header1' locked='true' title='Indoamaterasu (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'>

        <a expr:href='data:blog.homepageUrl' style='display: block'>

          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

        </a>

        <!--Show the description-->

        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>

          <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'>

  <div class='descriptionwrapper'>

    <p class='description'><span><data:description/></span></p>

  </div>

</b:includable>

          <b:includable id='title'>

  <b:if cond='data:blog.url == data:blog.homepageUrl'>

    <data:title/>

  <b:else/>

    <a expr:href='data:blog.homepageUrl'><data:title/></a>

  </b:if>

</b:includable>

        </b:widget>

4. Kode yang panjang tersebut adalah kode untuk bagian header, tempat menampilakan judul dan juga deskripsi. Sebelum Anda mencari kode tersebut silakn perhatikan kode yang saya tandai biru di atas, nama kode tersebut akan berbeda-beda sesuai dengan judul blog Anda.
5. Jika Anda sudah menemukan kode tersebut, silakan hapus semuanya dan ganti dengan yg sudah saya modifikasi di bawah ini.

<b:widget id='Header1' locked='true' title='Indoamaterasu (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>

          </b:if>

  </b:if>

        <a expr:href='data:blog.homepageUrl' style='display: block'>

          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' 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>

      </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;'>

             <p class='title'><b:include name='title'/></p>

     <b:else/>

       <h1 class='title'><b:include name='title'/></h1>

     </b:if>

  <b:else/>

          <p class='title'><b:include name='title'/></p>

  </b:if>

     <b:include name='description'/>

      </div>

 </div>

  </b:if>

</b:includable>

<b:includable id='description'>

  <div class='descriptionwrapper'>

    <p class='description'><span><data:description/></span></p>

  </div>

</b:includable>

<b:includable id='title'>

  <b:if cond='data:blog.url == data:blog.homepageUrl'>

    <data:title/>

  <b:else/>

    <a expr:href='data:blog.homepageUrl'><data:title/></a>

  </b:if>

</b:includable>

      </b:widget>

6. Masih belum selesai, langkah selanjutnya adalah mengedit pada bagian judul postingan. Caranya cari kode di bawah ini di dalam template Anda.

<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>

7. Hapus semua kode tersebut dan ganti dengan yang ini

<b:if cond='data:post.title'>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
     <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <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:else/>
          <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:else/>
        <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:if>

8. Sebenernya sampai langkah ini sudah cukup untuk membuat struktur tag heading di blog menjadi dinamis, tapi mungkin akan ada keanehan yang akan dilihat di blog Anda, yaitu judul blog menjadi terlihat kecil. Solusinya silakan cari kode ini.

.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);
}

9. Hapus dan ganti dengan ini.

.Header h1.title,.Header p.title {
  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.title a,.Header p.title a {
  color: $(header.text.color);
}

Share :