Cara Mengubah Tag Heading H1, H2, dan H3 Menjadi SEO Friendly
Assalamualaikum Sahabat Blogger.
Cara Mengubah Tag Heading H1, H2, dan H3 Menjadi SEO Friendly - Dalam setiap template harus memiliki struktur yang berbeda sesuai dengan pembuat template itu sendiri. Ada yang hanya memperlihatkan keindahannya saja, ada pula yang mengikuti SEO Friendly Optimization. Memperbaiki struktur tag heading akan membuat blog menjadi lebih ramah SEO dan membuatnya lebih mudah bagi bot search engine untuk mengindeks judul serta konten artikel yang telah kita publikasikan.
Sebelum mulai memperbaiki tag heading di template blog anda, ada baiknya anda harus memahami arti dari tag heading H1, H2, dan H3 terlebih dahulu. Berikut ini adalah definisi dari tag heading H1, H2, dan H3.
  • <h1> Judul Blog </h1>
  • <h2> Judul Postingan Artikel </h2>
  • <h3> Judul Widget Blogger </h3>

Cara Mengubah Tag Heading H1, H2, dan H3 Menjadi SEO Friendly

Setelah anda mengetahui dan memahami tag heading H1, H2, dan H3 dalam template blog anda, saatnya untuk mulai belajar bagaimana cara mengubah dan meningkatkan tag heading H1, H2, dan H3 agar lebih ramah SEO.

Catatan :
Back up terlebih dahulu template anda untuk berjaga - jaga apabila terjadi kesalahan.

Tahap #1
Login ke akun Blogger -> Pilih Tema -> Edit HTML -> kemudian ketik CTRL + F dan cari kode class='post hentry' . Selanjutnya silakan anda ganti kode tersebut dengan kode dibawah ini.

<div class='post hentry' itemprop='blogPost' itemscope='itemscope'itemtype='http://schema.org/BlogPosting'>
  <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>

Catatan :
Biasanya kode tersebut dimulai dengan kode <div class='post hentry'> sampai dengan kode penutup </div>

Tahap #2
Kemudian anda cari kode <b:if cond='data: post.title'>. Biasanya kode tersebut seperti dibawah ini.

<b:if cond='data:post.title'>
  <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link'>
        <data:post.title/>
      </a>
      <b:else/>
      <data:post.title/>
    </b:if>
  </h3>
</b:if>

Atau seperti ini.

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

Setelah kode tersebut berhasil ditemukan,  silakan anda ganti dengan kode dibawah ini.

<b:if cond='data:post.title'>
  <b:if cond='data:blog.pageType == "index"'>
    <h2 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link' itemprop='url'>
          <data:post.title/>
        </a>
        <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url' itemprop='url'>
            <data:post.title/>
          </a>
          <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
    </h2>
    <b:elseif cond='data:blog.pageType == "archive"'/>
    <h2 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link' itemprop='url'>
          <data:post.title/>
        </a>
        <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url' itemprop='url'>
            <data:post.title/>
          </a>
          <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
    </h2>
    <b:else/>
    <h1 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <data:post.title/>
        <b:else/>
        <b:if cond='data:post.url'>
          <data:post.title/>
          <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
    </h1>
  </b:if>
</b:if>

Tahap #3
Setelah menerapkan langkah diatas,  biasanya akan ada sedikit perubahan ukuran dan warna judul.  Silakan anda letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

.post h2 a,.post h2 a:visited,
.post h1{ display:block; text-decoration:none; color:#FF0000; font-family:arial; font-size:27px; line-height:36px}
.post h2 a:hover{ color:#828282; text-decoration:none}

Catatan :
Ubahlah #FF0000 untuk warna judul artikel
Ubahlah #828282 untuk judul warna saat terkena mouse
Tahap #4
Sekarang ubah tag heading untuk widget, silakan anda cari kode dibawah dan ubah H2 menjadi H3.

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
  <h2 class='title'>
    <data:title/>
  </h2>
</b:if>

Hasilnya akan seperti ini.

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
  <h3 class='title'>
    <data:title/>
  </h3>
</b:if>

Tidak masalah jika anda tidak ingin mengubahnya, tetapi untuk menjadi lebih SEO friendly silakan anda diganti.

Tahap#5
Setelah semua selesai silakan anda simpan.

Baca Juga : Perbedaan Teknik SEO White Hat dan SEO Black Hat

Demikianlah artikel yang bisa saya bagikan tentang Cara Mengubah Tag Heading H1, H2, dan H3 Menjadi SEO Friendly. Semoga dengan artikel yang cukup singkat ini dapat bermanfaat untuk anda. Terimakasih Wassalamualaikum.
Penulis : MasPutro.com

2 Komentar

  1. terima kasih banyak bantuannya, ini yang kalau ada 3 kode, semuanya ikut ganti juga kan ya?

    BalasHapus

Posting Komentar

Lebih baru Lebih lama