JSON-LD Schema Markup & Rich Snippets Generator
Google Zengin Sonuçlar (Rich Snippets) ve yapay zeka arama motorları (AEO) için hatasız Schema.org etiketleri oluşturun. Article, FAQPage, SoftwareApplication, Organization, Person ve HowTo şemalarını Next.js 15 uyumlu JSX olarak anında kopyalayın.
JSON-LD Schema Markup, Zengin Sonuçlar (Rich Snippets) ve AEO Rehberi
Arama motorlarının ve modern yapay zeka ajanlarının (ChatGPT Search, Perplexity, Google AI Overviews) web sayfalarını doğru anlayabilmesi için düz HTML yeterli değildir.JSON-LD (JavaScript Object Notation for Linked Data); sayfa verilerini Schema.org standartlarında semantik olarak yapılandırarak SERP'te yıldızlı değerlendirmeler, SSS akordeonları, ürün fiyatları ve doğrudan cevap kartları (Rich Results) kazanmanızı sağlar.
1. Neden Microdata veya RDFa Değil de JSON-LD?
Eski SEO yöntemlerinde kullanılan itemscope ve itemprop gibi Microdata öznitelikleri, doğrudan HTML etiketlerinin içine gömüldüğü için hem sayfa DOM boyutunu şişiriyor hem de React veya Next.js gibi bileşen tabanlı modern framework'lerde bakım kabusu yaratıyordu. Google, resmi geliştirici belgelerinde JSON-LD formatını birinci sınıf önerilen standart olarak duyurmuştur:
- DOM Temizliği: HTML yapısından tamamen bağımsız tek bir
<script type="application/ld+json">etiketi içinde çalışır. - SSR & Edge Uyumu: Next.js Server Components (RSC) ile doğrudan sunucuda derlenip tarayıcıya hazır gönderilir.
- Dinamik Veri Kolaylığı: CMS, headless API veya veritabanından gelen veriler JavaScript objesi olarak kolayca şemaya dönüştürülür.
2. Desteklenen 7 Temel Şema Türü ve SERP Görünümü
Bu jeneratör aracılığıyla oluşturabileceğiniz şemalar ve Google arama sonuçlarındaki karşılıkları:
| Şema Türü | Schema.org @type | SERP Zengin Sonuç Kazanımı | Hedef Kullanım |
|---|---|---|---|
| Makale & Blog | Article / TechArticle | Google Discover, News carousel, yazar adı ve büyük kapak görseli. | Blog yazıları, haberler ve teknik makaleler. |
| Sıkça Sorulan Sorular | FAQPage | Arama sonucunun altında açılır-kapanır soru-cevap sekmeleri (SERP piksel işgali). | Ürün sayfaları, hizmet tanıtımları ve SSS sayfaları. |
| Yazılım & Web Aracı | SoftwareApplication | Yıldızlı kullanıcı puanı (rating), fiyat, platform ve uygulama kategorisi. | SaaS platformları, interaktif web araçları, mobil uygulamalar. |
| Kurum & Şirket | Organization | Google Knowledge Graph (Bilgi Paneli), şirket logosu ve resmi sosyal profiller. | Ana sayfa, hakkında sayfası ve kurumsal iletişim. |
| Kişi & Uzman Profili | Person | Yazar otoritesi (Google E-E-A-T), unvan ve sosyal medya bağlantıları. | Kişisel portfolyo, yazar biyografisi ve uzman sayfaları. |
| Ekmek Kırıntısı | BreadcrumbList | URL yerine tıklanabilir hiyerarşik site gezinti yolu (> Kategori > Sayfa). | Tüm alt sayfalar ve e-ticaret kategori hiyerarşisi. |
| Adım Adım Rehber | HowTo | Görselli adım listeleri ve tahmini tamamlanma süreleri. | Nasıl yapılır kılavuzları, kurulum ve entegrasyon rehberleri. |
3. Next.js 15 App Router İçerisine JSON-LD Nasıl Entegre Edilir?
Next.js App Router'da şemayı app/layout.tsx veya ilgili app/[slug]/page.tsx Server Component'i içine yerleştirmek son derece kolaydır:
// app/blog/[slug]/page.tsx (Next.js 15 Server Component)
export default async function BlogPostPage({ params }: { params: { slug: string } }) {
const post = await getPost(params.slug)
const articleJsonLd = {
'@context': 'https://schema.org',
'@type': 'TechArticle',
headline: post.title,
description: post.summary,
image: post.featuredImage,
datePublished: post.publishedAt,
dateModified: post.updatedAt,
author: {
'@type': 'Person',
name: 'İsmail Hakkı EREN',
url: 'https://ismailhakkieren.com',
},
publisher: {
'@type': 'Organization',
name: 'İsmail Hakkı EREN',
logo: {
'@type': 'ImageObject',
url: 'https://ismailhakkieren.com/logo.png',
},
},
}
return (
<>
{/* Sunucu taraflı hatasız şema basımı */}
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }}
/>
<article className="prose">
<h1>{post.title}</h1>
{/* İçerik */}
</article>
</>
)
}4. AEO (Answer Engine Optimization): Yapay Zeka Arama Motorları JSON-LD'yi Nasıl Kullanır?
ChatGPT Search, Perplexity ve Google Gemini gibi yapay zeka arama motorları, sayfaları token tasarrufu yaparak özetler. Sayfanızda net bir JSON-LD şeması (özellikle FAQPage, Article ve SoftwareApplication) bulunduğunda:
- Yüksek Alıntılanabilirlik (Citations): LLM'ler doğrudan JSON-LD verisindeki net soru ve yanıtları kaynak göstererek kullanıcıya sunar.
- E-E-A-T Güvenilirliği:
PersonveOrganizationşemasındakisameAsalanları, yapay zekanın yazarın uzmanlığını çapraz teyit etmesini sağlar. - Fiyat ve Lisans Netliği: Yazılım ve ürün şemaları, AI ajanlarının kullanıcıya doğrudan "bu araç ücretsiz ve açık kaynak" şeklinde tavsiye vermesini kolaylaştırır.
5. Google Yapılandırılmış Veri Politikaları ve Cezalardan Kaçınma
Hatalı veya yanıltıcı şema kullanımı Google tarafından manuel işlem cezası (Spammy Structured Data penalty) ile sonuçlanabilir. Dikkat edilmesi gerekenler:
Sıkça Sorulan Sorular (SSS)
Bir sayfada birden fazla JSON-LD şeması bulunabilir mi?
Evet. Aynı sayfada hem Article, hem BreadcrumbList, hem de FAQPage şemalarını ayrı ayrı script blokları olarak veya tek bir @graph dizisi içinde barındırabilirsiniz. Google tümünü sorunsuz ayrıştırır.
Şemanın doğru çalıştığını yayına almadan nasıl test edebilirim?
Bu aracın sağ üstündeki "Google Rich Results Test" ve "Schema Validator" butonlarını kullanarak oluşturulan JSON kodunu kopyalayıp doğrudan Google'ın test motoruna yapıştırabilirsiniz.
JSON-LD şeması arama motoru sıralamasını doğrudan yükseltir mi?
Doğrudan sıralama sinyali olmasa da, SERP'te zengin sonuçlar (yıldızlar, SSS butonları, görsel kartlar) oluşturarak tıklama oranını (CTR) %20 ila %35 oranında artırır. Artan kullanıcı etkileşimi ise organik sıralamayı dolaylı yoldan zirveye taşır.