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 kode berikut :
<div id='header' itemscope='itemscope' itemtype='http://schema.org/Organization'>Seandainya kode <div id='header'> tidak ada, coba cari dengan kode berikut :
<header>Dan gantikan dengan kode dibawah ini:
<header itemscope='itemscope' itemtype='http://schema.org/Organization'>Jika memang keduanya tidak ditemukan. Carilah secara hati-hati kode header yang menyerupai kedua kode diatas dan tambahkan itemscope='itemscope' itemtype='http://schema.org/Organization'>.
Langkah 3. Temukan kode gambar header blog yang hanya menampilkan gambar saja, cari yang sama atau seperti kode comment dibawah ini :
Show the image onlyTepat dibawah Show the image only kamu akan menemukan kode serupa seperti dibawah ini dan gantikan yang hanya dalam tag <a href=..... </a>
<!--Show the image only-->Gantikan kode diatas yang didalam tag <a> dengan kode dibawah ini yang sudah dioptimasi heading seo untuk gambar header blogger.
<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 + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<b:if cond='data:blog.pageType == "index"'>Dapat kamu lihat kode yang diberi warna biru merupakan judul dari blog kamu yang memakai gambar header. Sehingga dapat kamu modifikasi sesuai dengan keinginan. Untuk membuat judul artikel H1 pada postingan dan H2 pada beranda, karena sebelumnya saya telah publish terlebih dahulu makanya tidak diikut serkatan disini.
<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 + "_headerimg"' 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 == "archive"'/>
<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 + "_headerimg"' 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 + "_headerimg"' 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>
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 saya berikan contohnya.
Cari kode css berikut atau yang serupa tanda bisa #(pagar) ataupun .(titik):
#header h1 {Gantikan dengan :
#header h1, #header h2 {Cari kode ini:
#header h1 a {Gantikan dengan :
#header h1 a,#header h2 a {Dan yang paling penting adalah menambahkan kode 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 bisa cek apakah heading H1 muncul pada blog kamu yang hanya menampilkan gambar header saja tanpa text dan deskripsi di situs seperti:
https://www.seocentro.com/tools/seo/seo-analyzer.htmlSedikit panjang namun worth untuk dicoba karena nilai SEO yang dicari dimana ketika gambar header display:block text judul blog dan deskripsi tapi masih dapat menggunakan heading H1 pada beranda dan H2 pada postingan dan laman statis. Selamat mencoba dan apabila ada kesulitan silahkan tanyakan pada kolom komentar dibawah.
http://www.seoreviewtools.com/html-headings-checker/
Gambar icon obeng dan kunci merupakan fitur quick edit gadget blogger yang muncul ketika kita sedang dalam keadaan login dengan akun google. Sehingga memudahkan kita untuk mengedit widget blogger dengan cepat tanpa harus menuju dashboard blogger --> layout.
