Artikel ini aku buat sebagai lanjutan untuk melengkapi artikel sebelumnya. Sebenarnya aku sendiri masih minder kalau membahas dilema yang berkaitan dengan tips SEO (Search Engine Optimization). Akan tetapi alasannya yaitu hal ini sudah banyak dibahas di blog lain, jadi aku anggap ini yaitu potongan penting dari SEO. Dan setahu saya, apa yang mereka sajikan masih bermasalah dengan kasus multi tag h1 pada halaman post, khususnya dikala memakai gambar sebagai judul blog, dimana dilema tersebut sanggup sangat berakibat jelek pada SERP. Dari beberapa alasan tadi, aku mencoba untuk menyajikan artikel dengan topik yang serupa tapi dengan metode yang sedikit berbeda dan yang paling penting yaitu tidak mengakibatkan dilema multi tag h1.
Semua isyarat (HTML & css) dalam tutorial ini di adopsi dari template default Blogger. Akan sangat gampang di ikuti bila anda memakai template tersebut, baik versi orisinil 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, sanggup dijadikan materi referensi untuk mengatasi dilema anda.
Berikut ini cara modifikasi heading tag h1 semoga menjadi dinamis dan
SEO friendly.1. Masuk ke Blogger >> pilih blog >> klik template, kemudian klik Edit HTML.
2. Cari isyarat menyerupai 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 isyarat yang ditandai dengan warna merah, kemudian ganti dengan isyarat 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 mengakibatkan multi tag h1. hapus isyarat 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 isyarat yang ditandai dengan warna biru, kemudian ganti dengan isyarat 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 isyarat yang ditandai dengan warna hijau (paling atas), kemudian ganti dengan isyarat 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, kalau galau ubah saja semua.
3. Mengubah judul artikel dari h3 menjadi h1 untuk halaman post dan laman. Silahkan cari isyarat 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 isyarat yang ditandai dengan warna merah, kemudian ganti dengan isyarat 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 isyarat 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 menyerupai 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 dipakai untuk komentar. Hal ini mengakibatkan ukuran judul blog pada halaman tersebut menjadi kecil menyerupai goresan pena pada komentar. Begitu juga judul pada artikel, alasannya yaitu memakai tag h1. Ukuran judul artikel berkembang 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> isyarat css menyerupai 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 menyerupai 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 isyarat css menyerupai di bawah ini atau yang serupa.
h3.post-title, .comments h4 { font: $(post.title.font); margin: .75em 0 0; } Ubah menjadi menyerupai 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 isyarat berikut di dalam
@media screen and(max-width:.....px), Jika anda mengikuti tutorial cara menciptakan template responsive di blog ini, letak nya ada pada 768px..Header h1 {font-size: 30px; text-align: center} Ubah menjadi menyerupai 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 isyarat berikut, letakkan saja di bawah isyarat di atas.
.Header img {max-width:100%;width:100%;margin:0 auto;padding:0;text-align:center} Keterangan :
Kode yang ditandai dengan warna merah yaitu isyarat gres yang harus ditambahkan. Perhatikan tanda titik dan koma (jangan hingga tertinggal).
6. Klik Format Template, kemudian Simpan Template.
Sekian tutorial cara menciptakan heading h1 dinamis. Semoga bermanfaat dan selamat mencoba.
