Mengedit Tag Heading Pada Blog

Assalamu'alaikum wr wb pagi yang cerah ini kita akan membahas tentang Edit Tag Heading supaya Seo friendly seusatu banget kali ini untuk melengkapi posting saya kemaren yang berjudul Tips Blog Supaya Terindex di Search Engine ok mungkin dari pembahasan kita kali ada yang tidak tau kegunaan edit tag heading ok!!! kegunaan dari mengedit tag heading adalah Merubah Tag Heading Title menjadi H1, Supaya kata kunci yang paling sering dicari dalam kegiatan blogging, tentunya dengan tujuan untuk meningkatkan SEO dalam sebuah blog yang ingin bersaing di mesin pencari. Terus apa sih maanfaat tag heading itu? Seperti yang dikatakan sebelumnya bahwa heading tag akan membuat website kalian lebih tersruktur. Seperti halnya sebuah buku, heading tag h1 itu diibaratkan sebagai judul bukunya, lalu heading tag 2 adalah chapternya, lalu heading tag 3 adalah sub judulnya, dilanjutkan dengan h4 sampai h6. Karena setiap heading tag akan berbeda besar hurufnya maka ini merupakan suatu isyarat visual terhadap user dalam membaca konten yang kalian buat. Apa sih hubungannya Tag Heading dengan SEO Heading tag sangat erat kaitannya dengan kekuatan SEO on page karena berkaitan langsung dengan isi website kalian. Jika heading tag digunakan dengan benar maka nilai SEO on pagekalian di mata google akan lebih tinggi karena web kalian akan lebih terstruktur dengan baik dan dapat dimengerti dengan mudah. Bahkan Google memberikan penjelasan dalam ebooknya yang berjudul Search Engine Optimization Starter Pack mengenai Heading tag, silahkan kalian membacanya di Sini. Nah jika sekarang Anda ingin menggunakan teknik ini kedalam template Anda, tanpa panjang lebar berbicara kita mulai dengan langkah-langkah di bawah ini.

Langkah Pertama

• Silahkan Login ke Blogger dulu
• Selanjutnya Pada Dasboard Klik Template

• Selanjutnya, anda pilih Edit Html dan jangan lupa ceklist Expand Template Widget,
• Silahkan Anda cari kode yang mirip seperti di bawah ini, dengan bantuan CTRL + F

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

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

• Selanjutnya cari kode yang mirip seperti di bawah ini, 

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

<b:include name='title'/>

</h1> 

• Ganti kode di atas dengan kode di bawah 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> 

• Selanjutnya, cari lagi kode seperti di bawah ini, 

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

</h1> 

• Ganti kode di atas 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' style='font-size:30px; font-weight:bold;letter-spacing:-1px;line-height:normal;margin:5px 5px 0;padding:15px 20px 3px 0;'><b:include name='title'/></p></b:if>

Note : Agar tampilannya sesuai dengan template Anda, mari kita mulai dengan mengedit Css pada template Anda. 

• Silahkan Anda cari kode Css di bawah ini,  

.post h3 {..............................................}.post h3 a, #content h1 a:visited {..............................................}.post h3 a:hover {.......................}

• Ganti kode Css di atas dengan kode css di bawah ini, 

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

• Selanjutnya, cari kode css di bawah ini, 

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

• Ganti kode tersebut dengan kode di bawah 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;}  

• Berikutnya, merubah tampilan Title Heading pada judul widget Anda dengan H3,  

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

Note : Yang berwarna merah Anda ganti dengan h3, 

• Atau dengan melihat contohnya di bawah ini,

<!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h3 class='title'><data:title/></h3>  <-- Title Heading Widget yang sudah dirubah menjadih3.</b:if>

Ok sekian dulu Posting tentang Edit Tag Heading Selamat Mencoba ^_^

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari O_Om.com di inbox anda: