HTML meta Etiketleri: charset, name, viewport ve http-equiv Rehberi

meta etiketinin dört türü

Teknik özete göre <meta> boş (void) bir öğedir: içeriği yoktur, açılış etiketi zorunludur, kapanış etiketi yazılmaz. Yani </meta> yazmak hatadır; <meta charset="utf-8" /> biçimindeki sondaki eğik çizgi ise isteğe bağlıdır. Öğenin örtük bir ARIA rolü yoktur ve üzerine role konamaz, çünkü ekranda görünen bir şey değildir. İçerik kategorisi metadata içeriğidir; yalnızca itemprop taşıdığında akış ve ifade (phrasing) içeriği sayılır ve bu sayede gövde içinde de kullanılabilir.

Önemli bir kısıt: itemprop, aynı öğede name, http-equiv veya charset ile birlikte bulunamaz. Bir <meta> ya belge bilgisi verir ya mikroveri taşır, ikisini birden yapmaz. Yapılandırılmış veri konusunu ve JSON-LD ile mikroveri karşılaştırmasını Schema.org ve JSON-LD rehberinde bulabilirsiniz.

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Kargo Takibi</title>
  <meta name="description" content="Siparişinizin nerede olduğunu kargo numarasıyla öğrenin." />
  <meta http-equiv="content-security-policy" content="default-src https:" />
</head>

meta charset: tek geçerli değer utf-8

charset özniteliği belgenin hangi karakter kodlamasıyla yazıldığını söyler. MDN'e göre bu özniteliğin değeri büyük-küçük harf duyarsız olarak utf-8 olmak zorundadır, çünkü HTML belgeleri için geçerli tek kodlama UTF-8'dir. Yani UTF-8 ya da utf-8 yazmanız fark etmez, ama windows-1254 veya iso-8859-9 gibi eski Türkçe kodlamaları yazmak geçersizdir. Dosyanızı editörde de UTF-8 olarak kaydetmeniz gerekir; etiket yalnızca bir bildirimdir, dosyanın baytlarını dönüştürmez.

İkinci kural konumla ilgilidir: kodlamayı bildiren <meta> öğesi, belgenin ilk 1024 baytının içinde tamamen yer almalıdır. Bu yüzden onu <head> içinde ilk sıraya koymak alışkanlık hâline gelmelidir. Önüne uzun bir HTML yorumu, büyük bir satır içi stil bloğu ya da uzun bir <title> koyarsanız bildirim bu sınırın dışına taşabilir. Belge iskeleti, doctype ve standart mod konuları HTML belge yapısı yazısında anlatılıyor.

Aynı bildirimin eski bir yazımı daha vardır: <meta http-equiv="content-type" content="text/html; charset=utf-8">. MDN bunun charset özniteliğiyle eşdeğer olduğunu ve aynı konum kısıtını taşıdığını belirtir. Bu biçim yalnızca text/html olarak sunulan belgelerde kullanılabilir; XML (application/xhtml+xml) olarak sunulan belgelerde kullanılamaz. Yeni sayfalarda kısa olan charset biçimini tercih etmeniz yeterlidir; ikisini birden yazmanın bir faydası yoktur.

<!-- Doğru: kodlama bildirimi head içinde ilk sırada -->
<head>
  <meta charset="utf-8" />
  <title>Çağrı Merkezi: Sıkça Sorulan Sorular</title>
</head>

Standart name değerleri

name ve content birlikte kullanılır: name bilginin adını, content değerini verir ve bilgi bütün sayfa için geçerlidir. HTML belirtimi şu adları tanımlar:

application-name için iki ayrıntı önemlidir. Birincisi, siteyi oluşturan her sayfanın kendine özgü bir uygulama adı tanımlaması beklenmez; ad uygulamanın adıdır, sayfanın değil. İkincisi, çeviri sunmak isterseniz her dil için ayrı bir <meta> yazıp lang özniteliğiyle dilini belirtirsiniz. lang özniteliğinin genel kullanımı lang ve dir yazısında ele alınıyor.

<meta name="application-name" content="Hava Durumu Sihirbazı" lang="tr" />
<meta name="application-name" content="Weather Wizard" lang="en" />
<meta name="author" content="Ayşe Yılmaz" />
<meta name="generator" content="Statik site üreticisi" />

