Cara Membuat Dynamic Heading Agar Blog SEO Friendly

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


Bagikan Ke
39 Komentar untuk "Cara Membuat Dynamic Heading Agar Blog SEO Friendly"

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

Benar sekali mas.. trmksh kunjungannya lagi :)

kok step 9 ga nemu ane gan,,?
yang lain nemu

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

Step 3 ada dua. apa keduanya di ganti?

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

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

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

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

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

Perlu diketahui Chkme tidaklah 100% akurat sob.

This comment has been removed by the author. - Hapus

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

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

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

Langkah no.11 di blog saya tidakada.

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

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


http://www.ganjabet.com-Bonus welcome 30% - Bonus setiap Depo 5% Cashback Sportbook 15% - Casino 10%

http://www.indotigerpoker.com-Bonus Setiap Deposit 2% - Turnover Selanjunya 1.5% -Referal 15%

...

This comment has been removed by the author. - Hapus

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

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

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

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

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

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

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

Thanx madam atas pencerahanya, ijin terapkan di blog ya

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

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

This comment has been removed by the author. - Hapus

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

Terima Kasih.
Sangat2 membantu.

www.tipdantrik.com

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

Mksh, gan berfungsi dengan baik :)