Mobil SEO ve Yapısal Veri

📚 Seviye 2 — Uygulama ⏱ ~12 dakika

1. Mobile-First Indexing

Google, 2019'dan itibaren tüm yeni sitelerde ve 2023'ten itibaren tüm sitelerde "mobile-first indexing" kullanıyor. Bu ne demek? Google, sitenin sıralama değerini belirlerken masaüstü versiyonuna değil, mobil versiyonuna bakıyor.

a) Ne Anlama Geliyor?

Mobil versiyonda eksik içerik varsa, Google o içeriği görmez.
Mobilde gizlenen metin veya görseller sıralamaya katkı sağlamaz.
Mobil performans (site hızı, CWV) doğrudan sıralamayı etkiler.
Structured data (yapısal veri) mobil versiyonda da bulunmalı.

b) Kontrol Listesi

Mobil ve masaüstü aynı içeriğe sahip mi? (Responsive design kullanıyorsan otomatik çözülür)
Mobilde tıklanabilir alanlar yeterince büyük mü? (En az 48x48 piksel)
Font boyutu okunabilir mi? (Minimum 16px)
Yatay kaydırma sorunu var mı?

⚠️ Uyarı: Separate Mobile Site

Eski yöntemlerle ayrı bir mobil site (m.ornek.com) kullanıyorsanız, masaüstü sitedeki içerik mobilde yoksa Google onu görmez. En iyi çözüm responsive design'a geçiştir. Responsive design tek bir URL'de tüm cihazlara uyum sağlar.

2. Responsive Design

Responsive (duyarlı) tasarım, sitenin ekran boyutuna göre otomatik uyum sağlamasıdır. Google'ın resmi olarak önerdiği yaklaşımdır.

a) Neden Responsive?

Tek URL: Aynı URL tüm cihazlarda çalışır — link equity bölünmez.
Tek içerik: Masaüstü ve mobil aynı HTML — tutarsızlık riski yok.
Google önerisi: Google resmi olarak responsive design'ı tercih ediyor.
Kolay yönetim: Tek site güncellemek iki ayrı versiyondan daha kolay.

b) Viewport Meta Tag

Responsive tasarımın çalışması için HTML'de viewport meta tag olmalı:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bu tag olmadan mobil tarayıcılar sayfayı masaüstü boyutunda render edip küçültür — kullanıcı deneyimi kötü olur.

graph TD MI["📱 Mobile-First Indexing"] RD["Responsive Design
Tek URL, tüm cihazlar"] SD["Separate URLs
m.ornek.com
❌ Önerilmez"] DD["Dynamic Serving
Aynı URL, farklı HTML
⚠️ Karmaşık"] MI --> RD MI --> SD MI --> DD RD --> R1["✅ Link equity korunur"] RD --> R2["✅ Tek içerik yönetimi"] RD --> R3["✅ Google önerisi"] SD --> S1["❌ Link equity bölünür"] SD --> S2["❌ İçerik tutarsızlığı"] style MI fill:#29ABE2,stroke:#1E8EBF,color:#fff,stroke-width:2px style RD fill:#DCFCE7,stroke:#22C55E,stroke-width:2px style SD fill:#FEE2E2,stroke:#EF4444,stroke-width:2px style DD fill:#FEF3C7,stroke:#F59E0B,stroke-width:2px

3. Schema.org ve Yapısal Veri

Yapısal veri (Structured Data), sayfanın içeriğini arama motorlarının daha iyi anlaması için eklenen makinenin okuyabileceği koddur. Schema.org, yapısal veri için standart söz dağarcığıdır.

a) JSON-LD Formatı

Google'ın tercih ettiği format JSON-LD'dir. Sayfanın <head> veya <body> bölümüne <script type="application/ld+json"> etiketi ile eklenir.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "DişPlus Diş Kliniği",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Bağdat Caddesi No: 123",
    "addressLocality": "Kadıköy",
    "addressRegion": "İstanbul",
    "postalCode": "34710",
    "addressCountry": "TR"
  },
  "telephone": "+90-216-555-1234",
  "openingHoursSpecification": {
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "09:00",
    "closes": "18:00"
  },
  "priceRange": "₺₺"
}
</script>

