Cara Membuat Dynamic Heading Agar Blog SEO Friendly

Cara Membuat Dynamic Heading Agar Blog Lebih SEO, Sobat blogger, Dengan mengoptimalkan tag heading yang tersusun dengan baik dalam sudut pandang seo dapat membantu search engine blog lebih maksimal dalam mengindex blog dan menyusun posisi serp blog pada halaman hasil pencarian di search engine.

Baca Juga : 8 Teknik SEO On Page Yang Berpengaruh Pada Ranking

Di artikel sebelumnya juga saya sudah menjelaskan tentang mengatur heading tag h1 sampai h6 untuk mengoptimalkan SEO blog bahwa serach engine google sangat menyukai blog yang penerapan struktur heading tag h1 sampai h6 yang tersusun dengan baik dimana <h1> menggunakan judul blog <h2> dengan judul post dan <h3> bisa di isi dengan sidebar.

Cara Membuat Dynamic Heading Agar Blog SEO Friendly

Baca Juga : Cara Menulis Artikel SEO Friendly dan Berkualitas

Pada dasarnya di template default blogger struktur tag nya menggunakan <h1> dengan judul blog,<h2> sidebar dan <h3> untuk judul posting, dan untuk hal seo penerapan struktur itu kurang baik dimana judul post yang lebih penting di tempatkan di tag h3 dan sebaliknya sidebar yang tidak begitu penting di terapkan di h2 dan untuk mengoptimalkannya saya sudah jelaskan di artikel sebelumnya di cara mengatur heading tag h1 sampai h3.

Menggunakan Dynamic Heading

Sobat blogger namun pada kesempatan kali ini saya akan menerapkan tag heading dinamis atau dynamic heading dimana tag h1 akan di gunakan untuk judul posting di halaman single post,namun pada halaman home page h1 akan berubah menjadi judul blog, sehingga dalam penerapannnya saat di halaman hompage <h1> Judul Blog <h1> dan <h2> Judul Post <h2> namun saat di halaman posting tag <h1> akan menjadi judul posting yang di maksudkan untuk mempertajam seo blog dimana search engine akan merayapi judul post lebih awal dan bisa teroptimasi dengan baik.

Sebelum melakukan tutorial silahkan backup template anda terlebih dahulu.

Cara Membuat Dynamic Heading 

1. Buka akun blogger anda
2. Pilih menu template > Edit HTML.
3. Lalu silahkan anda cari kode di bawah ini

<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>

4. Ganti kode tersebut dengan kode dibawah 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>

5. Selanjutnya anda cari kode di bawah ini

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

6. Ganti kode tersebut dengan kode di bawah 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>

7. Cari lagi kode di bawah 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/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

8. Ganti kode tersebut dengan kode di bawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>

9. Untuk kode CSS nya, cari kode di bawah ini

.post h3 {bla..bla...bla...}
.post h3 a, .post h3 a:visited {bla...bla...bla..}
.post h3 a:hover {bla...bla...bla..}

10. Selanjutnya, ganti kode tersebut dengan kode di bawah ini, atau anda bisa menyesuaikannya sendiri agar tampilan blog anda tidak berubah,yang perlu di perhatikan adalah perubahan .post h3 menjadi .post h1 dan post h2

.post h1, .post h2 {margin:.25em 0 0;padding:0 0 4px;font-size:140%;font-weight:normal;line-height:1.4em;color:$titlecolor;}
.post h1 a, .post h1 a:visited, .post h1 strong,  .post h2 a, .post h2 a:visited, .post h2 strong {display:block;text-decoration:none;color:$titlecolor;font-weight:normal;}
.post h1 strong, .post h1 a:hover, .post h2 strong, .post h2 a:hover {color:$textcolor;}

Update : untuk step 9-10, biasanya ini hanya ada pada template default blogger, dan untuk template hasil download biasanya menggunakan .post h2 , namun sebenarnya jika pada template tidak mengalami perubahan tampilan, lebih baik step ini di lewati , atau anda bisa menyesuaikannya sendiri. 

11. Sekarang cari kode di bawah ini.

#header h1 {bla...bla...bla..}

12. Ganti kode tersebut dengan kode dibawah ini.

#header h1, #header p {margin:5px 5px 0;padding:15px 20px .25em;line-height:1.2em;text-transform:uppercase;letter-spacing:.2em;font: $pagetitlefont;}

13. Selanjutnya silahkan save template anda.

Dengan tutorial di atas maka dengan begitu anda sudah menggunakan dynamic heading atau tag heading dinamis..
Oke sobat saya rasa sudah cukup di tutorial "Cara Membuat Dynamic Heading Agar Blog Lebih SEO " lebih dan kurangnya saya mohon maaf. good luck.

Baca juga : Optimasi Title Tag Otomatis Pada Judul Posting


