Schema.org ve Rich Snippets: Google Arama Sonuçlarında Öne Çıkın
JSON-LD ile zengin arama sonuçları elde etme; BlogPosting, FAQPage, BreadcrumbList ve Organization şemalarının React & Next.js üzerinde doğru kullanımı.
Zengin Arama Sonuçları (Rich Snippets) Neden Önemlidir?#
Google arama motoru sonuç sayfalarında (SERP) sadece standart mavi bir başlık ve gri açıklama yerine; - Doğrudan cevaplanan Sıkça Sorulan Sorular (FAQ) akordiyonları, - Yıldızlı Kullanıcı İncelemeleri ve Puanlamaları, - Ekmek Kırıntısı (Breadcrumbs) gezinme yolları, - Yazarın unvanı ve yayın tarihi,
gibi görsel öğeler tıklama oranınızı (CTR - Click-Through Rate) %30 ila %60 arasında artırır.
Bu zengin sonuçların arama motorları tarafından anlaşılmasını sağlayan standart Schema.org ve JSON-LD (JavaScript Object Notation for Linked Data) biçimidir.
1. Next.js App Router İçin Evrensel JsonLd Bileşeni#
Sayfalarınızda tekrar tekrar script etiketleri yazmak yerine tip güvenli bir JSON-LD enjeksiyon bileşeni oluşturalım:
| 1 | // src/components/seo/json-ld.tsx |
| 2 | import React from "react"; |
| 3 | |
| 4 | interface JsonLdProps { |
| 5 | data: Record<string, unknown> | Array<Record<string, unknown>>; |
| 6 | } |
| 7 | |
| 8 | export function JsonLd({ data }: JsonLdProps) { |
| 9 | return ( |
| 10 | <script |
| 11 | type="application/ld+json" |
| 12 | dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} |
| 13 | /> |
| 14 | ); |
| 15 | } |
2. Temel Şema Türleri ve Kod Örnekleri#
A. BreadcrumbList (Ekmek Kırıntısı Şeması) Arama motorlarına sitenizin hiyerarşik dizin yapısını açıklar:
| 1 | export function generateBreadcrumbSchema(items: { name: string; item: string }[]) { |
| 2 | return { |
| 3 | "@context": "https://schema.org", |
| 4 | "@type": "BreadcrumbList", |
| 5 | itemListElement: items.map((item, index) => ({ |
| 6 | "@type": "ListItem", |
| 7 | position: index + 1, |
| 8 | name: item.name, |
| 9 | item: item.item.startsWith("http") ? item.item : `https://nmdemirkol.com${item.item}`, |
| 10 | })), |
| 11 | }; |
| 12 | } |
B. FAQPage (Sıkça Sorulan Sorular Şeması) Google SERP üzerinde doğrudan açılıp kapanan SSS listesi oluşturur:
| 1 | export function generateFaqSchema(faqs: { question: string; answer: string }[]) { |
| 2 | return { |
| 3 | "@context": "https://schema.org", |
| 4 | "@type": "FAQPage", |
| 5 | mainEntity: faqs.map((faq) => ({ |
| 6 | "@type": "Question", |
| 7 | name: faq.question, |
| 8 | acceptedAnswer: { |
| 9 | "@type": "Answer", |
| 10 | text: faq.answer, |
| 11 | }, |
| 12 | })), |
| 13 | }; |
| 14 | } |
3. Test ve Doğrulama#
Oluşturduğunuz yapılandırılmış verileri canlıya almadan önce mutlaka şu iki resmi Google aracında test edin:
- 1.Google Rich Results Test (Zengin Sonuçlar Testi): Sayfanızın hangi zengin sonuçlara uygun olduğunu gösterir.
- 2.Schema Markup Validator (validator.schema.org): Sentaks veya eksik zorunlu alan hatalarını raporlar.
Zengin snippet'lar, doğru teknik mimari ile birleştiğinde web sitenizi rakiplerinizin fersah fersah önüne taşır.
Next.js Web Yazılım, SaaS, Admin Paneli & SEO
Next.js App Router, TypeScript, Tailwind CSS ile %100 Lighthouse performanslı kurumsal web siteleri, SaaS panelleri ve Core Web Vitals SEO optimizasyonu.
İlgili Çözüm Paketleri
Admin Panelli Mobil Uygulama Geliştirme | Nuh Mehmet Demirkol
İşletmenizin tüm dinamiklerini (kullanıcılar, siparişler, stoklar, bildirimler ve finansal raporlar) tek tıkla yönetebileceğiniz web tabanlı Next.js admin paneli ve Flutter mobil uygulama ekosistemi.
Özel Web Yazılım & SaaS Geliştirme (Next.js) | Demirkol
Hazır şablonlardan uzak, tamamen işletmenizin ihtiyaçlarına göre sıfırdan kodlanan, Google PageSpeed 99+ puan alan, ultra hızlı ve SEO lideri Next.js web platformları.
Teknik Kılavuzlar & Blog
Next.js 16 ile Kapsamlı SEO Rehberi: Metadata, Core Web Vitals ve Server Components
Next.js 16 App Router mimarisinde dinamik metadata, robots, sitemap, Open Graph ve Server Component optimizasyonlarını adım adım uygulayın.
Core Web Vitals Nedir ve Nasıl 100 Skora Ulaşılır? (LCP, INP, CLS Optimizasyonu)
Google PageSpeed testlerinde 100 tam puan almak için INP, LCP ve CLS metriklerini optimize etme, görsel ve font yönetimi stratejileri.
İlgili Canlı Projeler
Profesyonel Öğretmen Bul Platformu
Öğrenci ve velilerin branş bazında özel ders öğretmenlerini bulup randevu alabildiği, modern web ve mobil entegrasyonlu SaaS sistemi.
Dijital Düğün & Nişan Davetiyesi Web Platformu
Çiftlerin kişiselleştirilmiş dijital davetiyeler oluşturup LCV (katılım bildirimi) ve yol tarifi alabildiği modern interaktif platform.
Hibrit Kart Web & Dijital Kartvizit Platformu
Hibrit Medya bünyesinde frontend mimarisi Next.js TSX ile sıfırdan geliştirilen dijital kartvizit ve kurumsal profil sistemi.
Bu Konuda Projeniz mi Var?
Makalede bahsedilen mimari çözümleri, mobil veya modern web projenizde sıfır hata ve maksimum performansla hayata geçirmek için doğrudan iletişime geçebilirsiniz.