Proje: Schema.org işaretleme

HTML kursu · İleri seviye · Ders 30/56

5 derslik projenin genel bakışı: yapısal veri işaretleme.

Proje: Schema.org işaretleme

Bu 5 derslik projede bir haber makalesine Schema.org ile yapısal veri işaretlemesi ekleyeceksin. Her ders bir parça ekler; son derste tam işaretli bir makale elinde olur.

Proje boyunca Yapay Zeka Çağında Eğitim başlıklı makaleyi kullanacağız.

Yol haritası:

Ders 1: Makale iskeleti
Ders 2: itemscope ve itemtype
Ders 3: itemprop değerleri
Ders 4: İç içe Person tipi
Ders 5: Yayıncı ve özet

Yapısal veri nedir?

Arama motorları sayfanın HTML'ini okur ama her zaman ne anlama geldiğini bilemez. Bir <h1>'nin makale başlığı mı yoksa site adı mı olduğunu yorumlamak zorundadır.

Yapısal veri bu belirsizliği ortadan kaldırır. Schema.org sözlüğüyle içeriklere tip ve özellik verirsin; arama motorları da sayfanı doğru anlar.

Bu projede mikroveri (microdata) yöntemini kullanacağız: HTML etiketlerine itemscope, itemtype ve itemprop gibi öznitelikler ekleyerek.

Mikroveri yöntemi

Yapısal veriyi HTML'e eklemenin birkaç yolu var. Bu projede mikroveri (microdata) yöntemini kullanacağız.

Mikroveri, HTML etiketlerine üç öznitelik ekler:

itemscope — yeni bir kapsam başlatır
itemtype — tipi belirtir (URL olarak)
itemprop — bir özelliği adlandırır

Bu üç öznitelik sıradan HTML etiketlerinin yanına eklenir; sayfanın görünümünü değiştirmez. Sonraki derslerde bunları sırayla öğreneceksin.

Uygulama Makale iskeletini yaz

Boş bir HTML belge iskeleti yaz: <!DOCTYPE html>, <html lang="tr">, <head> (içinde dolu bir <title>) ve <body>.

body içinde bir <article> etiketi aç; içine bir <h1> (makale başlığı) ve bir <time> (yayın tarihi) koy.

Ö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>
      <h1>Yapay Zeka Çağında Eğitim</h1>
      <p>Yayın tarihi: <time>2026-03-15</time></p>
      <p>Yapay zeka, sınıflarda öğretmenle öğrenci arasındaki ilişkiyi değiştiriyor.</p>
    </article>
  </body>
</html>

Kendini test et

Yapısal veri işaretleme ne işe yarar?
- Sayfaya görsel ve renk ekler
- İçeriğin anlamını arama motorlarına açıkça söyler
- Sayfanın yüklenme hızını artırır
- CSS stillerini otomatik üretir
Cevabı göster

İçeriğin anlamını arama motorlarına açıkça söyler — Doğru. Yapısal veri, içeriğin tipini ve özelliklerini tanımlar.
Dersi eklediği parçayla eşleştir

Ders 1

Belge iskeleti
Ders 2

itemscope ve itemtype
Ders 3

itemprop değerleri
Ders 4

İç içe Person tipi
Ders 5

Yayıncı Organization

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

Proje: Schema.org işaretleme