description değerinin nasıl yazılacağı, uzunluğu ve arama sonuçlarındaki etkisi ayrı bir SEO konusudur; bunun için Google başlık ve meta açıklama yazma rehberine bakın. Burada bilmeniz gereken teknik kısım, değerin tek bir <meta name="description"> öğesinin content özniteliğinde durduğudur. keywords için MDN yalnızca tanımı verir (virgülle ayrılmış ilgili sözcükler); bu yazıda arama motorlarının onu nasıl değerlendirdiği konusunda bir iddiada bulunmuyoruz.

Başka belirtimlerin tanımladığı adlar da vardır: viewport (CSS viewport modülü), text-scale (CSS yazı tipi modülü) ve responsive-embedded-sizing (CSS kutu boyutlandırma modülü). Son olarak WHATWG MetaExtensions wiki sayfasında standart olmayan ama yaygın adlar listelenir: creator (belgeyi oluşturan kurum; birden fazlaysa ayrı ayrı <meta> öğeleri), publisher (yayıncı), robots (iş birliği yapan tarayıcı botların davranışı) ve yalnızca Googlebot'un izlediği googlebot. robots değerlerinin ayrıntısı meta robots yazısında, sosyal medya paylaşım etiketleri (og:*) ise Open Graph rehberinde anlatılıyor.

viewport: mobil ekran için kısa özet

Bazı dar ekranlı cihazlar sayfayı ekrandan daha geniş sanal bir pencerede çizip sonucu küçülterek gösterir. Bu, mobil için hazırlanmamış sayfaların daha iyi görünmesini sağlar ama dar ekranlar için yazdığınız medya sorgularının hiç devreye girmemesine yol açabilir. <meta name="viewport"> bu sorunu çözer. MDN'in önerdiği temel ayar width=device-width değeridir; görünüm alanını cihaz genişliğine eşitler.

<meta name="viewport" content="width=device-width" />
<!-- Ekran çentiklerini de kaplamak için -->
<meta name="viewport" content="width=device-width, viewport-fit=cover" />

content değeri virgülle ayrılmış anahtar=değer çiftlerinden oluşur: width, height, initial-scale, minimum-scale, maximum-scale, user-scalable, interactive-widget ve viewport-fit. MDN, yaygın olarak eklenen initial-scale=1 değerinin çoğu zaman gereksiz olduğunu, yalnızca taşan içerik istenmeyen küçültmeye yol açıyorsa eklenmesini söyler. Responsive tasarım, kırılma noktaları ve viewport ayarlarının tamamı mobil uyumluluk yazısında anlatıldığı için burada ayrıntıya girmiyoruz.

theme-color ve color-scheme

theme-color, tarayıcının sayfayı ya da sayfanın çevresindeki arayüzü (örneğin mobil tarayıcının adres çubuğunu) özelleştirmek için kullanabileceği önerilen bir renktir. content içine geçerli bir CSS renk değeri yazılır: onaltılık kod, RGB ya da renk adı olabilir. Bu bir öneridir; tarayıcının rengi nerede ve nasıl kullanacağı tarayıcıya bağlıdır.

<meta> öğesinin media özniteliği yalnızca theme-color ile anlamlıdır. Değeri bir medya sorgusudur, yazılmazsa all kabul edilir. Diğer name değerlerinde hiçbir etkisi yoktur ve MDN o durumda yazılmamasını söyler. Böylece açık ve koyu tema için iki ayrı renk verebilirsiniz; koşulu eşleşen renk önerilir.

<meta name="theme-color" content="#0b5394" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#1f1f1f" media="(prefers-color-scheme: dark)" />
<meta name="color-scheme" content="light dark" />

color-scheme ise belgenin hangi renk şemalarıyla uyumlu olduğunu bildirir. Tarayıcı bu bilgiyi kullanıcının sistem ayarıyla birleştirerek arka plan, metin, form denetimleri ve kaydırma çubukları gibi varsayılan renkleri seçer. Geçerli değerler şunlardır: normal (belge renk şemalarından habersizdir, varsayılan palet kullanılır), light, dark, light dark ve dark light. Birden fazla şema yazdığınızda ilki belgenin tercihidir, ikincisi kullanıcı onu tercih ediyorsa kabul edilir. only light belgenin yalnızca açık modu desteklediğini söyler; buna karşılık only dark geçersizdir, çünkü uyumlu olmayan bir belgeyi zorla koyu çizmek okunamaz içerik üretebilir.

referrer: Referer başlığını denetlemek

