CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Proje sonu - Yapısal veri

HTML kursu · İleri seviye · Ders 34/56

Bir makaleye tam Schema.org işaretlemesini ekleyip dokümante edersin.

Son adım: yayıncı ve özet

Son adımda öğrendiklerini birleştirip makaleye yayıncı ekleyeceksin. Yayıncı, makaleyi yayımlayan kuruluştur ve Organization tipiyle işaretlenir.

Aynı iç içe yöntemi kullanırsın: dış span'a itemprop="publisher" itemscope itemtype verir, iç span'a itemprop="name" ile kuruluş adını koyarsın.

Son olarak makalenin başına kısa bir HTML yorumu ekleyip yapısal verinin başladığını belirtirsin. Bu, kodu okuyanlara yardımcı olur.

Yorum ile dokümante et

Yapısal veri ekledikçe HTML kalabalıklaşır. Kodu okuyanlara yardımcı olmak için HTML yorumları ekleyebilirsin.

Bir yorum <!-- ... --> biçimindedir ve tarayıcıda görünmez. Makalenin başına <!-- Yapısal veri: Schema.org Article işaretleme --> gibi bir not koyarsan, dosyayı açan kişi içerikte yapısal veri olduğunu hemen görür.

Yorumlar içerik değiştirmeden kodu anlatır.

Uygulama Yayıncı ekle ve yapısal veriyi yorumla belirt

Önceki adımın makalesini al. Author paragrafından sonra yeni bir <p> ve içine iç içe Organization yapısı ekle:

Dış span: itemprop="publisher" itemscope itemtype="https://schema.org/Organization". İç span: itemprop="name" ile yayıncı adı (ör. Eğitim Yayınları).

Ayrıca <article>'den önce kısa bir HTML yorumu ekle ve yapısal verinin başladığını belirt (ör. <!-- Yapısal veri: Schema.org Article işaretleme -->).

Ö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>
    <!-- Yapısal veri: Schema.org Article işaretleme -->
    <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" itemscope itemtype="https://schema.org/Person"><span itemprop="name">Ayşe Yılmaz</span></span></p>
      <p>Yayıncı: <span itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><span itemprop="name">Eğitim Yayınları</span></span></p>
      <p>Yapay zeka, sınıflarda öğretmenle öğrenci arasındaki ilişkiyi değiştiriyor.</p>
    </article>
  </body>
</html>

Proje tamam!

Tebrikler! Beş derslik projeyi tamamladın. Artık elinde Schema.org ile tam işaretlenmiş bir makale var.

Öğrendiklerin:

  • itemscope ile kapsam açma
  • itemtype ile tip belirtme
  • itemid ile benzersiz kimlik
  • itemprop ile özellik ekleme
  • İç içe Person ve Organization tipleri

Bu yöntemi haber, blog yazısı, ürün ve etkinlik sayfalarına da uygulayabilirsin.

Kendini test et

  1. Yayıncı kuruluş için hangi tip kullanılır?

    <span itemprop="publisher" itemscope itemtype="...">
    • https://schema.org/Person
    • https://schema.org/Organization
    • https://schema.org/Article
    • https://schema.org/Event
    Cevabı göster

    https://schema.org/Organization — Doğru. Yayıncı bir kuruluş olduğundan Organization tipi kullanılır.

  2. Organization tipinin URL'ini tamamla

    <span itemprop="publisher" itemscope itemtype="____"><span itemprop="name">Yayıncı</span></span>
    Cevabı göster 
    <span itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><span itemprop="name">Yayıncı</span></span>

  3. Tipi işaretlediği varlıkla eşleştir

    Article
    İşaretlenen makale
    Person
    Yazar
    Organization
    Yayıncı
    name
    Alt özellik

İ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