HTML – META ETİKETİ (TAGI)

Meta etiketi; Web sayfalar ve içerikler için arama motorlarına gerekli bilgileri tanımladığımız etiket türüdür. <meta> etiketleri (tagları) HTML kodlarımızın <head> </head> etiketleri arasına yazdığımız bilgi  etiketleridir. Bu etiket türü arama motorlarına site ve içeriği hakkında  bilgiler sunar.  Böylece arama motorları da sitelerin yapıları ile alakalı bilgileri kendi tekniklerine göre indeksler. 

Meta etiketlerin (tagların) en sık kullanım  maksatlarından biri de; Web sitelerin trafik sağlaması için veya diğer bir deyişle ziyaretçi çekmek için başlıklar, içerik anahtar kelimeleri ve içerik açıklamaları oluşturmaktır.  Meta etiketleri Seo için faydalı etiket gruplarıdır. 

Meta etiketleri sayfa içerisinde ziyaretçilere görüntülenecek kısım için sayfaya bir değer yansıtmaz. Meta etiketi sadece tanımlama işlemleri yapar. Kısa bir bilgi vereyim; bir web sayfasında sitenin arama motorları için bazı bilgilerin tanımlandığı alanlar vardır. Bunlar meta etiketleridir. 

Meta etiketleri sadece arama motorları için değer tanımlamaya yaramaz. Ziyaretçinin internet tarayıcısına da bazı değerleri bildirir.  Dolayısı ile çok gerekli bir tagdır. Ayrıca sitemiz içinde bulunan kodlama biçimlerini de meta taglarla belirleyebiliyoruz.

Meta etiketlerinin birkaç tane kullanım şekli vardır. Bunları örneklerle açıklayalım.

Öncelikle meta etiketimizin yapısını oluşturalım.

1. Tür – ÖRNEK;

<meta name= “ ” content= “ ” >

name: Meta etiketine bir alt özellik ataması yapar.

content: Meta etiketine atanan alt özelliğin içeriğini tanımlar.

2. Tür – ÖRNEK;

<meta http-equiv= “ ” content= “ ” >

http-equiv: Meta etiketine bir alt özellik ataması yapar.

content: Meta etiketine atanan alt özelliğin içeriğini tanımlar.

 

name ile http-equiv arasında pek bir fark yoktur. Kullanım maksatları diğeriyle aynıdır. Sadece tırnak içine atanan değerler farklıdır.

Meta etiketlerin (tagın) sıklıkla kullanılan türlerini  kod örnekleri ile açıklayalım;

KOD ÖRNEĞİ;

<!doctype html>

<html>

<head>

<title>HTML Dersleri</title>

<meta name="abstract" content=" HTML Eğitimleri"  >

</head>

<body>

</body>

</html>

 

Sitemiz hakkında sayfanın kısa bir özetini belirtmemizi sağlıyor. "Abstract" tüm web sitemiz için kısa bir bilgilendirme tanımıdır. Eğer sitemiz hakkında arama motorlarına bilgi vermek istiyorsak o zamân bu tagı (etiketi) yazmamızda fayda vardır.

Verdiğimiz bu örnekte arama motorlarına sitemiz hakkında sitenin “HTML Eğitimleri” içeren bir site olduğunu belirttik.

KOD ÖRNEĞİ;

<!doctype html>

<html>

<head>

<title>HTML Dersleri</title>

            <!– HTML4 Yazılış Biçimi –>

<meta http-equiv="content- type" content="text/html; charset=UTF-8"  >

<meta name="content- type" content="text/html; charset=UTF-8"  >

            <!– HTML5 Yazılış Biçimi –>

<meta charset="UTF-8"  >

</head>

<body>

</body>

</html>

Bir web sitesi tasarlarken veya kodlarken en gerekli kodlardan bir tanesi "charset" tanımlamasıdır. Charset alt özelliği; sayfamızın ve dokümanımızın içerik türünü belirtir ve karakter setimizi belirlememize yardımcı olur. Kullanımı HTML sayfalarında çok faydalıdır.

Charset tanımlaması yaptığımız da hem tarayıcılara hem arama motorlarına Türkçe karakter setini belirteceğimiz için bir karakter seti bozulması yaşamamış oluruz.

Bu charset tanımının örnekte görüldüğü gibi iki türlü yazılış biçimi vardır. Bunlar; HTML4 ve HTML5 yazılış biçimleridir. HTML5’ in geriye dönük kod yapısıyla HTML4 örneğindeki kodu da kullanabilirsiniz.

Charset tanımı <head> </head> etiketleri içerisinde ve meta tagı ile yazılmalıdır.

KOD ÖRNEĞİ;

<!doctype html>

<html>

<head>

<title>HTML Dersleri</title>

<meta name="keywords" content="Web Sayfanız için belirleyeceğiniz anahtar kelimeler."  >