💡 Benzetme: Etiketleme

Yapısal veri, bir kargonun üzerindeki barkod ve etiket gibidir. Kargo şirketi paketi açmadan da ne olduğunu, nereye gideceğini, ne kadar ağır olduğunu anlar. Google da yapısal veri sayesinde sayfanın içeriğini "açmadan" (tam okumadan) anlayabilir ve zengin sonuçlar (rich results) gösterebilir.

4. Yaygın Schema Türleri

a) Organization

Şirket/marka bilgileri. Logo, iletişim, sosyal medya hesapları.

b) Article

Blog yazıları ve haber makaleleri için. Yazar, yayın tarihi, başlık bilgilerini içerir. Google Haberler ve Discover'da görünürlüğü artırır.

c) Product

E-ticaret ürünleri için. Fiyat, stok durumu, değerlendirme puanı. Arama sonuçlarında fiyat ve yıldız gösterir.

d) FAQ

Sıkça sorulan sorular. Arama sonuçlarında soru-cevap açılır kutuları gösterir — çok değerli SERP alanı kazandırır.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Diş implant ağrılı mıdır?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Lokal anestezi altında yapıldığı için işlem sırasında ağrı hissedilmez. Sonrasında hafif bir ağrı olabilir ancak ağrı kesicilerle kontrol altına alınır."
      }
    },
    {
      "@type": "Question",
      "name": "İmplant ne kadar sürer?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Kaliteli bakım ile diş implantlar 15-25 yıl hatta ömür boyu dayanabilir."
      }
    }
  ]
}
</script>

e) Breadcrumb

Sayfa yol haritası. Arama sonuçlarında URL yerine gezinme yolunu gösterir.

f) LocalBusiness

Yerel işletmeler için. Adres, telefon, çalışma saatleri, fiyat aralığı. Yerel SEO için çok önemli — Google Haritalar ve yerel arama sonuçlarıyla entegredir.

graph TD SD["🏗️ Yapısal Veri Türleri"] ORG["Organization
Marka, logo,
sosyal medya"] ART["Article
Blog, haber,
yazar, tarih"] PRD["Product
Fiyat, stok,
yıldız puanı"] FAQ["FAQ
Soru-cevap
açılır kutu"] BRD["Breadcrumb
Gezinme yolu"] LB["LocalBusiness
Adres, saat,
telefon"] SD --> ORG SD --> ART SD --> PRD SD --> FAQ SD --> BRD SD --> LB ORG --> R1["🌐 Bilgi paneli"] PRD --> R2["⭐ Fiyat + yıldız"] FAQ --> R3["❓ Açılır soru kutusu"] LB --> R4["📍 Harita sonuçları"] style SD fill:#29ABE2,stroke:#1E8EBF,color:#fff,stroke-width:2px style ORG fill:#E8F6FC,stroke:#29ABE2,stroke-width:2px style ART fill:#E8F6FC,stroke:#29ABE2,stroke-width:2px style PRD fill:#FEF3C7,stroke:#F59E0B,stroke-width:2px style FAQ fill:#DCFCE7,stroke:#22C55E,stroke-width:2px style BRD fill:#F5F7FA,stroke:#64748B,stroke-width:2px style LB fill:#FEF3C7,stroke:#F59E0B,stroke-width:2px

5. Uygulama Yöntemleri

a) Manuel Ekleme

JSON-LD kodunu doğrudan HTML'e eklemek. En temiz yöntem ama teknik bilgi gerektirir.

b) CMS Eklentileri

WordPress: Yoast SEO, Rank Math — arayüzden kolayca schema ekle.
Shopify: Dahili Product schema var, ek eklentilerle genişletilebilir.
Wix/Squarespace: Sınırlı yapısal veri desteği, özel kod ekleme alanı kullan.

c) Google Tag Manager ile

