Merhaba dostlar, etrafta hep aynı SEO teknikleri dolaşıyor. Bu durumdan çok sıkıldım ve artık Google'ın patentlerine göre en önemli ve pekte bilinmeyen SEO tekniklerini sizlerle paylaşmaya başlayacağım.

Bugün birçoğumuzun 'JavaScript SEO' derken sadece indeks alma hızına odaklandığı, ancak Google'ın arka planda 'Cüzdanına (CPU/RAM)' dokunan o kritik teknik sınırı konuşacağız. Google bir hayır kurumu değil; milyarlarca sayfayı tararken harcadığı her mili saniyelik CPU gücünü bir maliyet olarak görüyor.


Eğer siteniz modern JS framework'leri (React, Next, Vue) ile harikalar yaratırken Googlebot'a 'Render Faturası' çıkarıyorsa, SIRALAMA KAYBETMENİZ KAÇINILMAZDIR. Eğer JS framework'leri doğru bir şekilde render maliyetine göre optimize edecek kadar teknik bilgiye sahip değilseniz kısaca size önerim acilinden WORDPRESS'e geçiniz.


----






Modern web sitelerinde artık sadece “HTML sayfası açıldı” dönemi yok. React, Vue, Angular, Next.js, Nuxt gibi yapılar yüzünden Google’ın bir sayfayı görmesi, işlemesi, render etmesi ve indekslemesi daha teknik hale geldi. Özellikle JavaScript ağırlıklı projelerde “site açılıyor ama Google neden tam anlamıyor?” sorusunun cevabı çoğu zaman render sürecinde gizlidir.
Bu konuda en çok karışan kavramlar şunlar:

• Client-Side Rendering (CSR)
• Server-Side Rendering (SSR)
• Static Site Generation (SSG)
• Hydration
• Crawlability
• JavaScript SEO
• Performans ve enerji maliyeti

1) Önce temel: Google bir sayfayı nasıl anlar?

Google veya diğer arama motorları sitenizi insanlar gibi “ekrana bakarak” değil, belli aşamalarla işler:

1. URL’yi keşfeder
2. Sayfayı crawl eder
3. HTML’i okur
4. Gerekirse JavaScript’i işler
5. Sayfayı render eder
6. İçeriği indeksler
7. Sonra sıralama sinyalleriyle değerlendirir

Crawler’lar bir kütüphane görevlisi gibi çalışır. Ellerinde dev bir indeks vardır; siteleri gezip içerikleri okuyarak bu indeksi oluştururlar. İçerik ne kadar erişilebilir, anlamlı ve ilişkilendirilmişse, sayfanın anlaşılması da o kadar kolay olur. İç bağlantılar, meta etiketler, yapılandırılmış veri ve temiz URL yapısı burada çok önemlidir.

Basit örnek

Bir kullanıcı Google’da şu aramayı yapıyor:
“istanbul kombi servisi beylikdüzü”
Google sizin sayfanıza geldiğinde şunları görmek ister:

• Sayfanın HTML içinde gerçekten kombi servisiyle ilgili içerik taşıması
• Title ve meta description’ın uyumlu olması
• H1/H2 yapısının düzgün olması
• İçeriğin JavaScript yüklenmeden tamamen boş olmaması
• Sayfa URL’sinin anlaşılır olması
  Örn:
  site.com/beylikduzu-kombi-servisi

2) Web sayfası teknik olarak nasıl kullanıcıya ulaşır?

Bir site yayınlandığında süreç kabaca şöyledir:

• Site bir sunucuda host edilir
• Kullanıcı tarayıcıdan URL ister
• DNS alan adını IP’ye çevirir
• Sunucu HTTP yanıtı verir
• İçerik ağ üzerinden cihaza gelir
• Tarayıcı HTML, CSS ve JavaScript’i işler
• Son olarak sayfa ekranda çizilir

Özellikle tarayıcının critical rendering path dediğimiz süreçte:

• HTML’den DOM oluşturduğunu
• CSS’ten CSSOM ürettiğini
• Bunları birleştirip render tree kurduğunu
• Layout yaptığını
• En son paint aşamasında sayfayı çizdiğini söylüyor.

Bu niye önemli?
Çünkü SEO tarafında sorun genelde sadece “Google bot geldi mi?” değildir. Asıl mesele şudur:
Google bot geldiğinde içerik HTML içinde hazır mı, yoksa JavaScript çalışmadan görünmüyor mu?
İşte CSR ve SSR farkı tam burada başlar.

