Menyusun Tag Heading H1 H2 H3 Blogspot Terlengkap dan Jelas


Belajar Berbagi- Selamat datang di blog ini. saya tidak akan memposting tulisan bagaimana cara menyusun H1 H2 H3 sebelum saya uji coba terlebih dahulu. dan hasilnya untuk blog ini, berhasil dengan baik, tapi belum tentu juga sempurna. lalu bagaimana dengan blog anda? memang sudah banyak tentang tutorial seperti yang saya maksud tersebut, akan tetapi mungkin saja anda merasa kurang puas karena tidak lengkap dan jelas atau diambil inti-intinya saja, untuk dari itu blog belajar berbagi mencoba memberikan tutorial merubah h1 h2 h3 dengan lengkap dan jelas agar anda merasa puas. berikut gambaran defaul blog belajar berbagi sebelum disulap.

Menyusun H1 H2 H3 Blogspot Terlengkap dan Jelas
Keterangan:
Secara defaul blogger menyediakan H1 sebagai judul blog anda, H2 sebagai judul widget anda, dan H3 sebagai postingan anda. menurut pakar seo, hal tersebut masih kurang menggigit di kancah search engine sekaliber google. tapi perlu anda ingat, jangan langsung mempercayai hal tersebut dan menerapkannya di blog anda, sebelum anda yakin ingin menyulap susunan tersebut menjadi H1 judul blog, H1 judul postingan, H2 isi postingan, H3 widget.

Susunan defaul H1 H2 H3 Bawaan Blogger
H1 judul blog anda pada halaman Home;
H1 judul blog anda lagi yang muncul ketika anda mengklik salah satu judul postingan;
H2 widget; dan
H3 judul postingan dan isi postingan anda.

Susunan H1 H2 H3 setelah dirubah atau disulap
H1 judul blog ketika anda mengklik halaman Home;
H1 ketika mengklik judul postingan;
H2 isi dari postingan/judul postingan; dan
H3 widget blog anda

Salah satu untuk membuktikannya, silahkan terbang ke halaman Home blog anda, lalu test pada halaman Home blog anda tersebut "klik kanan, lihat kode sumber laman "untuk mozilla", atau di broser google chrome inspect element" lalu cari dengan menekan  tombol f3/ctrl+f dan ketikan <h1 atau </h1> dan lihat yang muncul adalah nama blog/judul blog anda. dan untuk membuktikan kembali apakah judul blog anda akan tetap H1 jika anda mengklik salah satu postingan? silahkan buktikan kembali dengan cara diatas tersebut.

Menyusun Tag H1H2H3 di Blogger
Ilustrasi Gambar
Sudah cukup jelas? sebenarnya masih ada cara lain untuk mengetahui apakah blog kita sudah seperti hal diatas. akan tetapi disini saya berikan cara termudahnya untuk memonitor sebuah blog, apakah penempatan H1 H2 H3 sudah mengikuti standar dari pakar seo.

Apakah template bawaan blogger salah?
Tidak ada yang salah dalam hal ini, karena itulah defauld blogger. setidaknya kita harus belajar berbagi pengetahuan dan mengembangkan ilmu kita untuk menggunakan nalar dan logika bagaimana blog tersebut sudah baik, tapi dibuat semakin baik lagi di pertarungan kancar search engine google. apakah anda sudah cukup mengerti? jika sudah, mari kita terbang ke paragraf berikutnya.
Sebelum melakukan pengeditan, biasakan anda download template anda terlebih dahulu.
Untuk melakukan pencarian kode, sebaiknya gunakan ctrl+f di kota html tersebut
Pertama cari kode <b:if cond='data:post.title'> sampai dengan </b:if> "HAPUS"
Login ke blog >> template >> HTML >> cari kode <b:if cond='data:post.title'>. kurang lebih contohnya seperti berikut ini:
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Jika anda sudah menemukan kode tersebut, silahkan ganti dengan kode dibawah ini
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
Kedua cari kembali kode seperti dibawah ini
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
Jika sudah bertemu dengan kode tersebut, hapus dan ganti dengan kode berikut
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
Ketiga cari kembali kode
<h1 class='title'>
<b:include name='title'/>
</h1>
Silahkan anda ganti dengan kode dibawah ini
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h1 class='title'>
<b:include name='title'>
</b:include></h1>
<b:else>
<div class='title' style='font-size: 26px; font-weight: bold; letter-spacing: -1px; line-height: normal; margin: 5px 5px 0pt; padding: 15px 20px 3px 0pt;'>
<b:include name='title'>
</b:include></div>
</b:else></b:if>
Cara diatas sebenarnya sudah selesai, akan tetapi banyak sekali keluhan dari blogger pemula seperti saya. seperti, tampilan widget berubah dan posting berubah. nah untuk dari itu bagaimana kita mencari kode CSS tersebut dan menyulapnya agar rapih kembali.

