Cara Memperbaiki Missing Tag Heading H1
Dan umumnya sebuah situs selalu menampilkan gambar logo sebagai wadah (elemen) header yang pastinya akan menggantikan tag H1 sehingga fungsi kedudukannya menjadi hilang (missing), padahal mesin penelusuran google mengenali tag tersebut sebagai nama situs dalam bentuk teks (tulisan) atau sebagai judul untuk ditampilkan. Ini akan menimbulkan masalah berikut jika tag yang telah diatur hanya menampilkan gambar (logo) sebagai headlinenya.
Sebelum kita memperbaiki masalah tersebut, alangkah baiknya saya bahas sedikit tentang fungsi tag H1 pada halaman yang perlu Anda pahami kedudukannya sebagai headline.
Prioritas Heading
Ada 6 elemen yang mendasari terbentuknya tag heading yaitu secara berurutan dari H1 hingga H6. Urutan tersebut juga menandakan prioritas (keutamaan) pada mesin penelusuran oleh google bot dalam menentukan tajuk (pokok) judul atau nama yang akan tampil pada hasil pencarian. H1 memiliki prioritas tertinggi dalam penelusuran kemudian disusul tag selanjutnya secara berurutan hingga H6.
Aturan penulisan juga haruslah berurutan pada saat membuat artikel postingan menggunakan sub judul berupa H2, H3, dan selanjutnya. Kurang baik untuk SEO jika melompat-lompat antara H3, H2, H2, dan sebagainya.
Aturan penulisan juga haruslah berurutan pada saat membuat artikel postingan menggunakan sub judul berupa H2, H3, dan selanjutnya. Kurang baik untuk SEO jika melompat-lompat antara H3, H2, H2, dan sebagainya.
Tag Heading H1 pada Halaman Home
Pada saat Anda membuka situs pada halaman utama beranda (home), maka kedudukan tag header menjadi H1 yang dikenali sebagai nama situs, kemudian disusul pada bagian setelahnya adalah tag H2, H3, H4, H5, dan H6. Dan hanya diperbolehkan menggunakan satu tag H1 pada sebuah halaman situs, mengapa demikian?
Karena nama situs Anda diprioritaskan kedudukannya sebagai H1 saat orang sedang menelusuri sebuah nama situs maka akan ditampilkan sebagai hasil penelusuran, sedangkan H2 hingga H6 akan dikenali sebagai judul-judul pada postingan, judul widget, nama label, ataupun tag lainnya yang berada pada urutan prioritas paling bawah.
Tag Heading H1 pada Halaman Post
Ketika berada pada halaman postingan maka fungsi H1 ini berubah kedudukannya sebagai judul postingan, sedangkan heading pada nama situs akan tergantikan sebagai H2 atau yang lainnya misal <p> sebagai keterangan seperti meta deskripsi.
Dan ada satu H1 sebagai judul pada halaman ini dikarenakan ketika orang sedang menelusuri judul sebuah situs, maka prioritas yang akan ditampilkan adalah judul postingan situs tersebut.
Memperbaiki Heading H1 yang Hilang
Untuk memperbaiki tag H1 yang hilang silahkan ikuti langkah berikut ini
1. Menghapus kemudian menambahkan Header
Khusus pengguna CMS Blogger bisa Anda hapus terlebih dahulu header yang terjadi missing tag H1 agar kembali seperti ke kondisi dafault (semula), kemudian tambahkan kembali melalui widget header.
2. Mengganti kode html
Setelah menambahkan kembali widget header, pada editor html silahkan cari Header1 atau bagian kode seperti berkut
<b:includable id="main">
.
.
.
</b:includable>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl'>
<img expr:alt='data:title' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:title='data:title' height='50' layout='responsive' width='280'/>
</a>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' itemprop='headline'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' itemprop='headline'>
<b:include name='title'/>
</p>
</b:if>
</div>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' itemprop='headline'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' itemprop='headline'>
<b:include name='title'/>
</p>
</b:if>
</div><b:include name='description'/>
</div>
</b:if>
</b:includable>
<amp-img expr:alt='data:title' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:title='data:title' height='50' layout='responsive' width='280' /></a>