<meta name="referrer">, sayfadan yapılan isteklerde gönderilen HTTP Referer başlığını belirler. content zorunludur ve aşağıdaki anahtar sözcüklerden birini alır. Tablodaki "güvenli hedef", hedefin en az mevcut sayfa kadar güvenli olduğu durumu (HTTPS'ten HTTPS'e) anlatır; HTTPS'ten HTTP'ye geçiş daha az güvenli hedeftir.

<!-- Sayfadan giden isteklerde Referer gönderme -->
<meta name="referrer" content="no-referrer" />

Aynı politika tek tek öğelerde referrerpolicy özniteliğiyle de verilebilir; örneğin <link> ve <script> öğeleri bu özniteliği destekler. Öğe üzerinde politika yoksa belgenin genel politikası devralınır. Bu öğelerin ayrıntısı link etiketi ve script etiketi yazılarında.

http-equiv: HTTP başlığı yerine geçen talimatlar

http-equiv adı "HTTP eşdeğeri" anlamına gelir: tarayıcıya, belgeyi döndüren yanıtta belirli bir HTTP başlığı varmış gibi davranmasını söyler. Değeri content özniteliğinde durur. Ancak yalnızca küçük bir başlık alt kümesi desteklenir:

refresh değeri iki biçim alır. content yalnızca negatif olmayan bir tam sayıysa sayfa o kadar saniye sonra yeniden yüklenir. Sayının ardından ;url= ve geçerli bir URL gelirse o süre sonunda yönlendirme yapılır. Sayaç, sayfa tamamen yüklendiğinde, yani load ve pageshow olaylarının ikisi de tetiklendikten sonra başlar.

<!-- 300 saniye (5 dakika) sonra sayfayı yenile -->
<meta http-equiv="refresh" content="300" />

<!-- 3 saniye sonra yeni adrese yönlendir -->
<meta http-equiv="refresh" content="3;url=https://ornek.com.tr/yeni-sayfa" />

<!-- Yalnızca HTTPS üzerinden kaynak yüklenmesine izin veren CSP -->
<meta http-equiv="content-security-policy" content="default-src https:" />

Erişilebilirlik açısından refresh risklidir. Yenileme aralığı kısa olursa ekran okuyucu kullanan biri sayfayı okuyup anlamadan başka yere götürülebilir; habersiz sayfa değişimleri az gören kullanıcıların da kafasını karıştırır. MDN'in betik erişilebilirliği önerileri de aynı yöndedir: içeriği otomatik güncellemeyin, yönlendirmeyin, yenilemeyin; etkileşimi kullanıcı başlatsın. Web erişilebilirliğinin genel ilkeleri WCAG temelleri yazısında özetleniyor.

content-security-policy örneğindeki default-src https: politikası resim, yazı tipi, betik gibi tüm kaynakların yalnızca HTTPS üzerinden yüklenmesine izin verir; unsafe-inline ve unsafe-eval verilmediği için satır içi betikler de engellenir. Aynı kısıt sunucunun gönderdiği Content-Security-Policy: default-src https: başlığıyla da verilebilir. CSP direktifleri, nonce kullanımı ve XSS'e karşı korunma XSS ve CSP yazısında anlatılıyor.

text-scale ve responsive-embedded-sizing

<meta name="text-scale" content="scale">, kök <html> öğesinin başlangıç yazı boyutunun işletim sistemi ve tarayıcıdaki metin boyutu ayarlarıyla orantılı ölçeklenmesini ister. Bu değer, mobildeki otomatik metin boyutlandırma gibi tarayıcının mevcut sezgisel mekanizmalarını da kapatır. Varsayılan değer legacy olup etiketi hiç yazmamakla aynı etkiye sahiptir: sistem düzeyindeki yazı boyutu tercihleri yok sayılır.

MDN bu etiketi ekleyen sitelerin, hedef platformlarındaki en yüksek metin ölçeğine kadar test yapması gerektiğini vurgular; mobil platformlarda bu genellikle yüzde 200 ile yüzde 300'ün üzerindeki değerler arasındadır. Sayfanız büyük yazı tercih eden kullanıcılar için bozuk görünmemelidir. responsive-embedded-sizing ise bir <iframe> içine gömülen belgenin boyut bilgisini üst sayfayla paylaşmasına izin verir; güvenlik ve gizlilik nedeniyle iframe'ler bu bilgiyi varsayılan olarak paylaşmaz. Her iki özellik de yenidir; tarayıcı desteği için MDN uyumluluk tablosuna bakın. iframe öğesinin kendisi iframe yazısında anlatılıyor.

