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 aba-aba berikut :

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

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

<header>

Dan gantikan dengan aba-aba dibawah ini:

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

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

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

Show the image only

Tepat dibawah Show the image only kau akan menemukan aba-aba 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 aba-aba diatas yang didalam tag <a> dengan aba-aba 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 aba-aba 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 aba-aba css berikut atau yang serupa tanda sanggup #(pagar) ataupun .(titik):

#header h1 {

Gantikan dengan :

#header h1, #header h2 {

Cari aba-aba ini:

#header h1 a {

Gantikan dengan :

#header h1 a,#header h2 a {

Dan yang paling penting yaitu menambahkan aba-aba 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.