<head> içindeki <meta> etiketleri sayfa hakkında metadata sağlar — karakter kodlaması, viewport davranışı, SEO açıklamaları ve sosyal paylaşım önizlemeleri. Render edilmezler ancak tarayıcılar, arama motorları ve sosyal platformlar tarafından okunurlar.
charset metnin (özellikle non-ASCII) doğru şekilde kodu çözüldüğünü sağlar. İlk olarak bunu koyun.viewport bir siteyi mobilte duyarlı yapar — onsuz, telefonlar sahte 980px genişliğinde render edilir ve uzaklaşır, responsive CSS'nizi bozar.<title>Page Title — 50–60 chars</title>
<meta name="description" content="Summary shown in search results, ~150 chars" />
<link rel="canonical" href="https://site.com/page" /> <!-- avoid duplicate-content penalties -->
<title> ve description Google sonuçlarında görünen şeydir, bu nedenle tıklamayı sağlarlar. canonical arama motorlarına yetkili URL'nin hangisi olduğunu söyler.
<meta property="og:title" content="Shareable title" />
<meta property="og:description" content="Shown when shared" />
<meta property="og:image" content="https://site.com/preview.jpg" />
<meta property="og:url" content="https://site.com/page" />
<meta name="twitter:card" content="summary_large_image" />
Bunlar bağlantınız Facebook, LinkedIn, Slack, X vb. üzerinde paylaşıldığında görünen kartı kontrol eder. — bunlar olmadan çirkin veya boş bir önizleme alırsınız.
charset ve viewport doğru render ve mobil duyarlılık için pazarlık edilemezler; title/description/canonical SEO'yu yönlendirir; Open Graph etiketleri bağlantılarınızın paylaşıldığında nasıl göründüğünü kontrol eder.
Birlikte, bir sayfanın doğru şekilde render edilmesi, sıralanması ve iyi paylaşılmasını sağlayan metadata katmanı oluştururlar.