Tips Tutorial Cara Modifikasi Heading Tag H1 Semoga Dinamis Dan Seo Friendly

Sebagaimana kebanyakan template custom Blogger, baik yang gratisan maupun yang premium sudah menerapkan metode Heading h1 yang dinamis. Yaitu saat berada pada halaman utama, hanya judul blog yang akan terdeteksi sebagai h1, sedangkan pada halaman artikel / postingan, hanya judul artikel yang terdeteksi sebagai h1. Dengan metode menyerupai ini, mesin telusur akan menempatkan judul artikel sebagai kata kunci prioritas utama untuk memilih SERP (Search Engine Result Page) dari artikel tersebut. Hal ini berbeda saat kita memakai template standar, dimana judul artikel di tempatkan sebagai h3, mesin telusur akan selalu menempatkan judul blog sebagai kata kunci prioritas pertama dan judul artikel sebagai kata kunci prioritas ketiga. Hal ini mengakibatkan artikel kita sulit untuk menerima peringkat SERP yang baik untuk queri yang berkaitan dengan judul artikel.

Artikel ini aku buat sebagai lanjutan untuk melengkapi artikel sebelumnya. Sebenarnya aku sendiri masih minder kalau membahas dilema yang berkaitan dengan tips SEO (Search Engine Optimization). Akan tetapi alasannya ialah hal ini sudah banyak dibahas di blog lain, jadi aku anggap ini ialah penggalan penting dari SEO. Dan setahu saya, apa yang mereka sajikan masih bermasalah dengan kasus multi tag h1 pada halaman post, khususnya saat memakai gambar sebagai judul blog, dimana dilema tersebut sanggup sangat berakibat jelek pada SERP. Dari beberapa alasan tadi, aku mencoba untuk menyajikan artikel dengan topik yang serupa tapi dengan metode yang sedikit berbeda dan yang paling penting ialah tidak mengakibatkan dilema multi tag h1.

Semua arahan (HTML & css) dalam tutorial ini di adopsi dari template default Blogger. Akan sangat gampang di ikuti bila anda memakai template tersebut, baik versi orisinil maupun versi pengalihan, yaitu pengguna template default Blogger yang sudah mengikuti tutorial cara mengubah halaman utama dari post body menjadi post snippet. Sedangkan untuk pengguna template custom Blogger yang sedang mencari cara mengatasi multi tag h1, pada tahap nomor dua, sanggup dijadikan materi tumpuan untuk mengatasi dilema anda.

Berikut ini cara modifikasi heading tag h1 semoga menjadi dinamis dan SEO friendly.

1. Masuk ke Blogger >> pilih blog >> klik template, kemudian klik Edit HTML.
2. Cari arahan menyerupai di bawah ini.

        <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 == &quot;BEHIND&quot;'>        <!--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='&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'>⋯</b:includable>            <b:includable id='title'>⋯</b:includable>          </b:widget>

Jika header menampilkan gambar sebagai latar judul (gambar dan tulisan), hapus arahan yang ditandai dengan warna merah, kemudian ganti dengan arahan HTML berikut ini.

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

Jika header blog hanya menampilkan gambar. Agar gambar terdeteksi sebagai h1 tetapi tidak mengakibatkan multi tag h1. hapus arahan yang ditandai dengan warna oranye, kemudian ganti dengan kode. HTML berikut ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>    <h1 class='title'>        <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'/>    </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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>    </a>  </b:if>

Jika header hanya menampilkan judul (tulisan), hapus arahan yang ditandai dengan warna biru, kemudian ganti dengan arahan HTML berikut ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>     <h1 class='title'>       <b:include name='title'/>     </h1>    <b:else/>    <p class='title'>      <b:include name='title'/>    </p>  </b:if>

Jika template blog anda masih mengaktifkan tampilan seluler, hapus arahan yang ditandai dengan warna hijau (paling atas), kemudian ganti dengan arahan HTML berikut ini.

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

Catatan :
Silahkan ubah sesuai kebutuhan, jikalau galau ubah saja semua.

3. Mengubah judul artikel dari h3 menjadi h1 untuk halaman post dan laman. Silahkan cari arahan sepeti di bawah ini.

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

Hapus arahan yang ditandai dengan warna merah, kemudian ganti dengan arahan HTML di bawah ini.

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

Tambahan khusus untuk pengguna template Blogger yang masih mengaktifkan tampilan seluler.

Cari arahan sepeti di bawah ini di dalam <b:includable id='mobile-post' var='post'>⋯</b:includable>

<h3 class='post-title entry-title' itemprop='name'>

Ubah menjadi menyerupai di bawah ini

<h1 class='post-title entry-title' itemprop='name'>

Ubah juga penutupnya </h3> menjadi </h1>

5. Pada tahap 2 judul blog pada halaman item (post dan laman), dialihkan ke tag <p>, dimana tag tersebut dipakai untuk komentar. Hal ini mengakibatkan ukuran judul blog pada halaman tersebut menjadi kecil menyerupai goresan pena pada komentar. Begitu juga judul pada artikel, alasannya ialah memakai tag h1. Ukuran judul artikel bermetamorfosis besar dan tebal layaknya judul blog. Jika ini dibiarkan tentunya akan terlihat sangat aneh.

Agar ukuran dan warna judul blog pada halaman post dan laman kembali normal'. Silahkan cari di dalam <b:skin> arahan css menyerupai di bawah ini atau yang serupa.

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

Ubah menjadi menyerupai di bawah ini

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

Agar ukuran judul artikel / post menjadi normal kembali. Silahkan cari arahan css menyerupai di bawah ini atau yang serupa.

h3.post-title, .comments h4 {  font: $(post.title.font);  margin: .75em 0 0;  }

Ubah menjadi menyerupai di bawah ini

h1.post-title, h3.post-title, .comments h4 {  font: $(post.title.font);  margin: .75em 0 0;  }

Khusus untuk pengguna template responsive.

Cari arahan berikut di dalam @media screen and(max-width:.....px), Jika anda mengikuti tutorial cara menciptakan template responsive di blog ini, letak nya ada pada 768px.

.Header h1 {font-size: 30px; text-align: center}

Ubah menjadi menyerupai di bawah ini.

.Header p, .Header h1 {font-size: 30px; text-align: center}

Agar gambar berada di tengah, serta memaksa gambar mengikuti lebar layar (responsive). Tambahkan arahan berikut, letakkan saja di bawah arahan di atas.

.Header img {max-width:100%;width:100%;margin:0 auto;padding:0;text-align:center}

Keterangan :
Kode yang ditandai dengan warna merah ialah arahan gres yang harus ditambahkan. Perhatikan tanda titik dan koma (jangan hingga tertinggal).

6. Klik Format Template, kemudian Simpan Template.

Sekian tutorial cara menciptakan heading h1 dinamis. Semoga bermanfaat dan selamat mencoba.