Artikel ini saya buat sebagai lanjutan untuk melengkapi artikel sebelumnya. Sebenarnya saya sendiri masih minder kalau membahas masalah yang berkaitan dengan tips SEO (Search Engine Optimization). Akan tetapi karena hal ini sudah banyak dibahas di blog lain, jadi saya anggap ini adalah bagian penting dari SEO. Dan setahu saya, apa yang mereka sajikan masih bermasalah dengan kasus multi tag h1 pada halaman post, khususnya ketika menggunakan gambar sebagai judul blog, dimana masalah tersebut bisa sangat berakibat buruk pada SERP. Dari beberapa alasan tadi, saya mencoba untuk menyajikan artikel dengan topik yang serupa tapi dengan metode yang sedikit berbeda dan yang paling penting adalah tidak menimbulkan masalah multi tag h1.
Semua kode (HTML & css) dalam tutorial ini di adopsi dari template default Blogger. Akan sangat mudah di ikuti bila anda menggunakan template tersebut, baik versi asli maupun versi pengalihan, yaitu pengguna template default Blogger yang sudah mengikuti tutorial cara mengubah halaman utama dari post body menjadi post snippet. Sedangkan untuk pengguna template custom Blogger yang sedang mencari cara mengatasi multi tag h1, pada tahap nomor dua, bisa dijadikan bahan rujukan untuk mengatasi masalah anda.
Berikut ini cara modifikasi heading tag h1 agar menjadi dinamis dan
SEO friendly.1. Masuk ke Blogger >> pilih blog >> klik template, kemudian klik Edit HTML.
2. Cari kode seperti di bawah ini.
<b:widget id='Header1' locked='true' title='Percobaanku (Header)' type='Header' visible='true'> <b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == "BEHIND"'> <!--Show image as .... --> <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' 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> <!--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'> <h1 class='title'> <b:include name='title'/> </h1> </div> <b:include name='description'/> </div> </b:if> </b:includable> <b:includable id='description'>⋯</b:includable> <b:includable id='title'>⋯</b:includable> </b:widget>
Jika header menampilkan gambar sebagai latar judul (gambar dan tulisan), hapus kode yang ditandai dengan warna merah, kemudian ganti dengan kode HTML berikut ini.
<b:if cond='data:blog.pageType != "item"'> <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>
Jika header blog hanya menampilkan gambar. Agar gambar terdeteksi sebagai h1 tetapi tidak menyebabkan multi tag h1. hapus kode yang ditandai dengan warna oranye, kemudian ganti dengan kode. HTML berikut ini.
<b:if cond='data:blog.pageType != "item"'> <h1 class='title'> <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'/> </h1> <b:else/> <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>
Jika header hanya menampilkan judul (tulisan), hapus kode yang ditandai dengan warna biru, kemudian ganti dengan kode HTML berikut ini.
<b:if cond='data:blog.pageType != "item"'> <h1 class='title'> <b:include name='title'/> </h1> <b:else/> <p class='title'> <b:include name='title'/> </p> </b:if>
Jika template blog anda masih mengaktifkan tampilan seluler, hapus kode yang ditandai dengan warna hijau (paling atas), kemudian ganti dengan kode HTML berikut ini.
<b:if cond='data:blog.pageType != "item"'> <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>
Catatan :
Silahkan ubah sesuai kebutuhan, jika bingung ubah saja semua.
3. Mengubah judul artikel dari h3 menjadi h1 untuk halaman post dan laman. Silahkan cari kode sepeti di bawah ini.
<b:includable id='post' var='post'> ..... ..... ..... <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'> <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> <div class='post-header'> <div class='post-header-line-1'/> </div> <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. --> ..... ..... ..... </b:includable>
Hapus kode yang ditandai dengan warna merah, kemudian ganti dengan kode HTML di bawah ini.
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'> <h3 class='post-title entry-title' itemprop='name'> <a expr:href='data:post.link ? data:post.link : data:post.url'> <data:post.title/> </a> </h3> <b:else/> <h1 class='post-title entry-title' itemprop='name'> <data:post.title/> </h1> </b:if>
Tambahan khusus untuk pengguna template Blogger yang masih mengaktifkan tampilan seluler.
Cari kode sepeti di bawah ini di dalam
<b:includable id='mobile-post' var='post'>⋯</b:includable><h3 class='post-title entry-title' itemprop='name'>
Ubah menjadi seperti di bawah ini
<h1 class='post-title entry-title' itemprop='name'>
Ubah juga penutupnya
</h3> menjadi </h1>5. Pada tahap 2 judul blog pada halaman item (post dan laman), dialihkan ke tag <p>, dimana tag tersebut digunakan untuk komentar. Hal ini menyebabkan ukuran judul blog pada halaman tersebut menjadi kecil seperti tulisan pada komentar. Begitu juga judul pada artikel, karena menggunakan tag h1. Ukuran judul artikel berubah menjadi besar dan tebal layaknya judul blog. Jika ini dibiarkan tentunya akan terlihat sangat aneh.
Agar ukuran dan warna judul blog pada halaman post dan laman kembali normal'. Silahkan cari di dalam
<b:skin> kode css seperti di bawah ini atau yang serupa..Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
Ubah menjadi seperti di bawah ini
.Header p, .Header h1 { margin: 0; font: $(header.font); color: $(header.text.color); text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2); } .Header p a, Header h1 a { color: $(header.text.color); }
Agar ukuran judul artikel / post menjadi normal kembali. Silahkan cari kode css seperti di bawah ini atau yang serupa.
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
Ubah menjadi seperti di bawah ini
h1.post-title, h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
Khusus untuk pengguna template responsive.
Cari kode berikut di dalam
@media screen and(max-width:.....px), Jika anda mengikuti tutorial cara membuat template responsive di blog ini, letak nya ada pada 768px..Header h1 {font-size: 30px; text-align: center}
Ubah menjadi seperti di bawah ini.
.Header p, .Header h1 {font-size: 30px; text-align: center}
Agar gambar berada di tengah, serta memaksa gambar mengikuti lebar layar (responsive). Tambahkan kode berikut, letakkan saja di bawah kode di atas.
.Header img {max-width:100%;width:100%;margin:0 auto;padding:0;text-align:center}
Keterangan :
Kode yang ditandai dengan warna merah adalah kode baru yang harus ditambahkan. Perhatikan tanda titik dan koma (jangan sampai tertinggal).
6. Klik Format Template, kemudian Simpan Template.
Sekian tutorial cara membuat heading h1 dinamis. Semoga bermanfaat dan selamat mencoba.
6 comments:
Yang penting satu, yang ada di dalam <b:includable id='post' var='post'>...</b:includable> , kecuali agan masih mengaktifkan fitur tampilan versi seluler, keduanya harus diubah,
Mas kalo data halaman cuma di muat sebagian pada mobile tes kelahannya dimana ya kalo kaya gini https://www.blogger.com/comment-iframe.g?blogID=2725979242112246288&postID=7874408806560584566&blogspotRpcToken=194268 ?
Maksudnya sebagian itu saat minta render fecth as Google ya, kalau ya, itu wajar mas, setau saya semua yang di iframe tidak bisa dibaca perayap dan kotak komentar blogger salah satunya
Di bagian ini saya cuma nemu h2, h3 ngga ada mas
Kalau template nya masih standar harusnya ada gan,
this article really help me. thank u so much!
Post a Comment