html-2-head-ve-meta-etiketleri

HTML Dersleri #2 Head ve META Etiketleri

html-2-head-ve-meta-etiketleri

DERS 2 : HTML HEAD ve META

Tekrar merhaba, Bir önceki dersimizde temel HTML etiket yapısından bahsetmiştik. Bu dersimizde Head kısmına yazılan etiketlerden ve meta etiketlerinden kapsamlı olarak bahsedeceğiz. Head kısmı genelde tarayıcı ve arama motorlarına bilgi verme amaçlı kullanılır. Bu kısımda temel meta etiketleri başlığı belirttiğimiz <title></title> etiketinden hemen sonra gelir. Daha sonra içeri çekilecek CSS ve JS dosyalarının belirtildiği etiketler gelir. Şimdi kısa bir tekrar yapıp örnekleme ile anlatım yapacağım.

Kod Bloku

[code language=”html”]
<head> <!– head etiketimizi açtık. (Ayrıca başına küçüktür işareti-ünlem ve iki eksi koyup iki eksi ve büyüktür işareti ile kapattığımız kısımlar açıklama kısımlarıdır. Nerede ne yaptığınızı belirtirseniz bu kısımlar çok işinize yarayacaktır ve bu kısım ekrana yansımaz. Sadece kaynak kodu görüntülerken ekrana yansır. Kısaca bunuda belirteyim.*) –>

<title>hiercelik.net | Benim Sitem</title> <!– title etiketi daha öncede belirttiğimiz gibi tarayıcının sekme çubuğunda gözükecek olan başlıktır ve arama motorları sitenizi başlıkla kaydeder. Maksimum 70 karakter olmalıdır–>

<!– Sırada META etiketleri var –>

<meta charset="utf-8"> <!– Sık sık karşılaştığımız Türkçe karakter sorunlarını karakter setini utf-8 olarak belirtirsek çözmüş oluruz –>

<meta name="description" content="Site hakkında açıklama"> <!– Meta etiketleri sitenizi arama motorlarına açıklayan etikettir. 155 karakter sınır kuralına uyarak kullanılması arama motorlarında listelenmesi için çok önemli bir etkendir.–>

<meta name="keywords" content="birkaç,etiket,ekledim"> <!– Bu kısımda siteniz için anahtar kelimeleri ekliyorsun fakat artık dikkate alınmadığı için Google amcanın tavsiyesine uyarak bu etiketi kullanmamanızı öneriyorum –>

<meta name="refresh" content="3;URL=https://hiercelik.net"> <!– Bu etiket bulunduğunuz sayfayı yeniden yüklemesi için ya da belirtilen süreden sonra girilen adrese göndermesi için kullanılır. Örneğin. content="4" yazarsam bulunduğum sayfayı 4 saniye sonra yeniden yükler, content"4,URL=https://hiercelik.net" yazarsam 4 saniye sonunda belirttiğim adrese gider. İlerleyen zamanlarsa PHP yazılım derslerinde gerektiği yerde bunu sıkça kullanacağız. –>

<meta name="robots" content="index,follow"> <!– Bu meta etiketi arama motoruna siteyi kaydetmesi(index) ve botlarla takip etmesi(follow) gerektiğini ya da kaydetmemesi(noindex) ve botlarla takip etmemesi(nofollow) gerektiğini belirtir.Kullanmanız şart değildir. Hatta ne olduğunu bilseniz yeterli. Kullanmayın. : ) –>

<meta name="generator" content="WordPress 4.6.0"> <!– Bu etiketide bilseniz yeterli. Genel analizlerde kullanılan araçların oranını hesaplayabilmek için kullanılır genelde. –>

<link rel=’shortlink’ href=’http://wp.me/77w5X’ /> <!– Sitenizin kısaltılmış linkini belirtir. Burada öneğin hiercelik.net için hier.click şeklinde bir urlyi belirtebilirim. Sitenizin kayıtlara alınması esnasında Google şemaları iki siteyi otomatik olarak eşleyecektir. Kullanılması şart değildir.–>
</head>
[/code]

Bir de Responsive var şimdi…

[code language=”html”]
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, user-scalable=no">
<!– Responsive yani çoklu ekran uyumlu websitelerinde kullanılan bu etiket sitenin genişliğini yüksekliğini ve yakınlaştırılmasını belirtir. Parametreleri; width=device-width kısmında genişliği aygıtın ekran genişliği şeklinde belirtiriz ya da width= kısmından sonra piksel cinsinden genişliği belirtiriz. height=device-height kısmında yüksekliği aygıtın ekran yüksekliği şeklinde belirtiriz ya da height= kısmından sonra piksel cinsinden yüksekliği belirtiriz. Bunu kullanmanız tavsiye edilmez. Yükseklik her zaman değişkendir. initial-scale=1.0 kısmı sitenin ilk açılışta ne kadar yakınlaştıracağını belirtir. user-scalable=no kısmı sitenin dokunmatik cihazlarda elle büyütülmesine izin verilmeyeceğini(no) ya da izin verileceğini gösterir(yes). Varsayılan değer yes şeklindedir. Sadece ölçekleme istemiyorsanız kullanmanız gerekir. minimum-scale en az kaç ölçek yakınlaştırma yapılacağını belirtir. maximum-scale en fazla kaç ölçek yakınlaştırma yapılacağını belirtir. mobil uyumlu tasarımlarda bu etikette kullanılır. –>[/code]

Sosyal Medya Meta Etiketleri

Birde <meta=”og: şeklinde ya da <meta=”twitter: şeklinde başlayan meta etiketler vardır. Kısaca og ile başlayanlar Facebook Open Graph’ın meta etiketleridir ve sitenize facebook’ta bağlantı verildiğinde bu etiketler kullanılır.Twitter ise twitter ile başlayan meta etiketleri aracılığıyla sitenizi twitter ortamında doğru bir şekilde görüntüler. Bu kısım biraz daha SEO yani arama motoru optimizasyonu konusu olduğu için detaylı anlatmadım. İleride Sosyal medya meta etiketleri içinde bir ders hazırlayacağım zaman buraya etiketini ekleyeceğim.

Head kısmında CSS ve JS dosyalarını içeriye aktarmak için kullanılan etikettende sonraki derslerde bahsedeceğim.

Ders esnasında oluşturduğumuz index dosyasını buradan indirebilirsiniz.

Şimdilik Head içeriği ve meta etiketleri bu kadar. Sonraki derslerde görüşmek üzere.

Önceki Ders  –  Sonraki Ders

İlginizi çekebilir...