Membuat Heading H1 Pada Gambar Header Blog

Cara menciptakan gambar header blog menjadi heading H1 pada beranda dan H2 pada postingan atau laman statis di blogger. Karena intinya logo blog dengan platform blogger tidak mempunyai heading tag, sehingga sangat jelek untuk SEO. Hanya judul blog yang menggunakan text saja yang mempunyai heading H1. Untuk kombinasi dengan tutorial Heading Tag H1 pada Gambar Header Blog ini, kau sanggup membaca >> Cara Optimasi SEO Heading Tag Blogger untuk menciptakan judul postingan H1 pada postingan dan menciptakan judul postingan H2 pada beranda.

Membuat Heading H1 pada Gambar Header Blog

Langkah 1. Pada dashboard blogger Tema >> Backup dulu tema blog kamu. Setelah itu Edit HTML.

Langkah 2. Klik kiri didalam kotak Edit HTML dan cari (ctrl+f)

<div id='header'>

Gantikan dengan instruksi berikut :

<div id='header' itemscope='itemscope' itemtype='http://schema.org/Organization'>

Seandainya instruksi <div id='header'> tidak ada, coba cari dengan instruksi berikut :

<header>

Dan gantikan dengan instruksi dibawah ini:

<header itemscope='itemscope' itemtype='http://schema.org/Organization'>

Jika memang keduanya tidak ditemukan. Carilah secara hati-hati instruksi header yang ibarat kedua instruksi diatas dan tambahkan itemscope='itemscope' itemtype='http://schema.org/Organization'>.

Langkah 3. Temukan instruksi gambar header blog yang hanya menampilkan gambar saja, cari yang sama atau mirip instruksi comment dibawah ini :

Show the image only

Tepat dibawah Show the image only kau akan menemukan instruksi serupa mirip dibawah ini dan gantikan yang hanya dalam tag <a href=..... </a>

<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

Gantikan instruksi diatas yang didalam tag <a> dengan instruksi dibawah ini yang sudah dioptimasi heading seo untuk gambar header blogger.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<h1 itemprop='name'><a expr:href='data:blog.homepageUrl' itemprop='url' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:title='data:blog.title' expr:width='data:width' itemprop='logo' style='display: block'/><span><data:blog.pageTitle/></span></a>
</h1>
<b:elseif cond='data:blog.pageType == &quot;archive&quot;'/>
<h1 itemprop='name'><a expr:href='data:blog.homepageUrl' itemprop='url' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:title='data:blog.title' expr:width='data:width' itemprop='logo' style='display: block'/><span><data:blog.pageTitle/></span></a>
</h1>
<b:else/>
<h2 itemprop='name'><a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:title='data:blog.title' expr:width='data:width' itemprop='logo' style='display: block'/><span><data:blog.title/></span></a></h2></b:if>

Dapat kau lihat instruksi yang diberi warna biru merupakan judul dari blog kau yang menggunakan gambar header. Sehingga sanggup kau modifikasi sesuai dengan keinginan. Untuk menciptakan judul artikel H1 pada postingan dan H2 pada beranda, sebab sebelumnya aku telah publish terlebih dahulu makanya tidak diikut serkatan disini.
Silahkan lihat >> Cara Optimasi SEO Heading Tag Blogger

Langkah 4. Secara default tema blogger, biasanya untuk css heading H1 dan H2 dibedakan font-size dan colornya. Untuk itu jangan lupa merubahnya pada ]]></b:skin>. Pada langkah 4 akan aku berikan contohnya.
Cari instruksi css berikut atau yang serupa tanda sanggup #(pagar) ataupun .(titik):

#header h1 {

Gantikan dengan :

#header h1, #header h2 {

Cari instruksi ini:

#header h1 a {

Gantikan dengan :

#header h1 a,#header h2 a {

Dan yang paling penting ialah menambahkan instruksi berikut diatas ]]></b:skin>

#header h1 a,#header h2 a, #header h1 a:visited, #header h2 a:visited{color:#fff; font-size:10px;text-decoration:none;margin:0;padding:0}
.header h1 span, #header h2 span{text-indent:-999em; display:block;}

Langkah 5. Simpan Tema.
Kamu sanggup cek apakah heading H1 muncul pada blog kau yang hanya menampilkan gambar header saja tanpa text dan deskripsi di situs seperti:

https://www.seocentro.com/tools/seo/seo-analyzer.html
http://www.seoreviewtools.com/html-headings-checker/

Sedikit panjang namun worth untuk dicoba sebab nilai SEO yang dicari dimana dikala gambar header display:block text judul blog dan deskripsi tapi masih sanggup menggunakan heading H1 pada beranda dan H2 pada postingan dan laman statis. Selamat mencoba dan apabila ada kesulitan silahkan tanyakan pada kolom komentar dibawah.

Share this post