Selanjutnya pengaturan CSS pada template blogger
Cari kode seperti dibawah ini pada css template anda
.post h3 {
color:#ff6600;
font-size:14px;
font-weight:normal;
text-align:left;
line-height:1.4em;
padding:0 0 20px;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
color:#ff6600;
display:block;
font-weight:bold;
text-decoration:none;
}
.post h3 strong, .post h3 a:hover {
color:#000000;
}
Jika sudah ketemu kode seperti diatas atau sama persis dengan kode tersebut. maka ganti dengan kode dibawah ini
.post h1, .post h2 {
color:$titlecolor;
font-size: 17px;
font-weight: normal;
line-height: 1.4em;
margin: 0.25em 0 0;
padding: 0 0 25px;
}
.post h1 a, .post h1 a:visited, .post h1 strong, .post h2 a, .post h2 a:visited, .post h2 strong {
color:#ff6600;
display: block;
font-weight: bold;
text-decoration: none;
}
.post h1 strong, .post h1 a:hover,.post h2 strong, .post h2 a:hover {
color:#000000;
}
Selesai sudah anda merubah susunan h1 h2 h3 pada template blogspot milik anda. dan keluhan-keluhan yag masih saja sering ditemui adalah sebagai berikut:

Pada Umumnya ukuranlah yang sering menjadi masalah
Semua tidak lepas dari css. akan tetapi perlu anda ingat jangan anda rubah apapun kecuali penyesuaian di .post tersebut dan sekitarnya (dari dibawah kode body { sampai dengan kode diatas ]]></b:skin>) silahkan anda atur dan sesuainya. tetapi ingat setelah satu saja yang anda atur, maka save template dan selalu lihat perubahan-perubahannya. memang disini perlu teliti dan menggunakan logika.

Bagaimana menurut anda, apakah blog anda sudah anda sulap seperti blog belajar berbagi? berikan pendapat anda dengan baik. terima kasih





Anda Berada di Label Seo Konyol


6 comments:

  1. Keren artikelnya dan di mengerti tentang penyusunan h1 hingga h3 untuk blog seo , salam adm CS

    ReplyDelete
  2. Erica Belinda @ ya mas, smeoga bermanfaat konten diatas

    ReplyDelete
  3. Afifudin @ silahkan dilihat caranya untuk mengetahui apakah sudah berfungsi atau tidaknya dibawah tulisan Susunan H1 H2 H3 setelah dirubah atau disulap semoga membantu, karena tutorial diatas sudah lengkap dan jelas

    ReplyDelete
  4. Aduh, cukup pusing juga menyusun H1 H2 dan H3 di blogspot ini ya.kalau saya mending biar aja seperti apa adanya. karena tujuan blogging hanya iseng hehe

    ReplyDelete
    Replies
    1. Tidak masalah mas Suhardi karena defauld bawaan dari blogger juga baik. tapi alangkah baiknya agar lebih optimal, sebaiknya sedikit di kulik saja templatenya dengan cara menyusun H1 H2 H3 diatas tersebut.

      yang jelas, jangan pernah melupakan untuk daftar di webmaster tools dan rajin update artikel itu juga lebih baik.

      Delete
  5. Setelah di cek,,, blog ane struktur H nya masih brantakan,, Thank Gan

    ReplyDelete

Silahkan berikan komentar anda sesuai dengan konten yang saya bahas diatas. komentar yang tidak relevan, spam, maka tidak akan saya publikasikan di blog belajar berbagi ini.

Belajar Berbagi Home