38 Responses to "Cara Membuat Dynamic Heading Agar Blog SEO Friendly"

  1. Ini yang jarang diperhatikan..padahal dinamic heading pengaruh ke seo juga..mantap ok..

    ReplyDelete
    Replies
    1. Benar sekali mas.. trmksh kunjungannya lagi :)

      Delete
  2. kok step 9 ga nemu ane gan,,?
    yang lain nemu

    ReplyDelete
    Replies
    1. Untuk step 9 , itu biasanya hanya ada pada template default blogger, dan untuk template skrg, biasanya itu ada pada .post h2, namun jangan khawatir, untuk step 9 10 11 12, jika template tidak mengalami perubahan tampilan lebih baik di biarkan saja, atau anda bisa menyesuaikan dalam tampilannya sendiri

      Delete
  3. Step 3 ada dua. apa keduanya di ganti?

    ReplyDelete
    Replies
    1. itu beda kode mas, coba perhatikan step 3 dan step 5.. kodenya tidak sama..

      Delete
  4. Berhasil kok. Cm d blog q ato punya mas-sugeng bukan #header 1 # p tapi .header 1 .p.title gmn mas, sama aja kn?

    ReplyDelete
  5. akan saya coba terapkan.... makasih... ini sambil utak atik... :)

    ReplyDelete
  6. Saya telah melakukan beberapa kali edit tamplate. DAn saya lupa apakah blog saya sudah memenuhi kualitas/standar seo Dynamic Heading ? saya tidak tahu tepatnya saya lupa. Karena saya edit tamplate sambil baca tutorialnya. Karena terlalu banyak, membuat saya lupa apa sudah melakukan optimasi Dynamic Heading.
    Bisakah Sobat membantu bagaimana cara mengetahuinya ?
    Terima kasih sebelumnya.
    Blog saya: www.sekarringidep.blogspot.com

    ReplyDelete
  7. alhamdulillah setelah banyak membuang widget yang bikin seo turun, akhirnya sekarang blog saya sudah kembali 100% chkme

    ReplyDelete
    Replies
    1. Perlu diketahui Chkme tidaklah 100% akurat sob.

      Delete
  8. This comment has been removed by the author.

    ReplyDelete
  9. makasih infonya untuk cara bikin blog, salam kenal dan sukses selalu ia..amiin http://birojasastnk-perizinan.com/biro-jasa/

    ReplyDelete
  10. saya hanya sampai di step sembilan saja, setelah di save tidak berubah tampilanya . apa memang begitu atau harus bagaimana? tanks

    ReplyDelete
  11. saya hanya sampai di step sembilan saja, setelah di save tidak berubah tampilanya . apa memang begitu atau harus bagaimana? tanks

    ReplyDelete
  12. Langkah no.11 di blog saya tidakada.

    ReplyDelete
  13. mantap bosss
    http://www.healthlynursing.tk/search/label/Nursing

    ReplyDelete
  14. Sudah ane coba dan berhasil , kunjungi balik di gasruk.com

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. Makasih gan atas tutorialnya http://pengaspalan.blogspot.com

    ReplyDelete
  17. kode nomor 3 ada 2. Apa diganti dua-duanya ya sis?

    ReplyDelete
  18. saya mau mencoba di blog saya, baru search step 1 ditemukan 2 kode sama, apakah diganti keduanya apa salah satu aja. mohon pencerahanya.
    Batikleluhur.blogspot.com

    ReplyDelete
  19. Banyak kode2 yang dobel alias ada 2, jadi bingung mau merubah yang mana, untuk kode2 diatas ada juga yang berbeda dari hasil template download jadi bingung mau merubahnya

    ReplyDelete
  20. banyak cara agar blog lebih SEO friendly salah satunya yang diposting di blog ini, saya juga menulis artikel komprehensif cara membuat blog yang SEO friendly, semoga dapat bermanfaat
    http://gratisko.blogspot.com/2015/08/cara-membuat-blog-yang-seo-frienldy.html
    Terima kasih admin, salam kenal

    ReplyDelete
  21. Terimakasih banyak setelah saya cek blog saya menjadi 100% SEO Friendly
    Boleh di lihat kalo berkenan :D
    http://qavavsec.blogspot.co.id/

    ReplyDelete
  22. Gan pengen nanya, maksudnya dynamic heading itu yang bagaimana ya?

    ReplyDelete
  23. Thanx madam atas pencerahanya, ijin terapkan di blog ya

    ReplyDelete
  24. Makasih madam tutornya, ijin terapin di blog saya...
    http://www.bahanalamiobat.com/

    ReplyDelete
  25. alhamdulillah sukses juga terapin tutorial kang madamvia,step 9-step 12 saya lewati. saya cek inspek element, sebelumnya judul artikel h3, sekarang berubah h1.
    terimakasih banyak... tutorialnya mudah diikuti..

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. nice info,kunjungi juga www.aplikasipemda.com untuk aplikasi pajak online yang berbasis web dan desktop

    ReplyDelete
  28. Terima Kasih.
    Sangat2 membantu.

    www.tipdantrik.com

    ReplyDelete
  29. Saya baru aja nyoba tehnik ini, masalahnya setelah saya cek di smallseotools[dot]com dengan menginputkan url beranda web, hasilnya "h1" tetap ditempati oleh judul post, seharusnya klo seperti yang dikatakan di atas, apabila kita buka beranda, yg menempati "h1" judul blognya. Mohon pencerahannya mas,,, overall sangat membantu bagi saya yg newbie ini

    ReplyDelete
  30. Mksh, gan berfungsi dengan baik :)

    ReplyDelete
  31. Ooooooo...yang step 9-10 ini toh yang kurang ditemplete ane...makasih ya gan...tengkyuperimach😁

    ReplyDelete