FrontEnd Developer RoadMap – HTML 5 Tutorial 10 Meta Etiketi Nedir ve Attribute’ları İle Neler Yapılabilir?

Merhabalar, bu yazımda Html head etiketleri arasında yazılabilecek meta etiketlerine bakıyor olacağız.

Meta Etiketi Nedir?

Web sitelerinin head etiketleri arasında bulunan ve site hakkında arama motorlarına ve siteye giriş yapan botlara bilgiler veren kod yapısı meta etiketi olarak tanımlanmaktadır. Meta Tag olarak global alanda isimlendirilen bu kodlar, her siteye özel olarak uyarlanarak head etiketleri arasında yer almalıdır.

Çok sayıda meta etiketi olduğu gibi bu etiketler arasından site için uygun ve gerekli olanlarının tercih edilmesi gerekir. Böylece hem sitenin arama motorları için uygun yapıda olması sağlanabilir hem de SEO çalışmalarının bir parçası olarak bu eksiklik giderilir.

Meta etiketleri, web sitesinin en başında yer alır ve temelde basit Html kod yapılarındandır.

<meta charset = “utf-8” />

şeklinde yer alabilecek bir meta etiketi, web sitesi için karakter kodlamasının nasıl olması gerektiğini belirtir. Üstelik bu kodlar sadece arama motorları için değil tarayıcılar için de sayfanın ideal şekilde gösterilmesi adına bilgiler sunacağından dolayı örnekteki karakter kodlaması gibi önemli veriler sunulmalıdır. Meta etiketlerinin kullanımında meta, etiket ve = işaretinden sonra tırnak içinde ilgili verinin ne olduğu yazılmalıdır.

Meta Tag Ne Kadar Önemlidir?

Doğru meta etiketlerini, web sitenizde doğru şekilde kullandığınızda, arama motorlarına web siteniz hakkında bilmeleri gereken her şeyi aktarmış olursunuz. Meta Tag, SEO için her zaman öneme sahip olduğu gibi her web site sahibinin önemsemesi gereken bir ayrıntıdır.

Meta Tag’i ve Attribute’ları

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Language" content="tr">
    <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">


    <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=""/>

    <title>Document</title>
</head>

<body>

    Murat Bilginer

</body>

</html>
  • http-equiv=”Content-Type” : Web sitenizin dil kodunu belirlemede kullanılır.
  • http-equiv=”Content-Language” : Web sitesinin dilini 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.
Sosyal Medya İçin Yazılanlar
  • 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ı.

Meta etiketinin Attribute’larını tek bir meta etiketi içinde yazıp göstermekte olasıdır. Ancak bu çok tavsiye edilen bir kullanım değildir.

Bunların tamamını her projede kullanmayız. İhtiyacımız olanları belirleyip kullanmak faydalı olacaktır.

Meta etiketi ile alakalı bilmemiz gerekenler şimdilik bu kadar. Bir sonraki yazımda görüşmek üzere.

Exit mobile version