Bir HTML sayfasının <head>'i kullanıcılara görünmez ama diğer her şey tarafından okunur: arama motorları, sosyal medya tarayıcıları, tarayıcılar ve botlar. Bunu yanlış yapmak sıralamalarınıza ve çirkin sosyal önizlemelere mal olur. Doğru yapmak ise bir kez yazdığınız ve nadiren dokunduğunuz yaklaşık 30 satır işaretlemedir. İşte bu 30 satırın içermesi gerekenler.
Vazgeçilmez Temel Unsurlar
İstisnasız her sayfada bulunması gereken iki etiket:
<!-- Character encoding: always first, always UTF-8 -->
<meta charset="UTF-8">
<!-- Viewport: required for responsive design to work -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">charset bildirimi, tarayıcının kodlamayı geri kalanını ayrıştırmadan önce belirleyebilmesi için belgenin ilk 1024 baytı içinde yer almalıdır. UTF-8 dünyadaki her dili ve emojiyi işler — başka bir şey kullanmanın nedeni yoktur. viewport meta etiketi, mobil tarayıcılara masaüstü boyutlu düzen göstermek için uzaklaştırmamasını söyler. Onsuz Google'ın mobil öncelikli indekslemesi sayfanızı cezalandırır.
Başlık ve Meta Açıklaması
Bu ikisi, arama sonuçlarından tıklama oranlarını doğrudan etkiler:
<!-- Title: shown in browser tab and search result headlines -->
<title>HTML Forms Guide — Input Types, Validation & Accessibility | DevTools</title>
<!-- Meta description: shown as snippet text in search results -->
<meta
name="description"
content="A complete guide to HTML form input types, constraint validation, label association, and building accessible forms. Real examples with no library dependencies."
>- Başlık uzunluğu. SERP'lerde kesilmemesi için 60 karakterin altında tutun. En önemli anahtar kelimeleri öne koyun — arama motorları başlangıca daha fazla ağırlık verir.
- Başlık biçimi. Yaygın bir kalıp: Birincil Konu — İkincil Bilgi | Marka. Markayı sona koymak yararlı içeriği ön planda tutar.
- Meta açıklama uzunluğu. Google yaklaşık 155–160 karakterde keser. Anahtar kelime doldurmak yerine insanlar için yazın — sıralamayı doğrudan etkilemez ama insanların tıklayıp tıklamadığını etkiler.
- Benzersizlik. Her sayfanın benzersiz bir başlık ve açıklamaya ihtiyacı vardır. Sitenizdeki yinelenen başlıklar, arama motorlarını belirli bir sorgu için hangi sayfayı sıralayacakları konusunda karıştırır.
Open Graph — Sosyal Paylaşım Önizlemeleri
Birisi URL'nizi LinkedIn, Slack, Facebook veya Discord'da paylaştığında, bu platformlar önizleme kartını oluşturmak için Open Graph etiketlerinizi tarar. Onlar olmadan önizleme ya boş ya da çirkin görünür. Onlarla profesyonel görünür:
<!-- Open Graph: controls how pages appear when shared on social media -->
<meta property="og:type" content="article">
<meta property="og:title" content="HTML Forms Guide — Input Types, Validation & Accessibility">
<meta property="og:description" content="Build forms that work for everyone using HTML's built-in input types, constraint validation, and accessibility features.">
<meta property="og:url" content="https://devtools.example.com/blog/html/html-forms-guide">
<meta property="og:image" content="https://devtools.example.com/og/html-forms-guide.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="DevTools Blog">og:type. Blog yazıları içinarticlekullanın. Ana sayfalar ve kategori sayfaları içinwebsitekullanın. Tür, bazı platformların kartı nasıl görüntülediğini etkiler.og:image. Görsel etki için en önemli OG etiketi. 1200×630px hedefleyin (kanonik Open Graph görüntü boyutu). PNG veya JPEG ikisi de çalışır. Facebook ve LinkedIn en az 200×200px gerektirir.og:url. Bunu sayfanın kanonik URL'sine ayarlayın — UTM parametreleri içerebilecek kullanıcının geldiği URL'ye değil.og:titleve<title>. Bunlar farklı olabilir. HTML<title>'ınız arama için optimize edilmiştir;og:title'ınız sosyal bağlam için olduğundan biraz daha insancıl ve çarpıcı olabilir.
Twitter Card Etiketleri
Twitter/X, Open Graph'a benzer şekilde çalışan kendi etiket setine sahiptir. OG etiketleri mevcutsa Twitter bazı alanlar için bunlara geri döner — ancak en iyi sonuçlar için Twitter'a özgü etiketleri yine de ayarlamalısınız:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@devtoolsblog">
<meta name="twitter:creator" content="@alicechen_dev">
<meta name="twitter:title" content="HTML Forms Guide — Real Examples, No Libraries">
<meta name="twitter:description" content="Everything you need for HTML forms: input types, validation, accessibility. Working code throughout.">
<meta name="twitter:image" content="https://devtools.example.com/og/html-forms-guide.png">
<meta name="twitter:image:alt" content="Screenshot showing a styled HTML form with accessible error messages">summary_large_image büyük banner tarzı kart verir. summary küçük kare küçük resim verir. twitter:image:alt etiketi sık unutulur ama önemlidir — kart görüntüsü için alt metnidir; Twitter'da ekran okuyucu kullanan kullanıcılar için önemlidir.
Kanonik URL
Aynı içerik birden fazla URL'de erişilebiliyorsa (sonundaki eğik çizgiyle/olmadan, UTM parametreleriyle, HTTP vs HTTPS, www vs www'suz), arama motorlarına hangi sürümün "gerçek" olduğunu söylemek için kanonik etiket gerekir:
<!-- Canonical: tells search engines which URL is the authoritative version -->
<link rel="canonical" href="https://devtools.example.com/blog/html/html-forms-guide">Kanonik URL her zaman protokol dahil tam mutlak URL olmalıdır. Kanonik etiket olmadan Google tahmin etmek zorunda kalır — ve sayfanızın istediğinizden farklı bir sürümünü seçebilir; bu da sıralama sinyallerinizi birden fazla URL'ye böler.
Robots Meta Etiketi
Robots meta etiketi, arama motoru tarayıcılarına bir sayfayla ne yapabileceklerini söyler. Çoğu sayfanın buna ihtiyacı yoktur — varsayılan davranış indekslemek ve bağlantıları takip etmektir. Ancak belirli durumlar için istersiniz:
<!-- Default (you don't need to write this, but it's the implicit behaviour) -->
<meta name="robots" content="index, follow">
<!-- Don't index this page (e.g. admin pages, thank-you pages) -->
<meta name="robots" content="noindex, follow">
<!-- Don't follow links on this page (rare) -->
<meta name="robots" content="index, nofollow">
<!-- Don't index, don't follow, don't cache, don't show snippet -->
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet">noindex için iyi adaylar: arama sonuçları sayfaları, ince içerikli filtrelenmiş kategori sayfaları, kullanıcı hesap sayfaları, sipariş onay sayfaları, hazırlık ortamları. Robots.txt ile engelliyorsanız, meta etiketteki noindex'in daha güvenilir olduğunu unutmayın — Google sayfayı doğrudan taradığında bile buna uyar.
Çok Dilli Siteler için hreflang
Sitenizde birden fazla dilde içerik varsa, hreflang arama motorlarına farklı bölgelerdeki kullanıcılara hangi sayfa sürümünü göstereceklerini söyler. Onsuz Google bir sürümü seçer ve İngilizce olmayan sayfalarınız hedef pazarlarında hiç sıralanmayabilir:
<!-- hreflang: tells Google which language version to show per region -->
<link rel="alternate" hreflang="en" href="https://example.com/blog/html-forms">
<link rel="alternate" hreflang="es" href="https://example.com/es/blog/html-forms">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/blog/html-forms">
<link rel="alternate" hreflang="de" href="https://example.com/de/blog/html-forms">
<link rel="alternate" hreflang="x-default" href="https://example.com/blog/html-forms">x-default, dili belirli bir yerel ayarla eşleşmeyen kullanıcılar için geri dönüştür. Hreflang kümesindeki her sayfa, kendine atıfta bulunan giriş dahil tam listeyi içermelidir. Ayrıntılıdır ama herhangi bir giriş eksikse Google tüm ek açıklamayı yoksayar.
JSON-LD ile Yapılandırılmış Veri
JSON-LD formatındaki yapılandırılmış veri, Google'ın arama sonuçlarında doğrudan zengin sonuçlar — yıldız puanları, makale meta verileri, SSS, nasıl yapılır adımları — görüntülemesine olanak tanır. Bir blog makalesi için minimum yararlı şema şudur:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "HTML Forms Guide — Input Types, Validation & Accessibility",
"description": "A complete guide to HTML form input types and built-in validation.",
"author": {
"@type": "Person",
"name": "Alice Chen",
"url": "https://devtools.example.com/authors/alice-chen"
},
"publisher": {
"@type": "Organization",
"name": "DevTools Blog",
"logo": {
"@type": "ImageObject",
"url": "https://devtools.example.com/logo.png"
}
},
"datePublished": "2026-04-16",
"dateModified": "2026-04-16",
"image": "https://devtools.example.com/og/html-forms-guide.png",
"url": "https://devtools.example.com/blog/html/html-forms-guide"
}
</script>JSON-LD, <head> veya <body>'daki herhangi bir yerde <script type="application/ld+json"> bloğuna girer — head gelenekseldir. Sayfa oluşturma hızını etkilemez ve sayfa işaretlemenizden tamamen ayrıdır; bu da sunucu tarafında oluşturmayı kolaylaştırır.
Kullanmamamanız Gereken — Ölü Meta Etiket
Eski eğitimlerde ve miras kodu tabanlarında gördüğünüz ve gerçekten hiçbir şey yapmayan bir meta etiket:
<!-- This does nothing for modern SEO. Google stopped using it in 2009. -->
<meta name="keywords" content="html, forms, validation, accessibility">Google, yaygın spam kötüye kullanımı nedeniyle 2009'da keywords meta etiketini yoksaydığını resmi olarak duyurdu. Bing ve diğer büyük arama motorları da aynı yolu izledi. Herhangi bir SEO etkisi olmadan kaldırabilirsiniz. Hâlâ bir işe yaradığı tek yer dahili site arama sistemleridir — ve yalnızca site arama yazılımınız özellikle onu okuyacak şekilde yapılandırılmışsa.
Eksiksiz bir head Şablonu
İşte herhangi bir makale veya sayfa için başlangıç şablonu olarak kullanabileceğiniz üretime hazır bir <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Encoding and viewport: always first -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Core SEO -->
<title>HTML Forms Guide — Input Types, Validation & Accessibility | DevTools</title>
<meta name="description" content="A complete guide to HTML form input types, built-in constraint validation, and accessible form patterns. Real examples, no libraries.">
<link rel="canonical" href="https://devtools.example.com/blog/html/html-forms-guide">
<meta name="robots" content="index, follow">
<!-- Open Graph (Facebook, LinkedIn, Discord, Slack) -->
<meta property="og:type" content="article">
<meta property="og:title" content="HTML Forms Guide — Input Types, Validation & Accessibility">
<meta property="og:description" content="Build forms that work for everyone using HTML's built-in features.">
<meta property="og:url" content="https://devtools.example.com/blog/html/html-forms-guide">
<meta property="og:image" content="https://devtools.example.com/og/html-forms-guide.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="DevTools Blog">
<!-- Twitter / X Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@devtoolsblog">
<meta name="twitter:title" content="HTML Forms Guide — Input Types, Validation & Accessibility">
<meta name="twitter:description" content="Real form examples with no library dependencies.">
<meta name="twitter:image" content="https://devtools.example.com/og/html-forms-guide.png">
<meta name="twitter:image:alt" content="An accessible HTML form with inline error validation">
<!-- hreflang (only needed for multilingual sites) -->
<link rel="alternate" hreflang="en" href="https://devtools.example.com/blog/html/html-forms-guide">
<link rel="alternate" hreflang="x-default" href="https://devtools.example.com/blog/html/html-forms-guide">
<!-- Structured data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "HTML Forms Guide",
"author": { "@type": "Person", "name": "Alice Chen" },
"datePublished": "2026-04-16",
"image": "https://devtools.example.com/og/html-forms-guide.png"
}
</script>
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" href="/favicon.png">
</head>HTML Çalışması için Araçlar
HTML işaretlemesiyle çalışıyorsanız HTML Formatter, <head>'inizi okunabilir ve düzgün girintili tutar; HTML Validator ise yapısal hataları üretim ortamına ulaşmadan önce yakalar. HTML'yi canlı olarak düzenleyip önizlemek için HTML Editor değişiklikleri gerçek zamanlı görmenizi sağlar.
Özet
Fark yaratan meta etiketler şunlardır: temel olarak charset ve viewport, arama tıklamaları için iyi yazılmış bir <title> ve meta description, sosyal önizlemeler için Open Graph ve Twitter Card etiketleri, yinelenen içerik sorunlarını önlemek için canonical bağlantısı ve zengin sonuçlar için JSON-LD yapılandırılmış verisi. Keywords meta etiketini atlayın — 15 yıldır kullanım dışı. Gerisini doğru yapın ve sayfalarınız göründükleri her bağlamda mükemmel görünecektir.