Memperbaiki Elemen Judul Tidak Berurutan Pada Blogger Template

Pernahkah kalian mendapatkan pesan dari PageSpeed Insights "Elemen judul muncul tidak dalam urutan menurun yang berurutan" ?

Pesan ini muncul pastinya saat kalian melakukan test performa web blogsopt menggunakan blogger template Contempo, Soho, Emporio, Notable dan Essential. Timbul pertanyaan: kenapa tema, template bawaan dari situs blogger milik google kok masih ada keslahan ya..?

Itulah hebatnya google, kontribusinya pada masyarakat dunia luas untuk menjadikan blogger atau web of developer menjadi lebih pintar dan kreatif. Makanya, dibuatlah kesalahan-kesalahan kecil agar para blogger selalu teruji dengan tantangannya yang bersifat educative. Jawbnya kok nge-less..! hehehe..!

Baiklah... kita langsung ke permasalahan utama "Cara Memperbaiki Elemen Judul Tidak Berurutan Pada Template Blogger". Menurut seharisilam blog, kesalahan yang terjadi saat kalian menggunakan template blogger yang disebutkan di atas terletak pada susunan urutan dari header tema. Untuk lebih jelasnya, silahkan lihat gambar di bawah ini.

Dari gambar di atas, untuk memperbaiki elemen judul tidak berurutan ini adalah dengan cara memindahkan posisi header timestamp ke posisi sebelah atas dari header post-title (judul postingan / h3.post-title) atau merubah header post-title (judul postingan / h3.post-title) menjadi h2,post-title .

Menurut seharisilam.blog, cara yang paling mudah adalah dengan cara merunah h3.post-title menjadi h2.post-title. Begini caranya :

●   Kilk tema ⇨ edit html
●   Cari :

<b:if cond='data:post.title != &quot;&quot;'>
    <h3 class='post-title entry-title'>
      <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
        <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </h3>    

  </b:if>

dan ubah menjadi:

<b:if cond='data:post.title != &quot;&quot;'>
    <h2 class='post-title entry-title'>
      <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
        <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </h2>    

  </b:if>

●   Cari dan ubah semua css h3.post-title atau <h3.post-title..... menjadi h2.post-title atau <h2.post-title....
●   Jika kalian membuat tag header berikutnya dalam postingan, awali dengan tag header <h3> atau subjudul lalu subjudul kecil <h4> untuk tag header berikutnya.
●   Coba test kembali ke PageSpeed Insights
●   Done!

Jangan tunda-tunda, silahkan coba sekarang, and GoodLuck! dan mohon share ke rekan atau ke media sosial anda.