ana_sayfa / html5 / meta-etiketler-ve-seo
</> HTML5 📊 Orta ⏱ 25 dk 📋 1 Kod Örneği

Meta Etiketler ve SEO

Head bölümündeki meta etiketleri, Open Graph, Twitter Card ve SEO optimizasyonu.

HTML sayfasının head bölümü, arama motorları ve sosyal medya platformları için kritik bilgiler içerir. Doğru meta etiketler Google sıralamasını ve sosyal medya paylaşım görünümünü doğrudan etkiler.

Viewport Meta Etiketi

Mobil uyumlu site için en kritik etikettir. Olmadan site mobilde küçük görünür.

Open Graph Nedir?

Facebook, LinkedIn ve WhatsApp'ta link paylaşılınca çıkan önizleme için kullanılır. og:image, og:title ve og:description zorunludur.

HTML Tam Meta Etiket Şablonu 
<!DOCTYPE html>
<html lang="tr">
<head>
  <!-- Temel -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO -->
  <title>Sayfa Başlığı | Site Adı</title>
  <meta name="description" content="150-160 karakter arası sayfa açıklaması. Google'da arama sonuçlarında görünür.">
  <meta name="keywords" content="anahtar kelime 1, anahtar kelime 2">
  <meta name="author" content="Furkan Bacanlı">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://furkanbacanli.com/sayfa">

  <!-- Open Graph (Facebook, WhatsApp, LinkedIn) -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="Sayfa Başlığı">
  <meta property="og:description" content="Sayfa açıklaması">
  <meta property="og:url" content="https://furkanbacanli.com/sayfa">
  <meta property="og:image" content="https://furkanbacanli.com/og-resim.jpg">
  <meta property="og:locale" content="tr_TR">
  <meta property="og:site_name" content="Furkan Bacanlı">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Sayfa Başlığı">
  <meta name="twitter:description" content="Sayfa açıklaması">
  <meta name="twitter:image" content="https://furkanbacanli.com/og-resim.jpg">

  <!-- Favicon -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-icon.png">

  <!-- Tema rengi (mobil tarayıcı başlık rengi) -->
  <meta name="theme-color" content="#6366f1">

  <!-- Önbellekleme -->
  <meta http-equiv="Cache-Control" content="max-age=86400">

</head>
<body>
  <h1>Sayfa İçeriği</h1>
</body>
</html>
CANLI ÖNİZLEME

canonical aynı içeriğin farklı URL'lerde olduğu durumlarda hangisinin asıl sayfa olduğunu Google'a söyler. og:image en az 1200x630 piksel olmalıdır.

← Önceki Ders
Form Elemanları