Custom HTML tag olarak JSON-LD eklenebilir. Avantajı: siteye kod müdahalesi gerekmez, GTM üzerinden yönetilir. Dezavantajı: JavaScript ile enjekte edildiği için Google'ın görememe riski (düşük ama var).

6. Rich Results Test ile Doğrulama

Yapısal veriyi ekledikten sonra mutlaka test et. Google'ın Rich Results Test aracı (search.google.com/test/rich-results) sayfanın yapısal verisini analiz eder:

Hangi schema türleri tespit edildi?
Hata veya uyarı var mı? (Eksik alan, yanlış format)
Zengin sonuç (rich result) gösterilmeye uygun mu?

📌 Pratik İpucu

Yapısal veri ekledikten sonra Google'ın bunu işlemesi zaman alır. Rich Results Test'te hata yoksa Search Console'dan "URL Denetimi" yap ve yeniden dizinleme iste. Zengin sonuçların aktif olup olmadığını Search Console'un "Geliştirmeler" bölümünden takip edebilirsin. Her schema türü için ayrı rapor gösterir.

⚠️ Uyarı: Spam Yapısal Veri

Yapısal veride yanlış veya yanıltıcı bilgi verme. Fiyatı farklı göstermek, sahte yıldız puanı eklemek veya sayfada olmayan içerik için FAQ schema kullanmak Google'ın yapısal veri özelliğini kaldırmasına ve hatta siteye ceza vermesine yol açabilir.

7. Dinamik Mikro Data (Otomatik Yapısal Veri)

Her sayfa için tek tek mikro data yazmak pratik değildir. 500 blog yazısı olan bir sitede her birine elle Article schema yazmak imkansızdır. Çözüm: dinamik mikro data — CMS veya GTM ile yapısal veriyi otomatik oluşturma.

a) Sorun: Manuel Schema Yönetimi

Küçük siteler (5-10 sayfa) için JSON-LD kodunu her sayfaya elle eklemek mümkündür. Ancak:

Yüzlerce blog yazısı olan sitelerde her biri için ayrı schema yazmak zaman kaybıdır.
Yeni içerik eklendiğinde schema'yı unutma riski vardır.
Bilgiler değiştiğinde (fiyat, tarih) güncellemeyi kaçırma ihtimali yüksektir.
İnsan hatası riski artar — yanlış tarih, yanlış URL, eksik alan.

b) Çözüm 1: CMS Eklentileri ile Otomatik Schema

WordPress gibi CMS'lerde eklentiler yapısal veriyi otomatik olarak oluşturur:

Yoast SEO: Article, Organization, Breadcrumb schema'larını otomatik ekler. Sayfa türüne göre uygun schema seçer.
Rank Math: 20+ schema türünü destekler. Ürün, tarif, etkinlik gibi özel türler için arayüz sunar.
Avantaj: Teknik bilgi gerektirmez, her yeni içerik otomatik schema alır.
Dezavantaj: Özelleştirme sınırlı olabilir, eklenti bağımlılığı oluşur.

c) Çözüm 2: GTM ile Dinamik Schema Oluşturma

Google Tag Manager üzerinden Custom HTML tag ile JSON-LD oluşturabilir ve değişkenleri dinamik olarak çekebilirsin. Bu yöntem CMS bağımsız çalışır ve çok esnek bir yapı sunar.

Dinamik olarak çekilebilecek alanlar:

Dinamik başlık: {{Page Title}} veya document.title ile sayfanın başlığını çek.
Dinamik yazar adı: dataLayer'dan (dataLayer.push({authorName: 'Yazar Adı'})) veya meta tag'dan (<meta name="author">) çek.
Dinamik yayın tarihi: <meta property="article:published_time"> veya dataLayer'dan çek.
Dinamik URL: window.location.href ile mevcut sayfanın URL'sini al.
Dinamik görsel: <meta property="og:image"> tag'ından görselin URL'sini çek.

d) GTM ile Dinamik Article Schema Örneği

