Gelişmiş SEO Mimarisine Sahip Strapi CMS + Next.js Web Sitesi

Strapi'de esnek bir içerik modelleme katmanına, neredeyse anında güncellemeler için ISR ile statik olarak oluşturulmuş bir Next.js ön ucuna ve teknik, sayfa içi ve yapılandırılmış veri optimizasyonunu kapsayan kapsamlı bir SEO sistemine sahip bir Strapi + Next.js başsız mimarisi oluşturduk.

Mimari

• CMS: Özel içerik türleri ve Dynamic Zones ile Strapi (kendi barındırması)
• Ön Uç: App Router, React Server Components, TypeScript ile Next.js
• Stil: Tasarım sistemi token'ları ile Tailwind CSS
• SEO Katmanı: Next.js Metadata API, JSON-LD jeneratörleri, otomatik site haritası/robots.txt
• Medya: Optimize edilmiş teslimat için Cloudinary sağlayıcılı Strapi Medya Kütüphanesi
• Barındırma: Vercel (ön uç), bulut tabanlı Strapi arka ucu, Cloudinary (medya CDN)
• Veritabanı: Strapi içerik depolaması için PostgreSQL
• Önbellek: Strapi webhooks aracılığıyla isteğe bağlı yeniden doğrulama ile ISR

Strapi İçerik Modelleme

İçerik Türleri

CMS, tüm iş ihtiyaçlarını kapsayan içerik türleri etrafında yapılandırılmıştır: pazarlama sayfaları, kategorileri ve yazarları olan blog gönderileri, kampanya açılış sayfaları, hizmet/ürün teklifleri, ekip üyesi biyografileri, SSS, referanslar ve site genelinde yapılandırma için global ayarlar tekil öğesi.

Dynamic Zones (Sayfa Oluşturucu)

Strapi Dynamic Zones, editörlerin sayfa içeriğini yeniden kullanılabilir bileşenlerden oluşturmasına olanak tanır — her bölge girişi, ön uçta bir React bileşenine karşılık gelir. Mevcut bloklar arasında kahraman bölümleri, özellik ızgaraları, metin-görsel düzenleri, referans bölümleri, CTA banner'ları, SSS akordeonları, istatistik sayaçları, fiyatlandırma tabloları, logo ızgaraları, yerleştirmeler, blog öne çıkanları ve iletişim formları bulunur — tüm yaygın pazarlama sayfası desenlerini kapsar.

SEO Bileşeni (Yeniden Kullanılabilir)

Her içerik türüne eklenmiş paylaşılan bir SEO bileşeni, özel meta başlık, meta açıklama, canonical URL geçersiz kılma, Open Graph görseli, indeksleme direktifleri, odak anahtar kelime ve isteğe bağlı yapılandırılmış veri geçersiz kılma alanları sunar — tüm içerikte tutarlı SEO yönetimini sağlar.

Next.js Ön Uç Mimarisi

Bileşen Yapısı

Ön uç katmanlı bir mimariyi takip eder:

• Blok bileşenleri doğrudan Strapi Dynamic Zone girişlerine karşılık gelir
• UI primitifleri tutarlı tasarım sistemi öğeleri sağlar
• Düzen bileşenleri başlık, altbilgi ve navigasyonu yönetir
• SEO yardımcı programları yapılandırılmış veri ve meta etiketleri oluşturur

Merkezi bir Dynamic Zone işleyici, Strapi'den gelen blok dizisini yineler ve her giriş için ilgili React bileşenini işler.

Veri Getirme Stratejisi

Tüm rotalar, Strapi webhooks tarafından tetiklenen isteğe bağlı yeniden doğrulama ile Incremental Static Regeneration (ISR) kullanır. Bir editör içerik yayınladığında veya güncellediğinde, Strapi belirli etkilenen sayfanın yeniden doğrulanmasını tetikleyen bir webhook tetikler ve güncellemelerin tam yeniden oluşturmaya gerek kalmadan saniyeler içinde yayına girmesini sağlar.

SEO Uygulaması

Teknik SEO