3) CSR nedir?

Client-Side Rendering (CSR), sayfanın büyük kısmının kullanıcının tarayıcısında oluşturulmasıdır. Sunucudan ilk etapta minimal bir HTML gelir. Sonra JavaScript dosyaları indirilir, çalıştırılır, veri çekilir ve arayüz tarayıcı tarafında oluşturulur.

CSR akışı

• Sunucu boş ya da çok sade bir HTML döner
• Browser JS dosyalarını indirir
• JS çalışır
• API’den veri çekilir
• DOM güncellenir
• Kullanıcı içerği görür

Avantajı ne?

Çok etkileşimli arayüzlerde güçlüdür. Sayfa komple yenilenmeden sadece ilgili komponent güncellenebilir. Bu yüzden:

• panel sistemleri
• e-posta arayüzleri
• sosyal medya akışları
• admin dashboard’lar
• SaaS uygulamaları

gibi yapılarda çok kullanılır.

Dezavantajı ne?

SEO tarafında risk başlar. Çünkü Google sayfaya geldiğinde bazen ilk gördüğü şey:

• boş bir root div
• loading yazısı
• skeleton
• placeholder
• geç gelen içerik

olabilir.
Özellikle ürün listeleme, kategori, makale, hizmet sayfası gibi organik trafik hedefleyen sayfalarda ana içerik JS sonrasına kalıyorsa crawl ve render verimliliği düşebilir.

4) SSR nedir?

Server-Side Rendering (SSR), sayfanın HTML’inin sunucuda hazırlanıp kullanıcıya hazır şekilde gönderilmesidir. Kullanıcı ve bot, tarayıcıya gelir gelmez sayfanın büyük kısmını görebilir.

SSR akışı

• Kullanıcı URL ister
• Sunucu veri çeker
• HTML’i sunucuda oluşturur
• Hazır HTML tarayıcıya gönderilir
• Kullanıcı içeriği hızlıca görür
• Sonradan JS yüklenirse sayfa interaktif hale gelir

SEO’ya neden iyi gelir?

Çünkü bot geldiğinde içerik çoğu zaman hazırdır. Yani:

• ürün adı HTML içindedir
• kategori açıklaması HTML içindedir
• başlıklar HTML içindedir
• iç linkler HTML içindedir
• meta veriler doğru üretilebilir

Bu yüzden blog, haber, e-ticaret kategori, ürün detay, landing page, kurumsal hizmet sayfası gibi içeriklerde SSR genelde SEO açısından daha güvenli yapı kabul edilir.

Dezavantajı ne?

Her istekte sunucu daha fazla iş yapar. Yani:

• server CPU yükü artabilir
• cache yönetimi zorlaşabilir
• anlık trafik patlamalarında darboğaz olabilir
• kişiselleştirilmiş içeriklerde yönetim karmaşıklaşabilir

Bu da özellikle yüksek trafikli, sık güncellenen veya çok kişiselleştirilmiş sistemlerde maliyet oluşturabilir.

5) Hydration nedir, neden kritik?

Burada çoğu kişinin atladığı nokta şu:
SSR sayfa HTML’ini hazır gönderir ama bu tek başına yetmez. Sayfanın butonları, filtreleri, sepet işlemleri, modal’ları, canlı etkileşimleri için JavaScript’in sonradan yüklenip sayfayı “canlandırması” gerekir. Buna hydration denir.
Yani SSR şu demek değildir:
“Her şey çözüldü, JS önemsiz.”
Tam tersine:

• içerik erken görünür
• ama etkileşim için yine JS gerekir

SSR’de sayfa daha hızlı görünür ama hydration süresi yüzünden toplam etkileşim süresi her zaman dramatik biçimde daha iyi olmayabilir. Kullanıcı “sayfa geldi” hissini yaşar, ama scroll, click, state güncellemesi gibi hareketler hydration sonrası tam hazır hale gelir.
Bu SEO için neden önemli?
Çünkü Google açısından bazı sayfalarda ilk görünen HTML yeterli olur. Ama kullanıcı deneyimi açısından etkileşimin geç gelmesi:

• Core Web Vitals
• kullanıcı memnuniyeti
• bounce rate
• dönüşüm

gibi metrikleri dolaylı etkileyebilir.

6) SSG nedir? SSR ile farkı ne?

Static Site Generation (SSG), HTML’in her istekte sunucuda üretilmesi yerine build aşamasında önceden hazırlanmasıdır. Sonra bu statik dosyalar servis edil

Ne zaman mantıklı?

