İstemci Taraflı Oluşturma (CSR) SEO Kılavuzu

İstemci Taraflı Oluşturma (CSR) ve SEO Nedir?

İstemci Taraflı Oluşturma (CSR) SEO, JavaScript ağırlıklı web uygulamalarının (ör. React, Angular, Vue.js ile oluşturulmuş) arama motorlarında doğru şekilde taranmasını, dizine eklenmesini ve sıralanmasını sağlamak için uygulanan teknik ve stratejik çalışmaların bütünüdür. Modern bir kullanıcı deneyimi sunarken, organik görünürlüğü ve trafiği kaybetme riskini yönetmeyi amaçlar.

CSR yaklaşımında içerik tarayıcıda oluşturulduğu için, arama motoru botları sayfayı boş görebilir ve bu da SEO performansının tamamen çökmesine yol açarak pazarlama bütçelerini ve ürün yatırımlarını verimsiz hale getirebilir.

JavaScript Oluşturma – Arama motoru botlarının bir web sayfasındaki JavaScript kodunu çalıştırıp çalıştıramadığı ve oluşturulan içeriği görebildiği süreç.
Ön Oluşturma (Prerendering) – Botlar ve yavaş cihazlar için sunucuda veya derleme zamanında statik HTML snapshot'ları oluşturma tekniği.
Dinamik Oluşturma – Her istekte, bot tespitine dayalı olarak sunucuda HTML oluşturma. Genellikle "SSR" veya "Edge SSR" olarak adlandırılır.
Site Haritası (Sitemap) – JavaScript ile oluşturulan dinamik sayfaların arama motorlarına manuel olarak bildirilmesi için kullanılan XML dosyası.
Lazy Loading – Görüntü ve içeriklerin ihtiyaç duyuldukça yüklenmesi; yanlış uygulandığında SEO'ya zarar verebilir.
Canonical Etiketleri – Benzer veya kopya içerikli CSR sayfalarında asıl URL'yi işaret etmek için kullanılır, karışıklığı önler.
Core Web Vitals – Kullanıcı deneyimini ölçen ve CSR uygulamalarında genellikle zayıf olan LCP, FID, CLS gibi Google'ın temel performans metrikleri.
Search Console Doğrulama – Google'ın CSR sayfalarınızı nasıl gördüğünü test etmek için "URL Denetleme" aracının kullanılması.

Bu konu, modern bir tek yüklü uygulama (SPA) kullanan veya etkileşimli bir arayüz geliştiren tüm işletmeler için kritiktir. Ürün ve pazarlama ekipleri arasında bir köprü kurarak, "güzel çalışan ama görünmeyen" bir ürün felaketini önler.

Özetle: CSR SEO, JavaScript ile tarayıcıda oluşturulan web sitelerinin arama motorlarında bulunabilirliğini garanti altına alan disiplinlerarası bir çözümdür.

İşletmeler İçin Neden Önemli?

CSR SEO'yu görmezden gelmek, web varlığınızı arama motorlarının gözünden neredeyse tamamen gizler; organik trafik sıfıra yaklaşır, pazarlama ROI'si düşer ve rakiplerinize karşı pazar payı kaybedersiniz.

Organik trafik kaybı ve marka görünürlüğünün azalması → CSR SEO stratejisi, sitenizin arama sonuçlarında çıkmasını sağlayarak potansiyel müşterilere ulaşmanın en sürdürülebilir kanalını korur.
Geliştirme ve pazarlama bütçelerinin verimsiz kullanılması → SEO'ya uygun bir CSR mimarisi, yatırımlarınızın uzun vadeli getirisini maksimize eder ve yeniden çalışma maliyetlerini önler.
Yavaş sayfa yüklenme süreleri ve yüksek hemen çıkma oranı → CSR SEO optimizasyonları (ör. kod bölme, ön oluşturma) aynı zamanda kullanıcı deneyimini iyileştirir, dönüşümleri artırır.
Arama motoru botlarının içeriği görememesi → Ön oluşturma veya dinamik oluşturma uygulamak, botlara tıpkı bir kullanıcının gördüğü gibi tam HTML içeriği sunar.
Sosyal medya paylaşımlarında boş önizlemeler çıkması → Doğru meta etiket oluşturma ve Open Graph protokolü desteği, sosyal kanallarda marka itibarınızı ve tıklanma oranını korur.
E-ticaret sitelerinde ürün sayfalarının dizine eklenmemesi → Her bir dinamik ürün sayfası için benzersiz, botların anlayabileceği HTML sağlamak, online satış kanallarınızı güvence altına alır.
Uluslararası pazarlara açılmada teknik engeller → Hız ve doğru dil/konum işaretlemeleri, CSR'da doğru uygulandığında, uluslararası SEO'yu mümkün kılar.
Rakip avantajı kaybı → Rakibiniz basit bir statik site kullanıyor ve sizin CSR siteniz SEO'suz ise, en temel aramalarda bile geride kalırsınız.
İçerik stratejisinin etkisiz kalması → Blog veya kaynak sayfaları gibi değerli içeriklerinizin arama motorları tarafından keşfedilmesini sağlar.
GDPR/veri gizliliği uyumluluğu ile çakışan izleme kodları → CSR SEO için gerekli script'lerin (ör. bot tespiti) gizlilik yasalarıyla uyumlu şekilde yönetilmesi, yasal riskleri azaltır.