Uygulama: eksiksiz bir head bölümü

Aşağıdaki örnek, bir kurumsal sayfanın head bölümünde meta etiketlerinin tipik sırasını gösterir. Önce kodlama, ardından viewport, sonra başlık ve belge bilgileri gelir. Stil, simge ve betik bağlantıları gibi diğer head öğeleri kendi yazılarında ele alındığı için burada yalnızca meta etiketleri var.

<!doctype html>
<html lang="tr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Hizmetlerimiz | Örnek Bilişim</title>
    <meta name="description" content="Web tasarım, bakım ve teknik destek hizmetlerimizin kapsamı." />
    <meta name="author" content="Örnek Bilişim" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#0b5394" />
    <meta name="referrer" content="strict-origin-when-cross-origin" />
  </head>
  <body>
    <h1>Hizmetlerimiz</h1>
  </body>
</html>

Bu sayfada http-equiv kullanılmadı, çünkü yönlendirme ve güvenlik başlıkları sunucu tarafında verilebiliyor. <meta> öğelerinin sırası, charset dışında, davranışı değiştirmez; yine de okunabilirlik için hep aynı düzeni korumanız ekip çalışmasında işinizi kolaylaştırır.

Sık yapılan hatalar

• Kapanış etiketi yazmak: <meta> boş bir öğedir, </meta> geçersizdir.
• charset bildirimini geç koymak: bildirim ilk 1024 baytın içinde olmalı; head içinde ilk öğe yapın.
• utf-8 dışında kodlama yazmak: charset için geçerli tek değer utf-8'dir.
• media özniteliğini her yerde kullanmak: yalnızca theme-color ile anlamlıdır, diğerlerinde yazılmamalıdır.
• itemprop ile name'i birleştirmek: aynı öğede itemprop ile name, http-equiv veya charset bir arada olamaz.
• Yakınlaştırmayı kapatmak: user-scalable=no erişilebilirliği bozar.
• Güvenlik başlıklarını meta ile vermek: desteklenmeyen başlıklar yok sayılır; sahte bir güvenlik hissi oluşur.
• only dark yazmak: color-scheme için bu değer geçersizdir; dark light veya dark kullanın.

Sık Sorulan Sorular

meta etiketleri body içine yazılabilir mi?

charset ve http-equiv taşıyanlar yalnızca <head> içinde durabilir. name taşıyanlar metadata içeriği kabul eden her öğede, itemprop taşıyanlar ise akış içeriği kabul eden öğelerde de kullanılabilir. Pratikte name değerlerini de head içinde tutmak en anlaşılır yoldur.

Aynı name değerini iki kez yazarsam ne olur?

Bazı değerler bilinçli olarak tekrarlanır: farklı media koşullarıyla iki theme-color, farklı lang değerleriyle birden fazla application-name veya her kurum için ayrı creator. referrer için ise çelişen politikalar no-referrer ile sonuçlanır. Diğer durumlarda tek etiket yazmak en güvenli yoldur.

meta refresh ile yönlendirme yapmak doğru mu?

Teknik olarak çalışır ve Refresh HTTP başlığıyla eşdeğerdir. Ancak kısa aralıklar erişilebilirlik sorunlarına yol açar ve kullanıcı yönlendirildiğini fark etmeyebilir. Kullanıcıyı kalıcı olarak başka adrese taşıyorsanız yönlendirmeyi sunucu tarafında yapmak daha açık bir çözümdür.

X-UA-Compatible etiketini kaldırmalı mıyım?

MDN'e göre bu etiket emekliye ayrılmış Internet Explorer'ın eski sürümleri içindi ve tarayıcılar artık onu yok sayar. Kaldırmanın bir zararı yoktur; yeni sayfalara eklemeniz de gerekmez. Aynı durum set-cookie için de geçerlidir.

Hangi meta etiketleri SEO için gerekli?

Bu yazı etiketlerin HTML davranışını anlatıyor. Arama motoru görünümü için description metninin yazımına başlık ve meta açıklama rehberinde, dizine eklemeyi denetlemeye meta robots yazısında bakabilirsiniz.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · HTML belge yapısı · link etiketi ve rel değerleri · script etiketi · mobil uyumluluk · Open Graph etiketleri · XSS ve CSP