SKIP TO MAIN CONTENT
tina-andrew.blogpot.com blog uses cookies to help google service, personalise ads, and more. By visiting us you agree with our privacy policy. For more information: Cookies Policy | Privacy Policy

Tips Ngeblog Blogger Blogspot

Cara mengatur H1 dan H2

Tag Heading yang selalu menjadi fokus pencarian awal dari googlebot atau spider google adalah H1 dan H2. Penting! Pengunaan Tag heading yang tidak berdasarkan tata urutannya sebagai sistematika penulisan sebuah artikel dan terlalu banyak dalam 1 artikel akan mengakibatkan efek buruk bagi blog kita dari perhatian mesin pencari. Mesin pencari khususnya Google akan menvonis bahwa blog kita adalah spam atau spammy. Dengan demikian, kita tidak akan mendapatkan apa-apa kecuali kondisi blog kita dalam keadaan buruk.



Secara default, H1 dan H2 ditulis dengan tag:
<h1>........</h1>
<h2>........</h2>
Bila kedua tag ini digunakan dalam konten, maka akan menghasilkan space (baca:ruang) yang cukup lebar.
Perhatikan ilustrasi dibawah ini! 

Paragraph yang kita edit yang didalamnya mengandung tag heading <h1> misalnya sebagai berikut:


"Adanya kendala yang bersumber dari kerusakan hardware komputer, ketidakstabilan sistem operasi yang disebabkan oleh kesalahan operator (human error), serangan virus dan trojan serta munculnya spyware yang mencuri data via internet menjadi hambatan tersendiri yang tidak dapat diabaikan, oleh karena semakin urgensitas dan pentingnya data yang ditangani, semakin penting pula kebutuhan data guard, keamanan data, stabilitas software dan program serta stabilitas kerja hardware komputer yang sedang dioperasikan. Adanya koneksitas dengan dunia internet, kompleksitas masalah menjadi lebih bervariasi dan beresiko tinggi."

Urutannya sebagai berikut:

Gbr.Pemasang tag H1 pada "keamanan data".
Heading Tag, H1, H2 | Tina-andrew.blogspot.com
Hasilnya sebagai berikut:
Heading Tag, H1, H2 | Tina-andrew.blogspot.com
Agar tag heading nampak seperti tulisan yang sama dengan kata-kata dalam paragraph lainnya, maka kita perlu mengaturnya dalam sebuah file CSS dengan atribut paragraph atau tag paragraph yakni dengan cara membuat atributnya (didalam blok kode file CSS) yang khusus dipasang di tag paragraph <p></p>.

Contoh:
p {
font-size:12px;
font-family:'tahoma'; !important
font-weight:normal;
}
p, h1 {
font-size:12px;
font-family:'tahoma'; !important
font-weight:normal;
display:inline;
}


SOLUSI:
Gunakan tag heading sesuai tempatnya, misalnya: untuk judul, diskripsi dan sub heading lainnya sehingga terlihat lebih sistematis dan sesuai tata urutannya.

Contoh: 
Title ---> <h1>My Blog my SEO</h1>
Description ---> <h2>Blog Tutorial SEO efektif dan benar</h2>
Sub-Heading 1 ----> <h3>Masalah</h3>
Sub-Heading 2 ----> <h4>Solusi</h3>

Sehingga menjadi:

My Blog my SEO

Blog Tutorial SEO efektif dan benar

1. Masalah SEO

1.1. Solusi SEO


Untuk mengatur jarak (space) antara heading-1 dan heading-2, gunakan atribut Margin dan Padding baik dengan properti Top maupun Bottom, seperti ilustrasi berikut ini.

/*--- pada heading-1 ---*/
h1 {
margin-top:10px;
padding-top:0px;
}
/*--- pada heading-2 ---*/
h2 {
margin-top:-10px;
padding-top:2px;
}


Dengan demikian jarak/space antara heading-1 yang biasanya digunakan untuk Judul web/blog agak lebih berdekatan dengan heading-2 yang biasanya digunakan untuk deskripsinya. Selain itu bisa juga dengan menggunakan line-height dan mengatur besar font.

Untuk mengantisipasi terjadinya perubahan pada saat ditampilkan di browser yang berbeda seperti browser Mozilla dan IE (baca: Internet Explorer) dan juga Google Chrome, maka dapat menambahkan nilai/value "!important".


Herman Bin Nasarudin in Google+
Google+ Profile
Google+ Page

Newer Post Lihat Tips & Tutorial Sebelumnya
Back to Homepage

Popular Posts