Özetle: CSR SEO'ya yatırım yapmamak, dijital varlığınızı görünmez kılarak iş büyümesini ciddi şekilde engeller.

Adım Adım Kılavuz

CSR ve SEO'yu bir araya getirmek, frontend geliştirme, DevOps ve içerik stratejisi arasında sıkışmış ekipler için genellikle karmaşık görünür.

Adım 1: Mevcut Durumunuzu Teşhis Edin

Hangi sayfalarınızın botlar tarafından görülemediğini bilmeden optimizasyon yapamazsınız. Google Search Console'un "URL Denetleme" aracını kullanarak canlı bir sayfanızı test edin. "Sayfa Kullanılabilirliği" bölümünde bot'un gördüğü işlenmiş HTML'yi kontrol edin.

İçeriğiniz eksikse veya sadece JavaScript kodu görünüyorsa, sorununuz var demektir. Ayrıca, Google'ın "Mobile-Friendly Test" aracı da benzer bir işlem yapmanızı sağlar.

Adım 2: Oluşturma Stratejinizi Belirleyin

Teknik ekibinizin kaynakları ve sitenizin boyutuna göre en uygun çözümü seçin. Temel seçenekler:

Tam Sunucu Taraflı Oluşturma (SSR): Her istekte sunucuda HTML oluşturulur. En güçlü SEO çözümüdür ancak sunucu yükü yüksektir.
Statik Site Oluşturma (SSG)/Ön Oluşturma: Derleme zamanında tüm sayfalar statik HTML olarak oluşturulur. Bloglar veya ürün katalogları için idealdir.
Karma (Hybrid) Yaklaşım: Bazı sayfalar önceden, bazıları isteğe bağlı oluşturulur (ör. Next.js, Nuxt.js). En esnek yöntemdir.
Dinamik Oluşturma (Botlara Özel): Kullanıcıya CSR, botlara ise ön oluşturulmuş HTML sunan bir ara katman (middleware) kullanmak.

Adım 3: Meta Verileri Dinamik Olarak Yönetin

CSR uygulamalarında, her sayfa için başlık (title), meta açıklama ve Open Graph etiketleri genellikle JavaScript ile atanır. Bu etiketlerin de botlar tarafından görülebilir olması gerekir.

React Helmet gibi kütüphaneler veya framework'ünüzün yerleşik head yönetimi (Next.js'te `next/head`) kullanılmalı ve bu etiketlerin oluşturulan HTML'ye doğru şekilde yansıdığından emin olunmalıdır.

Adım 4: Temel Web Ölçütleri (Core Web Vitals) için Optimize Edin

CSR, özellikle "İlk İçerikli Boyama (FCP)" ve "En Büyük İçerikli Boyama (LCP)" metriklerini olumsuz etkileyebilir. İyileştirmeler şunları içerir:

JavaScript paketlerini bölmek (code splitting).
Görüntüleri optimize etmek ve lazy loading uygulamak.
Web font'larının yüklenmesini verimli hale getirmek.
Gereksiz üçüncü taraf script'lerini kaldırmak veya ertelenmiş yüklemek.

Adım 5: Doğru Site Haritası ve robots.txt Dosyası Sağlayın

