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


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

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

    BalasHapus
    Balasan
    1. Benar sekali mas.. trmksh kunjungannya lagi :)

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

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

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

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

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

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

    BalasHapus
  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

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

    BalasHapus
    Balasan
    1. Perlu diketahui Chkme tidaklah 100% akurat sob.

      Hapus
  8. Komentar ini telah dihapus oleh pengarang.

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

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

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

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

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

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

    BalasHapus
  15. Komentar ini telah dihapus oleh pengarang.

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

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

    BalasHapus
  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

    BalasHapus
  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

    BalasHapus
  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

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

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

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

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

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

    BalasHapus
  26. Komentar ini telah dihapus oleh pengarang.

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

    BalasHapus
  28. Terima Kasih.
    Sangat2 membantu.

    www.tipdantrik.com

    BalasHapus
  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

    BalasHapus
  30. Mksh, gan berfungsi dengan baik :)

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

    BalasHapus
  32. Viomagz udh ada dynamic headingya gk ya?

    BalasHapus
  33. I am very happy to discover your post as it will become on top in my collection of favorite blogs to visit. best seo services for small business

    BalasHapus
  34. Excellent information on your blog, thank you for taking the time to share with us. Amazing insight you have on this, it's nice to find a website that details so much information about different artists. marketing1on1.com/buy-backlinks

    BalasHapus