Strapi CMS + Next.js İleri Düzey SEO Mimarisine Sahip Web Sitesi
Büyüyen bir işletme, teknik olmayan pazarlama ekibinin sayfaları, blog gönderilerini ve açılış sayfalarını bağımsız olarak yönetebileceği hızlı, içerik açısından zengin bir pazarlama web sitesine ihtiyaç duyuyordu — aynı zamanda sitenin ilk günden itibaren organik aramalarda rekabetçi bir şekilde sıralanmasını sağlayarak.
Projenizi Tartışın
Zorluk
Mevcut web sitesi, bileşik sorunlara yol açan monolitik bir CMS üzerinde inşa edilmişti:
- Yavaş Performans — Şişirilmiş eklentilere sahip sunucu tabanlı sayfalar ortalama 4-6 saniyelik yükleme süreleri ile Core Web Vitals değerlerini düşürüyordu
- Geliştirici Engeli — Her içerik değişikliği (yeni açılış sayfası, blog düzeni, CTA güncellemesi) bir geliştiricinin şablon dosyalarına müdahale etmesini gerektiriyordu
- Kötü SEO Temeli — Yapılandırılmış veri olmaması, tutarsız meta etiketleri, eksik canonical URL'ler ve programatik site haritası olmaması zayıf organik görünürlüğe yol açıyordu
- Katı İçerik Modeli — Yeni bir içerik türü (vaka çalışmaları, SSS'ler, ekip biyografileri) eklemek şema geçişleri ve şablon yeniden yazımları gerektiriyordu
- Önizleme Yok — Editörler içeriği körü körüne yayınlıyordu — yayınlanmadan önce değişiklikleri önizlemenin bir yolu yoktu
- Yerelleştirme İhtiyaçları — Gelecekte birden fazla dile genişleme, i18n'i doğal olarak destekleyen bir CMS gerektiriyordu
Çözümümüz
Strapi'de esnek bir içerik modelleme katmanına, anlık güncellemelere yönelik 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 Strapi + Next.js headless mimarisi oluşturduk.
Mimari
- CMS: Özel içerik türleri ve Dynamic Zones ile Strapi (self-hosted)
- Frontend: 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 (frontend), bulut tabanlı Strapi backend, 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'ler, referanslar ve site genelindeki yapılandırma için global ayarlar tekili (singleton).
Dinamik Bölgeler (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çtaki bir React bileşenine karşılık gelir. Mevcut bloklar arasında kahraman görselleri, özellik ızgaraları, metin-resim düzenleri, referans bölümleri, CTA afişleri, 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ı kalıplarını kapsar.
SEO Bileşeni (Yeniden Kullanılabilir)
Her içerik türüne eklenmiş paylaşılan bir SEO bileşeni, özel meta başlığı, meta açıklaması, 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ı sağlayarak tüm içeriklerde tutarlı SEO yönetimini garantiler.
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 eşlenir
- UI temel öğeleri tutarlı tasarım sistemi elemanları sağlar
- Düzen bileşenleri başlık, alt bilgi ve gezinmeyi yönetir
- SEO yardımcı programları yapılandırılmış veri ve meta etiketleri oluşturur
Merkezi bir Dynamic Zone işleyici (renderer), 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 böylece tam yeniden oluşturmalara gerek kalmadan güncellemelerin saniyeler içinde yayına girmesini sağlar.
SEO Uygulaması
Teknik SEO
- Sayfa bazında meta veri — 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çeriklerden uygun değişim sıklığı ve öncelik değerleriyle programatik olarak oluşturulur
- Robots.txt — Ortam farkındalıklı üretim (üretim ortamı taramaya izin verir, hazırlık ortamı engeller)
- Canonical URL'ler — Sondaki eğik çizgi normalleştirmesi ile otomatik olarak oluşturulur, CMS'den geçersiz kılınabilir
Yapılandırılmış Veri (JSON-LD)
Otomatik şema oluşturma şunları kapsar:
- Organizasyon — Global ayarlardan site genelindeki şema
- Makale — Başlık, yazar, tarihler ve yayıncı içeren blog gönderileri
- SSS — Bir sayfada SSS blokları kullanıldığında otomatik olarak oluşturulur
- Ekmek Kırıntısı — URL yol hiyerarşisinden otomatik olarak oluşturulur
- Hizmet — Sağlayıcı ve hizmet verilen alanı içeren hizmet sayfaları
- Yerel İşletme — İ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 biçimlendirme (WebP/AVIF), kritik CSS satır içi, Server Components gereksiz istemci JS'sini ortadan kaldırır
- CLS — Medya kütüphanesinden açık resim boyutları, boyut ayarlamalı optimize edilmiş yazı tipi yüklemesi, iskelet yer tutucular, sabit boyutlu gömülü konteynerler
- 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 sayacı 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 manuel geçersiz kılma seçenekleriyle otomatik doldurulmasını içeren editör rehberliği sunar.
Medya İş Akışı
Strapi'ye yüklenen görseller Cloudinary CDN'de depolanır; Next.js ön ucu ise otomatik format seçimi, duyarlı boyutlandırma, kenar önbellekleme ve katlamanın üstündeki öncelikli yükleme için bulanıklık yer tutucuları ile gecikmeli yükleme özellikli optimize edilmiş varyantlar talep eder.
Temel Özellikler
- Dynamic Zone Sayfa Oluşturucu — Sıfır geliştirici ile sayfa oluşturmak için 12'den fazla birleştirilebilir blok
- Yeniden Kullanılabilir SEO Bileşeni — Tutarlı meta yönetimi için her içerik türüne eklenmiştir
- Otomatik Yapılandırılmış Veri — Organizasyon, Makale, SSS, Ekmek Kırıntısı, Hizmet için JSON-LD
- ISR + Webhooks — İçerik güncellemeleri tam yeniden oluşturmaya gerek kalmadan saniyeler içinde yayınlanır
- Programatik Site Haritası — Yayınlanmış tüm Strapi içeriğinden otomatik olarak oluşturulur
- Cloudinary Medya İş Akışı — Otomatik biçimlendirme, duyarlı boyutlandırma, CDN teslimatı
- Core Web Vitals Optimize Edildi — Server Components, resim ön yükleme, yazı tipi optimizasyonu, minimal JS
- Taslak Önizleme — Strapi önizleme düğmesi, yayınlamadan önce taslak içeriği Next.js'te işler
- i18n Hazır — Strapi'nin gelecekteki çok dilli genişleme için yerleşik uluslararasılaştırması
- Editör Kılavuzları — Strapi admin panelinde karakter sayıları, zorunlu alanlar ve anahtar kelime rehberliği
Sonuçlar
Teknoloji Yığını
İşletmenizi Dönüştürmeye Hazır mısınız?
Zorluklarınıza benzer çözümler uygulamamızın yollarını konuşalım.