</head>

<body>

</body>

</html>

Sitemizin hangi kelimelerde indekste ve arama sonuçlarında göstereceğini belirten tanımdır. Web sayfası ile alakalı anahtar kelimeleri belirlemede kullanılır.

Arama motorları "keywords" tanımını sayfa hangi kategoride indeksleneceğini belirlemek için kullanırlar. Bu nedenle mutlaka keywords alt özelliğini kullanmalıyız. Her sayfa için ayrı anahtar kelime yazmaya özen gösterin.

Keywords tanımı <head> </head> etiketleri arasına ve meta tagı ile yazılmalıdır.

KOD ÖRNEĞİ;

<!doctype html>

<html>

<head>

<title>HTML Dersleri</title>

<meta name="description" content="Sayfa hakkında kısa bilgiler ver."  >

</head>

<body>

</body>

</html>

 

Sitemiz hakkında kısa ve öz bilgi tanımlamamıza yarar. Bu tanım arama motorlarında bir kelime aradığımızda veya bir site aradığımızda sayfaya başlığın altında kısa bir açıklama gelir. İşte bu açıklama “description” tanımlamamızda yaptığımız açıklama veya sayfa içinde belirlediğimiz kısa bilgidir. Bu kısma arama motorları tarafından tavsiye edilen karakter sayısı 150 karakteri geçmemelidir.

Arama motorları web sitemize bot gönderirken ve indeksleme yaparken description alt özelliğindeki tanımlanan bilgileri sıklıkla kullanır. Arama motorları meta tagın description tanımın içerisinde barındırdığı kısa bilgiler doğrultusunda sayfanın alaka oranına göre ideksleme yapabilir.

Description tanımı <head> </head> etiketleri içerisinde ve meta tagı ile yazılmalıdır.

KOD ÖRNEĞİ;

<!doctype html>

<html>

<head>

<title>Meta Etiketleri (Tagları)</title>

<meta name="title" content="Meta Etiketleri (Tagları)"  >

</head>

<body>

</body>

</html>

 

Arama motoru botlarına sayfanın başlığını bildirmeye yarar. Bu tanım <title> </title> etiketindeki yapıya benzer. Ancak “title” tanımının <title> </title> etiketinden farkı sayfa başlığını ziyaretçilere değil arama motorlarına bildirmesidir.

Title tanımı <head> </head> etiketleri arasına ve meta tagı ile yazılmalıdır.

KOD ÖRNEĞİ;

<!doctype html>

<html>

<head>

<title>HTML Dersleri</title>

<meta name="author" content="D.F.G – Web Gelişim Akademisi"  >

</head>

<body>

</body>

</html>

 

Sayfa içeriğini ve tasarımını yapan kişi veya firma hakkında bilgi verilmesini sağlar. Author tanımını muhakkak <head> </head> etiketleri içerisinde ve meta tagı ile yazmalıyız. Author alt özelliğini HTML sayfası içinde yalnız bir defa yazabiliriz.

KOD ÖRNEĞİ;

<!doctype html>

<html>

<head>

<title>HTML Dersleri</title>

<meta name="cache-control" content="no-cache"  >

</head>

<body>

</body>

</html>

 

İnternet tarayıcıları için sayfamızın ön belleğe alınıp alınmamasını bildirir. Cache-control tanımı yapmazsak eğer tüm tarayıcılar zaten varsayılıcı özellikte dokümanımızı ön belleğe alacaklardır. Burada yapmamız gereken ön belleğe almamasını sağlamak için yazacağımız koddur. Cache-control tanımı <head> </head> etiketi içerisinde ve meta tagı ile yazmalayız.

Cache-control tanımın yazılışı üst örnekteki gibidir. Bu tanımı sayfamıza uyguladığımızda artık sayfamız tarayıcılarda ön belleğe veya tarayıcı geçmişlerinde tutulmayacak.

Bu tanım Internet Explorer tarayıcısı hariç tüm tarayıcılarda çalışmaktadır.

KOD ÖRNEĞİ;

<!doctype html>

<html>

<head>

<title>HTML Dersleri</title>

<meta name=" classification" content="Information, Training"  >

</head>

<body>

</body>

</html>

Web sitemizin hangi sınıfa ait olduğunu belirtir. Arama motorlarına ve istatistik sistemlerine sitenizin hangi sınıfta veya sektörde yayın yaptığınızı bildirmek için classification tanımını yazabilirsiniz.

Classification tanımını <head> </head> etiketleri içerisinde ve meta tagı ile yazmalıyız. Yukarıdaki örneği kendi web site sektörünüze uyarlayabilirsiniz.

KOD ÖRNEĞİ;

<!doctype html>

<html>

<head>

<title>HTML Dersleri</title>

<meta name="content-language" content="TR-TR"  >

</head>

<body>

</body>

</html>