JavaScript ile oluşturulan dinamik rotalarınızın (URL'lerin) tümünü içeren bir XML site haritası oluşturun ve Google Search Console'a gönderin. `robots.txt` dosyanızın bu sayfalara erişimi engellemediğinden emin olun.

Bu, arama motorlarına keşfedilmemiş sayfalarınızın varlığını bildirmenin en güvenilir yoludur.

Adım 6: İç Bağlantı Yapısını HTML Bağlantılarıyla Kurun

Sayfalarınız arasındaki gezinme (``) JavaScript click event'lerine değil, gerçek HTML bağlantı etiketlerine dayanmalıdır. Bu, botların sitenizi dolaşmasını ve sayfalar arasındaki ilişkiyi (bağlantı değeri/PageRank akışı) anlamasını sağlar.

React Router veya benzeri kütüphanelerle oluşturduğunuz bağlantıların, tarayıcıda normal `` etiketlerine dönüştüğünden emin olun.

Adım 7: Düzenli İzleme ve Bakım Yapın

SEO statik bir çalışma değildir. Yeni sayfalar eklendikçe veya içerik değiştikçe, botların hala her şeyi görebildiğinden emin olun.

Search Console'daki "Kapsam" raporunu ayda bir kontrol edin.
Canlı sayfalarda düzenli olarak "URL Denetleme" testi yapın.
Site hızı ve Core Web Vitals performansını izleyin.

Özetle: CSR SEO sorununu çözmek, mevcut durumu teşhis etmekten başlayıp, bir oluşturma stratejisi seçmek ve tüm teknik SEO unsurlarını bu stratejiye uyarlayarak izlemekten geçer.

Yaygın Hatalar ve Kırmızı Bayraklar

Bu hatalar, frontend geliştirme ile SEO gereksinimlerinin ayrı değerlendirilmesi ve entegrasyonun proje sonrasına bırakılması nedeniyle sıkça yaşanır.

Sadece İnsan Kullanıcılar İçin Test Yapmak → Arama motoru botları sayfanızı boş görür. Çözüm: Düzenli olarak "Googlebot" perspektifinden tarama testleri yapın.
Ön Oluşturma Sürekliliğini Unutmak → Sık güncellenen içerik (stok, fiyat) önceden oluşturulmuşsa eski kalır. Çözüm: Artımlı statik yeniden oluşturma (ISR) veya istemci tarafında dinamik veri getirme gibi hibrit yöntemler kullanın.
Lazy Loading'un Tüm Görseller İçin Açık Olması → Sayfanın üst kısmındaki (above-the-fold) kritik görseller gecikirse LCP metriği kötü etkilenir. Çözüm: Yüklenme önceliği yüksek görsellerde lazy loading kullanmayın veya "native lazy loading" (`loading="eager"`) ile yönetin.
Fragment (#) URL'lerine Güvenmek -> `example.com/#/urun` gibi URL'ler botlar tarafından aynı sayfa olarak görülür. Çözüm: History API kullanan "clean URL" yapısına (örn. `example.com/urun`) geçin.
SSR/SSG'de Aşırı Sunucu Yükü ve Yavaşlık → Her sayfa için kompleks işlemler yapmak performansı düşürür. Çözüm: Önbellekleme stratejileri (CDN, serverless önbellek) uygulayın ve gereksiz hesaplamalardan kaçının.
JavaScript Hatalarının İçeriği Engellemesi → Bir JS hatası, tüm sayfa içeriğinin oluşturulmasını durdurabilir. Çözüm: Hata sınırları (error boundaries) kullanın ve kritik içeriğin JS'ye bağımlılığını mümkün olduğunca azaltın.
Canonical URL'leri ve Yönlendirmeleri Yanlış Yönetmek → CSR'da sunucu seviyesinde yönlendirme (301) yapılmazsa, link değeri kaybı yaşanır. Çözüm: Framework'ünüzün sunucu/istemci yönlendirme bileşenlerini doğru şekilde, SEO kurallarına uygun kullanın.
Framework'ün SEO Özelliklerini Araştırmamak → React'i saf halde kullanıp tüm sorumluluğu geliştiriciye bırakmak. Çözüm: Next.js, Nuxt.js, Angular Universal gibi SSR/SSG'yi yerleşik sunan framework'leri veya Gatsby gibi statik oluşturucuları değerlendirin.
İçeriğin Yalnızca API'den Gelmesi → Botlar API çağrısını bekleyemez veya API kimlik doğrulaması nedeniyle engellenir. Çözüm: İçeriğin ilk HTML yanıtında bulunmasını veya ön oluşturma sırasında API'den getirilip HTML'ye gömülmesini sağlayın.
Performans İzlemede Yalnızca Lab Verilerine Bakmak → Yerel makinedeki testler, gerçek kullanıcıların farklı cihaz ve ağlardaki deneyimini yansıtmaz. Çözüm: Google Search Console "Core Web Vitals" raporu veya CrUX verisi gibi gerçek kullanıcı verilerini (RUM) temel alın.

Özetle: CSR SEO'daki en büyük hata, botların sitenizi bir kullanıcı gibi deneyimleyeceğini varsaymak ve bu deneyimi proaktif olarak yönetmemektir.

Araçlar ve Kaynaklar

Doğru araçları seçmek, CSR SEO karmaşıklığını yönetilebilir hale getirir ve ekip verimliliğini artırır.

Oluşturma ve Framework Araçları – Next.js, Nuxt.js, Gatsby, Angular Universal gibi araçlar, SSR veya SSG'yi projenize entegre etmenin en hızlı yoludur. Karmaşık sunucu konfigürasyonlarını basitleştirirler.
Tarama ve Teşhis Araçları – Google Search Console (URL Denetleme), Screaming Frog SEO Spider (JavaScript işleme modu), Sitebulb gibi araçlar, botların sitenizi nasıl gördüğünü ve hangi sorunların olduğunu tespit etmenizi sağlar.
Performans İzleme Araçları – Lighthouse (CI/CD'ye entegre edilebilir), WebPageTest, PageSpeed Insights gibi araçlar, Core Web Vitals ve diğer performans metriklerini ölçerek iyileştirme alanlarını gösterir.
Gerçek Kullanıcı İzleme (RUM) Araçları – Sentry, New Relic, Firebase Performance Monitoring gibi araçlar, canlı kullanıcıların deneyimlediği hız ve hata verilerini toplar, lab testlerinde yakalanamayan sorunları ortaya çıkarır.
Uluslararası SEO (i18n) Kütüphaneleri – next-i18next, vue-i18n gibi kütüphaneler, çok dilli CSR uygulamalarında hreflang etiketlerini ve dil bazlı URL yapılarını doğru şekilde yönetmeye yardımcı olur.
API ve Veri Yönetimi Araçları – React Query, SWR veya GraphQL client'ları (Apollo Client), istemci tarafı veri getirme işlemlerini optimize ederek gereksiz yeniden oluşturmaları ve yavaş arayüzleri önler.
CDN ve Önbellek Sağlayıcıları – Vercel, Netlify, AWS CloudFront, Cloudflare Workers gibi servisler, ön oluşturulmuş statik veya dinamik sayfaları küresel olarak hızlı bir şekilde sunar ve sunucu yükünü azaltır.
Resmi Arama Motoru Dokümanları – Google'ın "JavaScript ve SEO" kılavuzu ve Google Search Central blogu, en güncel bot davranışları ve önerileri için birincil kaynaktır. Hiçbir blog yazısı bunun yerine geçemez.

Özetle: CSR SEO'yu etkin kılmak için tarama, performans ölçme, oluşturma ve dağıtım araçlarından oluşan bir yığını doğru şekilde bir araya getirmek gerekir.

Bilarna Nasıl Yardımcı Olabilir?

CSR SEO için doğru çözüm ortağını veya uzman hizmet sağlayıcısını bulmak, teknik karmaşıklık ve pazarın dağınıklığı nedeniyle zaman alıcı ve riskli olabilir.

Bilarna, AI destekli B2B pazar yeri olarak, işletmeleri CSR SEO konusunda deneyimli ve doğrulanmış yazılım ajansları, danışmanlar ve uygulama geliştiriciler ile buluşturur. İhtiyaçlarınızı (ör. "Next.js ile SSR entegrasyonu", "CSR SEO denetimi") tanımlayarak, platformun akıllı eşleştirme sistemi size uygun teklifler sunar.

Doğrulanmış Tedarikçi programı, hizmet sağlayıcıların yetkinliklerinin ve geçmiş projelerinin kontrol edilmesini sağlar. Bu, CSR gibi teknik bir konuda güvenilir bir iş ortağı seçme sürecindeki araştırma yükünü ve riski azaltır. Bilarna'nın amacı, karar verme sürecinizi hızlandırmak ve daha bilinçli seçimler yapmanıza olanak tanımaktır.

https://bilarna.com adresini ziyaret ederek, projenizin ihtiyaç duyduğu CSR SEO uzmanlığına sahip sağlayıcıları keşfetmeye başlayabilirsiniz.

Sık Sorulan Sorular

S: CSR ile yapılmış bir sitem var ve SEO trafiğim yok. İlk ve en acil adım ne olmalı?

En acil adım, Google'ın sitenizi nasıl gördüğünü anlamaktır. Hemen Google Search Console'a gidin, "URL Denetleme" aracını kullanın ve ana sayfanızın veya önemli bir içerik sayfanızın URL'sini girin. "İşlenmiş" HTML sekmesinde içeriği görüntüleyin. Eğer içerik eksikse veya sadece bir `

` görüyorsanız, JavaScript oluşturmanız botlar için çalışmıyor demektir. İlk pratik çözüm, bir ön oluşturma (prerendering) hizmeti araştırmak veya framework'ünüz için SSR modülünü (React için Next.js gibi) değerlendirmeye başlamaktır.

S: Next.js veya Nuxt.js gibi bir framework kullanmak CSR SEO sorununu otomatik olarak çözer mi?

Evet ve hayır. Bu framework'ler SSR ve SSG'yi yerleşik olarak destekleyerek doğru yapıyı kurmanıza olanak tanır. Ancak, SEO'yu otomatik olarak sihirli bir şekilde "çözmezler". Hala yapmanız gerekenler vardır:

Her sayfa için doğru meta etiketleri (title, description) tanımlamak.
Görselleri optimize etmek ve Core Web Vitals'e dikkat etmek.
Doğru site haritası oluşturmak ve göndermek.
İç bağlantı yapısını kurmak.

Framework size güçlü bir temel sağlar, ancak üzerine inşa etmek sizin sorumluluğunuzdadır.

S: Sitemi tamamen CSR'da geliştirdik, SSR'ye geçiş çok maliyetli görünüyor. Daha az maliyetli bir geçici çözüm var mı?

Evet, tam bir yeniden yazma yapmadan "dinamik oluşturma" veya "önyükleme (bootstrapping)" denen bir yaklaşım uygulayabilirsiniz. Bu yöntemde, bir ara katman (middleware) bot isteklerini tespit eder ve o sayfa için önceden oluşturulmuş bir HTML snapshot'ını (örneğin, Puppeteer veya Rendertron gibi bir araçla oluşturulmuş) sunar. Normal kullanıcılar ise normal CSR uygulamasını görür. Bu, hızlı bir düzeltme gibidir ancak uzun vadede tam bir SSR/SSG çözümü kadar sağlam ve bakımı kolay olmayabilir.

S: CSR uygulamamızda içerik API'lerden geliyor. Bu, SEO için bir engel mi?

Eğer API verileri, sayfanın ilk HTML yanıtında (SSR veya SSG ile) veya ön oluşturulmuş snapshot'ta mevcutsa, engel değildir. Asıl sorun, içeriğin yalnızca istemci tarafı JavaScript'in API'yi çağırmasından sonra görünmesidir. Çözüm, veri getirme işlemini sunucu tarafına taşımaktır. Next.js'te `getServerSideProps` veya `getStaticProps`, Nuxt.js'te `asyncData` veya `fetch` bu işlevi görür. Bu fonksiyonlar çalışma/derleme zamanında API'yi çağırır ve veriyi sayfa bileşenine besler, böylece içerik ilk HTML'de bulunur.

S: "Lazy loading" SEO'ya zarar verir mi? Nasıl doğru uygularım?

Yanlış uygulanırsa zarar verir. Özellikle sayfanın hemen görünen kısmındaki (above-the-fold) büyük resim veya metin lazy loading ile yüklenirse, Google'ın en önemli hız metriği olan LCP kötüleşir. Doğru uygulama için:

Sayfanın üst kısmındaki kritik görsellerde lazy loading kullanmayın (`loading="eager"`).
JavaScript ile yapılan lazy loading yerine, tarayıcı destekli native lazy loading'i (``) tercih edin.
Lazy loading'ın, bot simülasyonu yapan tarama araçlarında düzgün çalıştığından emin olun.

Kural: Kullanıcının ilk bakışta gördüğü her şey, mümkün olan en hızlı şekilde yüklenmelidir.

S: CSR SEO çalışmalarının başarılı olup olmadığını hangi metriklerle ölçerim?

Sadece genel trafik artışına bakmayın. Daha spesifik metrikleri izleyin:

Google Search Console: Dizine eklenen sayfa sayısı, "İşlenmiş" sayfaların durumu, sorgular ve tıklanma oranı (CTR).
Analytics: Organik trafikteki değişim, sayfa başına organik oturumlar.
Teknik SEO Araçları: Tarama hataları, site haritası kapsamı.
Performans Araçları: Core Web Vitals skorları (LCP, FID, CLS) ve iyileşme trendi.

Bu metriklerdeki olumlu değişim, CSR SEO çalışmalarınızın etkisini kanıtlar.