GTM'de "Custom HTML" tag'ı oluştur ve aşağıdaki kodu ekle:

<script>
// Meta tag'lardan bilgileri çek
var title = document.title;
var url = window.location.href;
var ogImage = document.querySelector('meta[property="og:image"]');
var imageUrl = ogImage ? ogImage.content : '';
var pubDate = document.querySelector('meta[property="article:published_time"]');
var publishedDate = pubDate ? pubDate.content : '';
var authorMeta = document.querySelector('meta[name="author"]');
var authorName = authorMeta ? authorMeta.content : '';

// JSON-LD oluştur ve sayfaya ekle
var schema = {
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": title,
  "author": {"@type": "Person", "name": authorName},
  "datePublished": publishedDate,
  "image": imageUrl,
  "url": url
};

var script = document.createElement('script');
script.type = 'application/ld+json';
script.text = JSON.stringify(schema);
document.head.appendChild(script);
</script>

📌 GTM Trigger Ayarı

Bu tag'ı sadece blog sayfalarında tetiklemek için GTM'de "Page Path" koşulu ekle: Page Path contains /blog/. Böylece ana sayfa veya iletişim sayfasında gereksiz Article schema oluşmaz.

e) En Yaygın Mikro Data Türleri ve Kullanım Alanları

Schema Türü	Kullanım Alanı	Zengin Sonuç
Article / BlogPosting	Blog yazıları, makaleler	Yazar adı, tarih, görsel
Product + Offer	E-ticaret ürünleri	Fiyat, stok durumu, yıldız puanı
LocalBusiness	Yerel işletmeler	Adres, çalışma saatleri, telefon
FAQ	SSS sayfaları	Açılır kapanır soru-cevap kutuları
HowTo	Nasıl yapılır içerikleri	Adım adım görsel görünüm
BreadcrumbList	Tüm sayfalar	Breadcrumb navigasyonu
Organization	Ana sayfa	Logo, sosyal medya linkleri
Review / AggregateRating	Yorum sayfaları	Yıldız puanı

f) Test ve Doğrulama

Google Rich Results Test: search.google.com/test/rich-results — sayfanın zengin sonuç gösterilmeye uygun olup olmadığını kontrol eder.
Schema Markup Validator: validator.schema.org — schema.org standartlarına uygunluğu denetler.
GTM ile eklenen schema'yı test ederken "URL" seçeneği yerine "Kod" seçeneğini kullan ve sayfanın render edilmiş HTML'ini yapıştır.

graph LR CMS["📦 CMS / dataLayer
Başlık, yazar, tarih,
görsel, URL bilgileri"] GTM["⚙️ GTM Değişkeni
Bilgileri çeker
ve eşleştirir"] JSON["📝 JSON-LD Şablonu
Dinamik alanlar
doldurulur"] GOOGLE["🔍 Google Tarayıcı
Yapısal veriyi
okur ve işler"] RICH["⭐ Zengin Sonuç
Arama sonuçlarında
gelişmiş görünüm"] CMS --> GTM GTM --> JSON JSON --> GOOGLE GOOGLE --> RICH style CMS fill:#E8F6FC,stroke:#29ABE2,stroke-width:2px style GTM fill:#FEF3C7,stroke:#F59E0B,stroke-width:2px style JSON fill:#DCFCE7,stroke:#22C55E,stroke-width:2px style GOOGLE fill:#29ABE2,stroke:#1E8EBF,color:#fff,stroke-width:2px style RICH fill:#DCFCE7,stroke:#22C55E,stroke-width:2px

⚠️ Dikkat: Dinamik Schema Riskleri

Dinamik schema oluştururken dikkatli ol: (1) Boş alanlar — meta tag yoksa boş değer gider, Google hata verir. Mutlaka kontrol ekle. (2) Çift schema — hem CMS eklentisi hem GTM ile aynı türde schema ekleme. (3) Test et — her yeni şablon sonrası Rich Results Test ile doğrula.

📝 Quiz — Bilgini Test Et

← Önceki Ders Sonraki Ders →