Sayfa içeriğinin hangi dilde ve aksanda (ses değişikliği /şive) olduğunu belirtmek için yazdığımız meta tag alt özelliği tanımıdır. Bu tanım faydalı bir tanımdır. Çünkü arama motorları bu sayede sitemizin içerdiği dile göre indeksleme ve filtreleme işleyişlerini yapar.

Content-language tanımını <head> </head> etiketleri içerisinde meta tagı ile yazmayı unutmayalım.

KOD ÖRNEĞİ;

<!doctype html>

<html>

<head>

<title>HTML Dersleri</title>

<meta name="language" content="Turkish"  >

</head>

<body>

</body>

</html>

 

Arama motorlarına web sayfamızın hangi dilde olduğunu belirtir. Language tanımı <head> </head> etiketleri arasına ve meta tagı ile yazılır.

KOD ÖRNEĞİ;

<!doctype html>

<html>

<head>

<title>HTML Dersleri</title>

<meta http-equiv="content-style-type" content="text/css"  >

</head>

<body>

</body>

</html>

 

Html dokümanımızın içinde stil kodlarının bulunduğu CSS dosyamızı metin tabanlı dosya olduğunu belirtmeye yarar. Content-style-type tanımı <head> </head> etiketleri içerisinde ve meta tagı ile yazılmalıdır.

KOD ÖRNEĞİ;

<!doctype html>

<html>

<head>

<title>HTML Dersleri</title>

<meta http-equiv="content-script-type" content="text/javascript"  >

</head>

<body>

</body>

</html>

 

Html belgemizin içinde script kodlarının bulunduğu script dosyamızı metin tabanlı dosya olduğunu belirlemeye yarar. 

Content-script-type tanımı <head> </head> etiketleri içerisinde meta tagı ile yazılmalıdır.

KOD ÖRNEĞİ;

<!doctype html>

<html>

<head>

<title>HTML Dersleri</title>

<meta name="copyright" content="Copyright © 2017 – Web Gelişim Akademisi – Tüm Hakları Saklıdır."  >

</head>

<body>

</body>

</html>

 

Sayfa içeriği hakkındaki Telif Hakları bilgisini veren meta etiketin alt özellik tanımıdır. Web sayfa içindeki içeriklere bir telif hakkı ifadesi belirtmek için yazılır. Web sayfamız için telif hakları bilgisinin bulunmasını istiyorsak o zamân meta etiketi içerisinde “copyright” tanımını kullanabiliriz.

Copyright tanımı örnekteki gibi <head> </head> etiketleri arasına ve meta tagı ile yazılması gerekiyor.

KOD ÖRNEĞİ;

<!doctype html>

<html>

<head>

<title>HTML Dersleri</title>

<meta name="designer" content="D. Ferid – bilgi@webgelisimakademisi.com"  >

</head>

<body>

</body>

</html>

Sayfa içeriğini hazırlayıcı kişi hakkında bilgi vermek için kullanılır. Author alt özelliğine benzer. Fakat “author” tanımında sitenin içeriğini hazırlayıcı kişi manasına gelir. Designer alt özelliği ise sayfanın görsel biçimde tasarımını hazırlayan kişinin adını, soyadını, firma adını veya e-mail’ ini gibi bilgileri tanımlama mânâsına gelir.

Eğer sayfayı tasarlayıcı kişi ve kurum hakkında bilgi vermek istiyorsak bu designer alt özelliğini tanımlayacağız. Designer tanımı <head> </head> etiketleri içerisinde ve meta etiketi ile yazılır.

KOD ÖRNEĞİ;

<!doctype html>

<html>

<head>

<title> HTML Dersleri </title>

<meta name="revisit-after" content="2 days"  >

</head>

<body>

</body>

</html>

Arama motoru botlarının sayfamıza tekrar indekslemesi için ne zaman geleceğini veya sayfayı ne zaman ziyaret etmesi gerektiğini bildirdiğimiz tanımdır. Botların kaç günde bir gelmesini istiyorsak sayıyla gün belirtip İngilizce gün mânâsına gelen “days” kelimesini yazmalıyız.

Revisit-after tanımı <head> </head> etiketleri arasına ve meta tagı ile yazılmalıdır.

 

 

ETİKETE ATANAN ALT ÖZELLİKLER;

Özellik Değer Tanım
Name author
description
keywords
generator
revised
others
Meta verileri için bir değer belirtilir.
content text name ve http-equiv özelliklerinden gelen değere göre tanımlama bildirilir.
http-equiv content-type
expires
refresh
set-cookie
content alt özelliğindeki tanımlayıcı verinin yapısını belirtir.
scheme text Bir biçim içerik özelliğinin değerini yorumlamak için tanımlanır.

 

 

TARAYICI DESTEĞİ;

Chrome Firefox IE Opera Safari
EVET EVET EVET EVET EVET