• blog
• rehber içerikler
• şehir bazlı hizmet landing sayfaları
• sık değişmeyen kategori açıklamaları
• dokümantasyon
• kampanya sayfaları

Türkiye’den örnek

Bir avukatlık sitesi düşünün:

• /bosanma-avukati-istanbul
• /miras-avukati-ankara
• /iscilik-alacagi-davasi

Bu sayfalar her saniye değişmiyorsa SSG çok mantıklıdır.
Sayfa HTML’i önceden üretilir, hızlı açılır, Google içeriği net okur.

7) Google render konusu SEO’da neden bu kadar önemli?

Çünkü modern JavaScript framework’lerde sorun çoğu zaman içerik üretmek değil, içeriği Google’a doğru anda ve doğru biçimde göstermektir.avaScript framework’lerin SEO’da yaşadığı ana problemler şöyledir:

• crawlability sorunu
• delayed rendering
• eksik indeksleme
• dinamik route/URL sorunları
• metadata yönetimi zorlukları
• structured data’nın geç oluşması
• JS yükü nedeniyle ilk içerik görünümünün gecikmesi

Basit mantık

Google sayfanıza geliyor.
Eğer ilk HTML şu ise:

<div id="root"></div>
<script src="app.js"></script>

ve asıl içerik JS çalışınca geliyorsa, teoride Google bunu işleyebilir. Ama pratikte:

• daha fazla render maliyeti oluşur
• gecikmeli indeksleme yaşanabilir
• kaynak tüketimi artar
• bazı içerikler geç veya eksik algılanabilir

Bu yüzden özellikle SEO odaklı sayfalarda “Google nasıl olsa JS okuyor” demek riskli bir rahatlık olur.

8) SEO açısından CSR ve SSR farkı

CSR’nin SEO riskleri

CSR’de arama motoru çoğu zaman ilk etapta eksik içerikle karşılaşabilir. Bu da şu riskleri doğurur:

• sayfa başlığının geç oluşması
• açıklama metninin HTML’de olmaması
• ürün/hizmet içeriğinin JS sonrası gelmesi
• iç linklerin bot tarafından geç keşfedilmesi
• schema markup’ın geç yüklenmesi
• canonical yapısının sorunlu olması

CSR için “SEO uyumu sağlamak adına pre-render, SSG veya server-side pre-render gibi ek çözümler gerekir” deniyor. Yani düz CSR çoğu projede SEO için ek iş çıkarır.

SSR’nin SEO avantajları

SSR’de:

• HTML hazır gelir
• bot içeriği daha erken görür
• indexlenebilirlik artar
• erişilebilirlik araçları daha iyi çalışır
• ilk içerik görünürlüğü iyileşir

Özellikle:

• blog
• haber
• e-ticaret kategori
• ürün detay
• emlak ilan detay
• doktor/diş kliniği sayfaları
• şehir bazlı SEO landing page’leri

gibi yapılarda SSR veya SSG ciddi avantaj sağlayabilir.

9) Erişilebilirlik tarafı da neden önemli?

SSR sadece SEO için değil, erişilebilirlik için de daha iyi olabilir. Çünkü screen reader gibi yardımcı teknolojiler HTML’i doğrudan daha erken okuyabilir. CSR’de ise içerik JS sonrası oluştuğu için erişilebilirlik deneyimi gecikebilir.
Bu ne demek?
Google sıralaması doğrudan “screen reader testi” değildir. Ama iyi yapılandırılmış, hızlı, anlamlı, semantik HTML çoğu zaman:

• botlar için daha okunaklıdır
• kullanıcı için daha düzgündür
• erişilebilirlik açısından daha iyidir

Yani teknik kalite ile SEO çoğu yerde birbirini besler.

10) Her sayfa SSR olmalı mı? Hayır.

Tek bir render modeli her proje için ideal değildir.

SSR seçilmesi uygun sayfalar

• blog yazıları
• kategori sayfaları
• ürün detay sayfaları
• haber sayfaları
• kampanya landing page’leri
• lokal SEO hizmet sayfaları
• rehber içerikler

CSR seçilmesi uygun sayfalar

• kullanıcı paneli
• admin
• CRM arayüzleri
• canlı veri dashboard’ları
• anlık etkileşimli uygulamalar
• oturum sonrası özel alanlar

Hibrit yaklaşım nerede devreye girer?

Ana sayfa, kategori ve ürün detay SSR/SSG olabilir; kullanıcı paneli ve sepet sonrası akış CSR olabilir.