Gelişmiş SEO Mimarisine Sahip Strapi CMS + Next.js 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ğlayacaktı.
Projenizi Tartışın
Zorluk
Mevcut web sitesi, giderek artan sorunlar yaratan monolitik bir CMS üzerine kurulmuştu:
- Yavaş Performans — Şişkin eklentilere sahip sunucu tarafından işlenmiş sayfalar ortalama 4-6 saniyelik yükleme sürelerine sahipti ve Core Web Vitals'ı 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 dokunmasını gerektiriyordu
- Zayıf SEO Temeli — Yapılandırılmış veri olmaması, tutarsız meta etiketleri, eksik canonical URL'ler ve programatik site haritasının bulunmaması zayıf organik görünürlüğe yol açtı
- Esnek Olmayan İçerik Modeli — Yeni bir içerik türü (vaka çalışmaları, SSS, 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ına almadan önce değişiklikleri önizlemenin bir yolu yoktu
- Yerelleştirme İhtiyaçları — Gelecekte birden çok dile genişlemek, i18n'i doğal olarak destekleyen bir CMS gerektiriyordu
Çözümümüz
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
- Dynamic Zone Sayfa Oluşturucu — Geliştiriciye ihtiyaç duymadan 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 — Kuruluş, Makale, SSS, Ekmek Kırıntısı, Hizmet için JSON-LD
- ISR + Webhooks — İçerik güncellemeleri, tam yeniden derlemeye gerek kalmadan saniyeler içinde yayına girer
- Programatik Site Haritası — Tüm yayınlanmış Strapi içeriğinden otomatik olarak oluşturulur
- Cloudinary Medya İşlem Hattı — Otomatik format, duyarlı boyutlandırma, CDN teslimatı
- Core Web Vitals Optimize Edilmiş — Server Components, görsel ön yüklemesi, font 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 çoklu dil genişletmesi 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ı
caseStudyDetail.more Vaka Çalışmaları
Daha fazla teknik uygulamamızı keşfedin
Next.js, ACF ve Yeniden Kullanılabilir Bileşen Mimarisi ile Headless WordPress CMS
Bir işletmenin, WordPress'in içerik düzenleme esnekliğine sahip, ancak geleneksel WordPress temalarının sınırlamaları olmadan modern bir React ön ucunun hızı ve geliştirici deneyimine sahip yüksek performanslı, SEO optimize edilmiş bir pazarlama web sitesine ihtiyacı vardı.
Next.js, ACF ve Yeniden Kullanılabilir Bileşen Mimarisi ile Headless WordPress CMS
Bir işletmenin, WordPress'in içerik düzenleme esnekliğine sahip, ancak geleneksel WordPress temalarının sınırlamaları olmadan modern bir React ön ucunun hızı ve geliştirici deneyimine sahip yüksek performanslı, SEO optimize edilmiş bir pazarlama web sitesine ihtiyacı vardı.
İş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.