• Sayfa Başına Meta Verileri — Akıllı geri dönüşlerle Strapi SEO alanlarından oluşturulan Başlık, açıklama, canonical URL, Open Graph ve Twitter Card etiketleri
• Otomatik site haritası — Tüm yayınlanmış içerikten uygun değişim sıklığı ve öncelik değerleriyle programatik olarak oluşturulur
• Robots.txt — Ortamdan haberdar oluşturma (üretim sürünmeye izin verir, staging engeller)
• Canonical URL'ler — Sondaki eğik çizgi normalizasyonu ile otomatik oluşturulur, CMS'den geçersiz kılınabilir

Yapılandırılmış Veri (JSON-LD)

Otomatik şema oluşturma şunları kapsar:

• Kuruluş (Organization) — Global ayarlardan site genelinde şema
• Makale (Article) — Başlık, yazar, tarihler ve yayıncı ile blog gönderileri
• SSS (FAQ) — Sayfada SSS blokları kullanıldığında otomatik olarak oluşturulur
• Ekmek Kırıntısı (Breadcrumb) — URL yol hiyerarşisinden otomatik olarak oluşturulur
• Hizmet (Service) — Sağlayıcı ve hizmet verilen alan ile hizmet sayfaları
• Yerel İşletme (Local Business) — İsteğe bağlı, fiziksel konumları olan işletmeler için

Performans SEO (Core Web Vitals)

• LCP — Kahraman görselleri önceden yüklenir, Cloudinary otomatik format (WebP/AVIF), kritik CSS satır içi, Server Components gereksiz istemci JS'ini ortadan kaldırır
• CLS — Medya kütüphanesinden açık görsel boyutları, size-adjust ile optimize edilmiş font yüklemesi, iskelet yer tutucular, sabit boyutlu yerleştirme kapsayıcıları
• INP — Minimal istemci tarafı JavaScript, hafif etkileşimli işleyiciler, rota bazında kod bölme

Sayfa İçi SEO Araçları

CMS, meta alanları için karakter sayımı göstergeleri, SEO meta verileri olmadan hiçbir sayfanın yayınlanmamasını sağlayan zorunlu alan doğrulaması ve içerik başlıkları ve alıntılarından SEO alanlarının otomatik doldurulması gibi editör rehberliğini içerir ve manuel geçersiz kılma seçenekleri sunar.

Medya İşlem Hattı

Strapi'ye yüklenen görseller Cloudinary CDN'de depolanır; Next.js ön ucu, otomatik format seçimi, duyarlı boyutlandırma, kenar önbellekleme ve katlama üstü öncelikli yükleme için bulanıklık yer tutucularıyla tembel yükleme ile optimize edilmiş varyantları ister.

Temel Özellikler

1. Dynamic Zone Sayfa Oluşturucu — Geliştiriciye ihtiyaç duymadan sayfa oluşturmak için 12'den fazla birleştirilebilir blok
2. Yeniden Kullanılabilir SEO Bileşeni — Tutarlı meta yönetimi için her içerik türüne eklenmiştir
3. Otomatik Yapılandırılmış Veri — Kuruluş, Makale, SSS, Ekmek Kırıntısı, Hizmet için JSON-LD
4. ISR + Webhooks — İçerik güncellemeleri, tam yeniden derlemeye gerek kalmadan saniyeler içinde yayına girer
5. Programatik Site Haritası — Tüm yayınlanmış Strapi içeriğinden otomatik olarak oluşturulur
6. Cloudinary Medya İşlem Hattı — Otomatik format, duyarlı boyutlandırma, CDN teslimatı
7. Core Web Vitals Optimize Edilmiş — Server Components, görsel ön yüklemesi, font optimizasyonu, minimal JS
8. Taslak Önizleme — Strapi önizleme düğmesi, yayınlamadan önce taslak içeriği Next.js'te işler
9. i18n Hazır — Strapi'nin gelecekteki çoklu dil genişletmesi için yerleşik uluslararasılaştırması
10. Editör Kılavuzları — Strapi admin panelinde karakter sayıları, zorunlu alanlar ve anahtar kelime rehberliği