HTML Mikroveriler
HTML Mikroveriler (Microdata), web sayfalarında içeriğin anlamını makinelere daha iyi anlatmak için kullanılan yapısal veri biçimidir. Arama motorları ve diğer veri işleyiciler, mikroveriler sayesinde sayfanın hangi parçasının ne anlama geldiğini daha kolay çözümler. Bu da SEO performansını artırır ve arama sonuçlarında zengin içerik (rich snippets) olarak görünmeyi sağlar. Kişisel web sitelerinde, bloglarda, e-ticaret platformlarında ve haber sitelerinde mikroveriler, içeriklerin doğru şekilde kategorize edilip kullanıcıya sunulması için kritik öneme sahiptir.
Mikroveriler, bir evi inşa etmek gibi düşünülebilir; temel HTML yapısı evi oluştururken, mikroveriler o evin odalarının ne işe yaradığını, içindeki eşyaların ne olduğunu ayrıntılı şekilde açıklayan etiketler gibidir. Yazarken mektup yazmak gibi, mikroverilerle sayfa içeriğini düzenlemek, hem insanlar hem makineler için daha anlaşılır hale getirir. Bu eğitimde, mikroverilerin nasıl kullanıldığı, temel yapıları ve gelişmiş uygulamalarıyla web sayfalarınızı nasıl güçlendireceğinizi öğreneceksiniz.
Temel Örnek
html<!DOCTYPE html>
<html lang="tr">
<head><title>Temel Mikroveri Örneği</title></head>
<body itemscope itemtype="http://schema.org/Person">
<h1 itemprop="name">Ahmet Yılmaz</h1>
<p>Mail: <span itemprop="email">[email protected]</span></p>
<p>Meslek: <span itemprop="jobTitle">Yazılım Geliştirici</span></p>
</body>
</html>
<!-- Defines a Person entity with name, email, and job title properties -->Yukarıdaki örnek, bir "Person" (Kişi) varlığını tanımlar. itemscope, bu veri bloğunun mikroveri olduğunu belirtir. itemtype, schema.org’dan Person tipini seçerek bu varlığın bir kişi olduğunu belirtir. İçerideki itemprop öznitelikleri ise bu kişinin özelliklerini temsil eder: "name" (isim), "email" (e-posta) ve "jobTitle" (meslek). Böylece arama motorları bu bilgileri standart bir yapıda algılar.
itemscope ve itemtype birlikte varlığın kapsamını ve türünü belirler. itemprop ise varlığın spesifik özelliklerini ifade eder. Bu sayede sayfa sadece görsel değil, aynı zamanda anlamlı verilerle zenginleşir. Özellikle kişisel web sitelerinde veya bloglarda bu yapı, arama sonuçlarında öne çıkmak için önemlidir. Başlangıçta karmaşık görünebilir ancak temel mantığı basittir: varlık tanımlanır, özellikleri etiketlenir.
Pratik Örnek
html<!DOCTYPE html>
<html lang="tr">
<head><title>Ürün Mikroveri Örneği</title></head>
<body itemscope itemtype="http://schema.org/Product">
<h2 itemprop="name">Kablosuz Kulaklık</h2>
<img src="kulaklik.jpg" alt="Kablosuz Kulaklık" itemprop="image">
<p>Fiyat: <span itemprop="price" content="299.99">299,99 TL</span></p>
<p>Açıklama: <span itemprop="description">Bluetooth 5.0 destekli, uzun pil ömürlü kulaklık.</span></p>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<link itemprop="availability" href="http://schema.org/InStock">Stokta Var</link>
<time itemprop="priceValidUntil" datetime="2025-12-31">31 Aralık 2025'e kadar geçerlidir</time>
</div>
</body>
</html>Bu örnek, bir e-ticaret sitesinde ürünün mikroverilerle tanımlanmasını gösterir. itemscope ve itemtype ile ürün varlığı belirtilir. itemprop ile ürünün adı, resmi, fiyatı ve açıklaması etiketlenir. Ayrıca, ürünün bir "Offer" (Teklif) alt varlığı ile stok durumu ve fiyat geçerlilik tarihi belirtilir. Bu sayede arama motorları ürün bilgilerini daha zengin ve doğru gösterir.
content özniteliği fiyat gibi değerlerin makinelere anlaşılır formatta iletilmesini sağlar. datetime ise tarihlerin standart biçimde yazılması için kullanılır. Böylece hem kullanıcılar hem de robotlar sayfa içeriğini doğru yorumlar. Bu tür yapılandırılmış veri kullanımı, haber siteleri ve bloglarda da etkin bir biçimde kullanılabilir.
İyi uygulamalar:
- HTML semantiğine uygun ve temiz yapı kullanın, gereksiz öğelerle mikroveri bloğunu karmaşıklaştırmayın.
- itemscope ve itemtype kullanımı kesin olmalı, doğru schema.org tipleri seçilmeli.
- Tüm önemli özellikleri (itemprop) eksiksiz doldurun, eksik veri arama sonuçlarında eksiklik yaratır.
- Kodunuzu Google Rich Results Test gibi araçlarla test edin.
Kaçınılması gerekenler:
- Mikroveri dışı içeriklerde itemprop kullanımı, bu anlam karmaşası yaratır.
- itemtype veya itemscope un atlanması, verilerin algılanmamasına neden olur.
- Yanlış hiyerarşi veya iç içe geçmiş yapılar bozulmuş anlam yaratır.
- Mutlaka tam URL ile itemtype yazılmalı, aksi takdirde anlamsız kalır.
Hataları bulmak için tarayıcı eklentileri ve online validator’lar önerilir.
📊 Hızlı Referans
| Property/Method | Description | Example |
|---|---|---|
| itemscope | Mikroveri bloğunun başlangıcını belirtir | <div itemscope>...</div> |
| itemtype | Varlık tipini belirtir (genellikle schema.org URL’si) | itemscope itemtype="[http://schema.org/Product](http://schema.org/Product)" |
| itemprop | Varlığın özelliklerini tanımlar | <span itemprop="price">199</span> |
| content | Makine tarafından okunacak değer sağlar | <meta itemprop="price" content="199.99"> |
| datetime | Tarih/saat verilerini standart formatta tutar | <time itemprop="priceValidUntil" datetime="2025-12-31">31 Ara 2025</time> |
Özet ve sonraki adımlar
HTML mikroveriler, web sayfalarınızı hem insanlar hem de makineler için daha anlaşılır kılarak SEO’yu ve kullanıcı deneyimini artırır. Temel yapılar öğrenildikten sonra, mikroverilerin CSS ile görünüm, JavaScript ile etkileşim açısından nasıl tamamlayıcı olduğunu keşfetmek faydalı olur.
Sonraki adımlar olarak JSON-LD veri biçimini, ARIA etiketleriyle erişilebilirlik geliştirmelerini ve schema.org dışında diğer vocabularies (örneğin Dublin Core) kullanımı araştırılabilir.
Sürekli pratik yapmak, değişen standartları takip etmek ve doğrulama araçları ile test etmek başarının anahtarıdır.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu konudaki anlayışınızı pratik sorularla test edin.
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek