H Tagları Nelerdir? Ne İşe Yararlar?

H tagları ingilizcesi headings olan başlıklar kelimesinden gelmektedir. Kodlamalar da kolaylık oluşturması açısından h harfi ile kullanılırlar.Bu tagların görevleri metinlerin büyüklüklerini ayarlama da kullanılır, genellikle ise sitelerde ki başlıklar h tagları kullanılarak hazırlanırlar.Örneğin yukarıda ki yazının başlığının boyutu bir h tagı ile ayarlanmıştır. Toplamda h1,h2,h3,h4,h5,h6 olmak üzere 6 adet h tagı bulunmaktadır ve boyutları h1 tagından h6 tagına doğru küçülmektedir.

Google açısından son derece önemli olan h tagları sitede özenle kullanılmalıdır.Bu taglar belirli bir hiyerarşiye göre site içinde kullanılmalıdır , örneğimize bakarak konuyu daha iyi anlayalım ;

<h1> SEO Ustası </h1>
<h2> SEO Dersleri </h2>
<h3> WordPress Dersleri </h3>
<h4> WordPress SEO </h4>
<h5> Site İçi SEO</h5>
<h6> Backlink Çeşitleri</h6>

Yukarıda ki kullanım tarzı SEO ile tamamen uyumludur ve size hiçbir sorun çıkartmaz ancak aşağıdaki gibi bir kullanım yaparsanız , SEO açısından size çok zararı dokunur ;

<h1> SEO Bilgisi </h1>
<h5> Site İçi SEO</h5>
<h4> WordPress SEO </h4>
<h3> WordPress Dersleri </h3>
<h6> Backlink Çeşitleri</h6>
<h2> SEO Dersleri </h2>

Yukarıda ki kullanım şekli ise çok yanlıştır.Google sitelerde ki h taglarının düzenine dikkat eder ve puanını verir.H taglarının doğru veya yanlış kullanılması Google gözünde ki değerinizi de oldukça etkileyecektir.Kısaca bu tagların düzgün kullanılması sitenize + puan kazandırır.

Şimdi gelelim bu tagların boyutları nasıl belirleniyor.Arkadaşlar bu tagların boyutları , yazım şekilleri , yazı tipleri vs. bütün özellikleri CSS dosyanızda ki kodlar ile belirlenmektedir , örneğin örnek bir tasarımda ki h taglarının kodlarının bulunduğu kısmı inceleyelim ;

}

 

.entry h1,

.entry h2,

.entry h3,

.entry h4,

.entry h5,

.entry h6 {

margin: 0 0 20px 0;

}

 

h1,

h2,

h3,

h4,

h5,

h6 {

font-weight: normal;

padding: 0;

}

 

h1 {

font-size: 24px;

line-height: 28px;

}

 

h2 {

font-size: 20px;

line-height: 22px;

margin: 0 0 20px 0;

}

 

h3 {

font-size: 16px;

line-height: 20px;

}

 

h4 {

font-size: 14px;

line-height: 18px;

margin-bottom: 15px;

}

 

h5 {

font-size: 12px;

line-height: 18px;

}

 

h6 {

font-size: 10px;

line-height: 16px;

}

Yukarıda ki örnekte gördüğümüz gibi CSS kodları yardımıyla h taglarının özelliklerini belirliyoruz.