head ve meta Etiketleri

Ders 29/45 · 6 dakika · 3 soru · 1 egzersiz

Bu dersin sonunda sayfanızın arama sonuçlarında, sekmelerde ve paylaşıldığında düzgün görünmesini sağlayabileceksiniz.

Sayfanın görünmeyen kısmı

head içindeki bilgiler sayfanın içeriğinde görünmez ama sayfanın dışında birçok yerde kullanılır.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kodlama Kulübü | Atatürk Lisesi</title>
  <meta name="description" content="Atatürk Lisesi Kodlama Kulübü her cuma Python ve HTML çalışıyor.">
  <link rel="icon" href="favicon.png">
  <link rel="stylesheet" href="stil.css">
  <script src="uygulama.js" defer></script>
</head>
<body>
  <h1>Kodlama Kulübü</h1>
</body>
</html>

Satır satır

title Sekmede ve arama sonuçlarında görünen başlıktır. Her sayfanın başlığı farklı ve açıklayıcı olmalıdır.
meta name="description" Sayfanın kısa özetidir. Arama motorları bunu sonuçlarda gösterebilir ama bazen kendi seçtikleri bir metni kullanırlar.
link rel="icon" Sekmedeki küçük simgeyi (favicon) belirler.
link rel="stylesheet" Bir CSS dosyasını sayfaya bağlar.
script src Bir JavaScript dosyasını sayfaya bağlar. defer niteliği, kodun HTML okunup bittikten sonra çalışmasını sağlar.
meta name="viewport" Sayfanın telefon ekranına uygun genişlikte açılmasını sağlar. Bu satır yoksa sayfa telefonda küçülmüş görünür.

Paylaşım önizlemeleri

Bir bağlantıyı WhatsApp veya Discord gibi yerlerde paylaştığınızda görünen kart, Open Graph etiketleriyle belirlenir.

<meta property="og:title" content="Kodlama Kulübü">
<meta property="og:description" content="Her cuma Python ve HTML çalışıyoruz.">
<meta property="og:image" content="https://ornek.com/kapak.png">

og:image değeri tam adres olmalıdır, göreli yol kullanılmaz. Burada name yerine property yazıldığına dikkat edin.

Sık yapılan hatalar

Her sayfada aynı başlığı kullanmak. Sekmeler ve arama sonuçları birbirinden ayırt edilemez.

viewport satırını silmek. Sayfa telefonlarda küçülmüş bir masaüstü sayfası gibi görünür.

head içine görünür içerik yazmak. Görünür içerik her zaman body içine yazılır.

Soru 1

Sekmedeki küçük simgeyi hangi satır belirler?

<link rel="icon" href="favicon.png"> :: Doğru.
<meta name="description"> :: Bu sayfanın özetidir.
<title> :: Bu sekmenin yazısıdır.

Soru 2

Bir bağlantı WhatsApp’ta paylaşıldığında görünen kart hangi etiketlerle ayarlanır?

script :: Bu JavaScript dosyalarını bağlar.
Open Graph (og:) etiketleri :: Doğru.
h1 :: Bu sayfa içi başlıktır.

Soru 3

defer niteliği ne işe yarar?

Sayfanın dilini belirler :: Bunu lang yapar.
Resimleri geç yükler :: Bunu loading="lazy" yapar.
Kodun HTML okunduktan sonra çalışmasını sağlar :: Doğru.

Eksiksiz bir head

Tam bir sayfa yazın. Dil Türkçe olsun. Sekme başlığı Kodlama Kulübü olsun. Açıklama Her cuma kodlama yapıyoruz. olsun. Simge dosyası favicon.png olsun. Sayfada Hoş geldiniz yazan bir h1 bulunsun.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kodlama Kulübü</title>
  <meta name="description" content="Her cuma kodlama yapıyoruz.">
  <link rel="icon" href="favicon.png">
</head>
<body>
  <h1>Hoş geldiniz</h1>
</body>
</html>

Bu derste öğrendikleriniz

title ve description sayfanın arama sonuçlarındaki görünümünü etkiler.
link CSS dosyalarını ve simgeleri, script JavaScript dosyalarını bağlar.
Open Graph etiketleri paylaşım kartlarını belirler.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.