HTML Head Etiketi Nedir?

HTML Head Etiketi : Head etiki Web sitesinde hiç bir şekilde görünmeyen, içerisinde bulundurduğu kodların Web sitesinin ne iş yaptığını, sosyal medya paylaşım ayarları, sitenizin içerik ile ilgili kısa bilgiler, sayfaya ait anahtar kelimeler ve bunun gibi bir çok bilgiyi yazılımsal olarak arka planda tutmaya yarayan etikettir.

Head Etiketinin içindeki bilgiler Web sitenizin sosyal medya adresleri için büyük bir önem taşımaktadır aynı zamanda arama motoru optimizasyonları (SEO) için de oldukça büyük bir öneme sahip olmasıyla bilinmektedir. Bu head etiketinin içerisine yazılması gereken bazı gerekli etiketler vardır bunları sizinle de aşağıda paylaşıyorum.

Örnek:

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="tr" />
	<base href="" />
	<title></title>
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="robots" content="index, follow" />
	<link rel="shortcut icon" href="">
</head>

Head Etiketinin kullanım amaçlarını aşağıda sizlerle paylaşıyor olacağım.

  • http-equiv=”Content-Type” : Web sitenizin dil kodunu belirlemede kullanılır.
  • http-equiv=”Content-Language” : Web sitesinin bini belirler.
  • base : Temel url‘in yazılması gerekmektedir. Örn.(https://webcesi.com)
  • title : Web sitesinin sayfa ismini belirler.
  • description : Web sitesinin açıklamasının yapıldığı yer.
  • keywords : Web sitesinin ilişkili olduğu anahtar kelimelerin yazılması gerekmektedir.
  • http-equiv=”X-UA-Compatible” : Web sitesinin hangi tarayıcılarla uyumlu olduğunu gösterir.
  • name=”viewport” : Mobil cihazlarla uyumluluğunu göstermektedir.
  • name=”robots” : Arama motorlarında listelenmenin iznidir.
  • rel=”shortcut icon” : Web sitesinin küçük ikonudur.

Not: Meta etiketlerinin keywords, description ve title parametrelerinin Arama motorlarının belirlediği en son standartlara göre belirlemenizi önermekteyiz. Böylelikle en son değerlere göre yaptığınız zaman Arama motorlarında üst sıralara yükselme şansınız bir adım daha artacaktır.

Head Sosyal Medya Paylaşımları Kodları

Bildiğiniz gibi herkesin zaman geçirdiği bir takım Web siteleri var ve bunların başında facebook, twiiter gibi Web siteleri gelmektedir. Web sitenizin sosyal medya da veya başka bir Web sayfasında paylaşımı yapıldığı zaman Web sitenizden rastgele bir fotoğraf almasını istemiyorsanız aşağıdaki kodları Head etiketi içerisine yazıp doldurmanız gerekmektedir. Aşağıda size sosyal medya paylaşımları için Head etiketleri paylaşıyorum.

Örnek:

    <meta property="og:title" content=""/>
    <meta property="og:url" content="" />
    <meta property="og:image" content="" />
    <meta property="og:site_name" content="" />
    <meta property="og:type" content="website" /> 
    <meta property="fb:admins" content="" />
    <meta property="og:description" content=""/>
  • og:title : Sayfa Başlığı.
  • og:url : Sayfa Url’i.
  • og:image : Temsili fotoğraf (kare olmasını öneririm).
  • og:site_name : Web Sitesinin İsmi.
  • og:type : Web Sitenin Tipi.
  • fb:admins : Facebook admin kodu.
  • og:description : Web sitesinin Açıklaması.

Head Stil Etiketleri

Head etiketinin içerisinde kullanılacak bir çok koddan biri de stil etiketidir. Bu etiketin kullanımı sizin için Web sitenizde stil oluşturmak için kullanılmaktadır. Stil kullanımı Web sayfanızın görünümünü etkileyen .css uzantılı dosyaları kapsamaktadır. Böylelikle bunları kullanmanız sizin için avantaj olacaktır.

Örnek:

<link rel="stylesheet" href="style.css" type="text/css">

Head icon Etiketleri

Head Icon Etiketi Web sitenizin paylaşım yapıldığında görünecek bölümüdür. Bu paylaşım yapıldığında görünecek bölüm istenilen boyutta belirttiğimiz Web sitesi için kullanıma hazır olacaktır. Aşağıda sizlerle bunun için Head etiketi arasına yerleştireceğiniz ve doldurmanız gereken kodlar paylaşıyorum.

    <link rel="icon" type="image/png" href="">
    <link rel="apple-touch-icon" sizes="57x57" href="" />
    <link rel="apple-touch-icon" sizes="72x72" href="" />
    <link rel="apple-touch-icon" sizes="114x114" href="" />
    <link rel="apple-touch-icon" sizes="144x144" href="" />
    <link rel="shortcut icon" sizes="196x196" href="">
    <meta name="msapplication-TileImage" content="">

Not : Boyutları etiketlerin içerisinde yazmaktadır. msapplication-TileImage için 180px x 180px ölçülerinde yapabilir alternatifleri araştırabilirsiniz.

Hepinize iyi çalışmalar.

HTML Head Etiketi Nedir?
Etiketlendi: