CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Canonical ve hreflang

HTML kursu · İleri seviye · Ders 27/56

<link rel="canonical"> ve hreflang ile çift içerik sorununu çözersin.

Canonical nedir?

Bazen aynı içerik birden fazla URL'den açılır: ?siralama=yeni, ?oturum=abc gibi parametrelerle. Arama motorları bunları farklı sayfa sanıp cezalandırabilir.

<link rel="canonical" href="..."> asıl URL'yi söyler. Arama motoru tüm kopyaları bu URL'nin altında birleştirir. Canonical her zaman mutlak URL olmalı. Bu sayede çift içerik cezasından korunursun.

hreflang ile dil sürümleri

Sayfanın Türkçe ve İngilizce sürümleri varsa <link rel="alternate" hreflang="tr"> ve hreflang="en" ile işaretlersin. Arama motoru kullanıcının diline göre doğru sürümü gösterir.

hreflang değeri ya dil kodudur (tr, en) ya da dil-bölge kodudur (tr-TR, en-US). Aynı sayfanın farklı dil sürümlerini birbirine bağlarsın.

Canonical yazarken dikkat

Canonical her zaman mutlak URL olmalı: https://... ile başla. Göreli URL (/yazi/...) kullanma; arama motoru farklı yorumlayabilir.

Her sayfa kendi URL'sini canonical olarak işaretler. Yanlışlıkla başka bir sayfayı canonical yapma; yoksa sayfan arama sonuçlarından kaybolur. hreflang ile birlikte kullanılırsa her dil sürümü kendi canonical'ını işaretler.

Uygulama Canonical ve hreflang etiketleri ekle

Head içine bir makale için üç link etiketi ekle: <link rel="canonical" href="https://..."> (asıl URL), <link rel="alternate" hreflang="tr" href="https://..."> (Türkçe sürüm) ve <link rel="alternate" hreflang="en" href="https://..."> (İngilizce sürüm).

Örnek çözümü göster 
<head>
  <title>Web Tasarımı Rehberi</title>
  <link rel="canonical" href="https://ayseblog.com/yazi/web-tasarimi">
  <link rel="alternate" hreflang="tr" href="https://ayseblog.com/yazi/web-tasarimi">
  <link rel="alternate" hreflang="en" href="https://ayseblog.com/yazi/web-tasarimi-en">
</head>

Kendini test et

  1. Canonical ne işe yarar?

    • Sayfayı daha hızlı yükler
    • Sayfaya görsel ekler
    • Sayfaya renk verir
    • Çift içerik sorununu çözer
    Cevabı göster

    Çift içerik sorununu çözer — Doğru. canonical, aynı içeriğe giden birden fazla URL'yi tek bir asıl URL'de birleştirir.

  2. Canonical etiketini tamamla

    <link rel="canonical" href="____">
    Cevabı göster 
    <link rel="canonical" href="https://ayseblog.com/yazi/web-tasarimi">

  3. Link ilişkisini rolüyle eşleştir

    rel="canonical"
    Asıl URL
    rel="alternate" hreflang="tr"
    Türkçe sürüm
    rel="alternate" hreflang="en"
    İngilizce sürüm
    rel="stylesheet"
    Stil dosyası

İleri seviye bölümündeki tüm dersler

1 İleri medya

  1. Loading lazy
  2. Decoding async
  3. Srcset ve sizes
  4. Width/height ve CLS
  5. Preload ve prefetch
  6. Özet - Performans galerisi

2 Picture ve responsive görsel

  1. Picture ve source
  2. Media özniteliği
  3. Type özniteliği
  4. Aspect-ratio
  5. Background ve img
  6. Özet - Responsive hero

3 Proje: Video oynatıcı

  1. Proje: Erişilebilir video oynatıcı
  2. Video iskeleti
  3. Track ve altyazı
  4. Poster ve önizleme
  5. Proje sonu - Video oynatıcı

4 Karmaşık formlar

  1. Form yönelimi
  2. Hidden input
  3. File upload
  4. Range ve color
  5. Output ve form event
  6. Özet - Ayarlar paneli

5 Meta veri ve SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical ve hreflang
  5. Title ve slug stratejisi
  6. Özet - SEO paketi

6 Proje: Schema.org işaretleme

  1. Proje: Schema.org işaretleme
  2. Itemtype ve itemid
  3. Itemprop
  4. Nested itemtype
  5. Proje sonu - Yapısal veri

7 Web bileşenleri HTML

  1. Template element
  2. Slot element
  3. Custom element isimleri
  4. Shadow DOM iskeleti
  5. Declarative shadow DOM
  6. Özet - Kart şablonu

8 Şablonlar ve partial

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript ve progressive
  6. Özet - Bileşen iskeleti

9 Proje: Dashboard widget

  1. Proje: Dashboard widget
  2. Widget iskeleti
  3. Veri görsel yapı
  4. Şablon ve slot
  5. Proje sonu - Widget

10 İleri seviye finali

  1. Meydan okuma - Responsive görsel
  2. Meydan okuma - Erişilebilir video
  3. Meydan okuma - Karmaşık form
  4. Meydan okuma - SEO ve yapısal veri
  5. Meydan okuma - İleri seviye projesi