CodeBlanks Logo Icon CodeBlanks

Meydan okuma - SEO ve yapısal veri

HTML kursu · İleri seviye · Ders 55/56

Bir ürüne tam SEO + Schema.org işaretleme paketi yazarsın.

SEO ve yapısal veri meydan okuması

Bu meydan okuma, SEO ve yapısal veriyi tüm yönleriyle yoklar: meta description, meta robots, Open Graph (og:title, og:image, og:type), Twitter Card (twitter:card, twitter:title, twitter:image), canonical, hreflang ile alternate, ve Schema.org mikro verisi (itemscope, itemtype, itemprop, itemid).

Bir ürün sayfasının <head>'sini tam SEO paketiyle doldurman, <body>'ye de ürünü mikro veriyle işaretlemen istenecek. Tüm sosyal medya etiketleri ve dil sürümleri eklenmeli.

Uygulama Ürün sayfasına tam SEO paketini ekle

Aşağıdaki iskeletin <head>'sine şu etiketleri ekle: <meta name="description" content="..."> (içine gerçek bir açıklama yaz); <meta name="robots" content="index, follow">; <meta property="og:title" content="...">; <meta property="og:image" content="/gorseller/roman.jpg">; <meta property="og:type" content="book">; <meta name="twitter:card" content="summary_large_image">; <meta name="twitter:title" content="...">; <meta name="twitter:image" content="/gorseller/roman.jpg">; <link rel="canonical" href="https://kitaplik.com/roman/elif-safak">; <link rel="alternate" hreflang="en" href="https://kitaplik.com/en/novel/sarah">; <link rel="alternate" hreflang="tr" href="https://kitaplik.com/roman/elif-safak">. <body>'ye bir <article itemscope itemtype="https://schema.org/Book" itemid="https://kitaplik.com/roman/elif-safak"> ekle; içine <h1 itemprop="name">Son Roman</h1> ve <p itemprop="author">Elif Şafak</p> koy.

Örnek çözümü göster
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <title>Roman İncelemesi</title>
  <meta name="description" content="Elif Şafak'ın son romanını inceliyoruz: konu, karakterler ve etkisi.">
  <meta name="robots" content="index, follow">
  <meta property="og:title" content="Elif Şafak'ın Son Romanı">
  <meta property="og:image" content="/gorseller/roman.jpg">
  <meta property="og:type" content="book">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Elif Şafak'ın Son Romanı">
  <meta name="twitter:image" content="/gorseller/roman.jpg">
  <link rel="canonical" href="https://kitaplik.com/roman/elif-safak">
  <link rel="alternate" hreflang="en" href="https://kitaplik.com/en/novel/sarah">
  <link rel="alternate" hreflang="tr" href="https://kitaplik.com/roman/elif-safak">
</head>
<body>
  <article itemscope itemtype="https://schema.org/Book" itemid="https://kitaplik.com/roman/elif-safak">
    <h1 itemprop="name">Son Roman</h1>
    <p itemprop="author">Elif Şafak</p>
  </article>
</body>
</html>

Kendini test et

  1. Bir sayfanın asıl (canonical) URL'sini arama motoruna bildiren etiket hangisidir?

    • <meta name="canonical" content="...">
    • <meta http-equiv="canonical" content="...">
    • <link rel="alternate" href="...">
    • <link rel="canonical" href="...">
    Cevabı göster

    <link rel="canonical" href="..."> — Doğru. <link rel="canonical"> asıl URL'yi bildirir; arama motoru kopyaları bu URL altında birleştirir.

  2. Open Graph title etiketini yaz

    <head>
      <meta property="____" content="Elif Şafak'ın Son Romanı">
      <meta property="og:image" content="/gorseller/roman.jpg">
    </head>
    Cevabı göster
    <head>
      <meta property="og:title" content="Elif Şafak'ın Son Romanı">
      <meta property="og:image" content="/gorseller/roman.jpg">
    </head>
  3. SEO etiketini rolüyle eşleştir

    canonical
    Asıl URL
    hreflang
    Dil sürümü
    og:image
    Sosyal önizleme görseli
    twitter:card
    Kart türü
    itemprop
    Özellik adı

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