CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Itemprop

HTML kursu · İleri seviye · Ders 32/56

headline, datePublished, author itemprop'larını kullanırsın.

itemprop nedir?

Bir öğeye tip verdikten sonra içeriğini itemprop ile parçalara ayırırsın. Her itemprop bir özellik adı taşır.

Bir makalede yaygın üç özellik:

  • headline — makale başlığı (h1'e eklenir)
  • datePublished — yayın tarihi (time'a eklenir)
  • author — yazar (span'a eklenir)

Örnek: <h1 itemprop="headline">...</h1>. Arama motorları bu sayede başlığın makalenin başlığı olduğunu anlar.

itemprop değerini doğru öğeye koy

itemprop adı kadar yeri de önemlidir. headline başlık öğesine, datePublished zaman öğesine konmalıdır.

Yanlış öğeye koyduğun itemprop arama motorunu yanıltır. <span itemprop="author">Ayşe Yılmaz</span> biçiminde, yazar adını içeren öğeye author değeri verilir.

İçerik dolu olmalı: boş bir itemprop işe yaramaz.

Uygulama h1, time ve yazar span'ına itemprop ekle

Önceki adımın makalesini al. <h1>'e itemprop="headline", <time>'a itemprop="datePublished" ekle.

Ayrıca yeni bir <span itemprop="author">Ayşe Yılmaz</span> etiketi ekle ve yazar adını taşıdığını belirt.

Örnek çözümü göster 
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Yapay Zeka Çağında Eğitim</title>
  </head>
  <body>
    <article itemscope itemtype="https://schema.org/Article" itemid="/yazilar/yapay-zeka-caginda-egitim">
      <h1 itemprop="headline">Yapay Zeka Çağında Eğitim</h1>
      <p>Yayın tarihi: <time itemprop="datePublished">2026-03-15</time></p>
      <p>Yazar: <span itemprop="author">Ayşe Yılmaz</span></p>
      <p>Yapay zeka, sınıflarda öğretmenle öğrenci arasındaki ilişkiyi değiştiriyor.</p>
    </article>
  </body>
</html>

Kendini test et

  1. Makale başlığı için hangi itemprop kullanılır?

    <h1 itemprop="...">Başlık</h1>
    • headline
    • title
    • name
    • heading
    Cevabı göster

    headline — Doğru. Article tipinde başlık özelliği headline ile adlandırılır.

  2. h1 etiketine headline itemprop ekle

    <h1 ____>Yapay Zeka Çağında Eğitim</h1>
    Cevabı göster 
    <h1 itemprop="headline">Yapay Zeka Çağında Eğitim</h1>

  3. itemprop değerini içeriğiyle eşleştir

    headline
    Makale başlığı
    datePublished
    Yayın tarihi
    author
    Yazar
    name
    Kişi/kuruluş adı

İ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