Prerender Nedir, SEO'ya Etkisi

Bir SPA yayınladınız, sayfalar tarayıcıda mükemmel çalışıyor, ama WhatsApp'ta bağlantı paylaştığınızda önizleme kartı boş çıkıyor ve Search Console'da içerik günlerce indekslenmiyor. Sebep basit: sunucunuzun gönderdiği ham HTML'in içinde hiçbir içerik yok, yalnızca boş bir kök öğe ve bir JavaScript bağlantısı var. Prerender tam olarak bu boşluğu doldurur — sayfaları önceden bir tarayıcıda çizip sonucu statik HTML dosyası olarak kaydeder, böylece bot da kullanıcı da içeriği ilk yanıtta görür.

Bu yazıda prerender'ın ne olduğunu, SSR ve statik üretimden farkını, SEO açısından neyi çözüp neyi çözmediğini ve gerçek bir kurulumun nasıl yapılacağını anlatacağım. Ayrıca "bota farklı içerik gösterme" anlamına gelen dinamik render yaklaşımının neden riskli olduğunu ve yapılan çalışmanın gerçekten işe yarayıp yaramadığını nasıl doğrulayacağınızı göstereceğim.

Prerender Nedir#

Prerender, JavaScript ile çizilen bir sayfayı yayına almadan önce başsız (headless) bir tarayıcıda açıp, tarayıcının ürettiği son DOM'u HTML dosyası olarak kaydetme işlemidir. Sonuçta her rota için diskte gerçek bir index.html dosyası oluşur ve web sunucusu isteği doğrudan bu dosyayla karşılar.

Akış şöyledir:

1. Uygulamanız normal şekilde derlenir.
2. Yerel bir sunucu ayağa kaldırılır.
3. Başsız bir tarayıcı, rota listesindeki her adresi tek tek açar.
4. Sayfanın içeriğinin hazır olduğu bir işaret beklenir.
5. O anki HTML alınır ve dist/hakkimizda/index.html gibi bir yola yazılır.
6. Yayında sunucu, istenen yolda böyle bir dosya varsa onu; yoksa uygulamanın kabuğunu servis eder.

Kullanıcı sayfayı açtığında hazır HTML'i görür, ardından JavaScript yüklenip uygulamayı devralır ve site normal SPA gibi çalışmaya devam eder. Yani prerender, SPA'yı bozmadan ona statik bir "ilk kare" ekler.

En önemli ayrım şudur: prerender derleme zamanında çalışır. Sunucuda hiçbir ek süreç, hiçbir ek CPU maliyeti yoktur. Bu yüzden paylaşımlı hosting dahil her ortamda yayınlanabilir.

Prerender, SSR ve Statik Üretim Arasındaki Fark#

Üçü de sonuçta "botun ve kullanıcının ilk yanıtta içerik görmesini" sağlar ama yolları farklıdır.

Prerender ile statik üretim arasındaki fark inceliktir ama önemlidir: SSG'de HTML'i bir şablon motoru üretir, prerender'da ise gerçek bir tarayıcı uygulamanızı çalıştırıp sonucu fotoğraflar. Yani mevcut SPA kodunuzu hiç değiştirmeden statik çıktı alabilirsiniz. Bedeli, derlemenin daha yavaş olmasıdır: her rota için bir tarayıcı sekmesi açılır.

SSR ile farkı ise zamanlamadır. SSR her istekte çalıştığı için kişiye özel içerik üretebilir ama sunucuda sürekli çalışan bir uygulamaya ve önbellek katmanına ihtiyaç duyar; ayrıntısını sunucu tarafı render (SSR) nedir yazısında anlattım. Prerender böyle bir altyapı gerektirmez ama yalnızca herkes için aynı olan sayfalarda kullanılabilir. İki mimarinin genel karşılaştırması için SPA ve SSR performans karşılaştırması yazısına bakabilirsiniz.

SEO'ya Etkisi: Neyi Çözer, Neyi Çözmez#

Prerender'ın SEO faydasını abartmak da küçümsemek de kolaydır; net olalım.

Çözdüğü şeyler. Birincisi indeksleme gecikmesi: arama motoru JavaScript çalıştırabiliyor ama bunu ikinci bir aşamada, sıraya girerek yapıyor. Prerender ile içerik ilk taramada görülür, dolayısıyla yeni ve güncellenen sayfalar daha hızlı indekslenir. İkincisi sosyal paylaşım kartları: önizleme botları JavaScript çalıştırmaz, bu yüzden prerender olmadan hangi sayfayı paylaşırsanız paylaşın aynı genel kart çıkar. Üçüncüsü LCP: içerik ilk yanıtta geldiği için kullanıcı JavaScript'i beklemeden sayfayı görür ve bu, sayfa deneyimi metriklerine doğrudan yansır.

Çözmedikleri. Prerender, içeriğinizi iyileştirmez ve kötü yazılmış başlık etiketlerini düzeltmez. Etkileşim gecikmesini (INP) de iyileştirmez, çünkü JavaScript yine indirilip çalıştırılır. Ayrıca kullanıcıya göre değişen sayfalarda (panel, sepet) kullanılamaz.

Kritik bir ayrıntı: prerender sırasında her sayfanın kendi başlık ve meta etiketlerini üretmesi gerekir. Uygulamanız bunları JavaScript ile ayarlıyorsa, prerender işleminin o etiketler yazıldıktan sonra fotoğraf çekmesini garanti etmelisiniz. Aksi halde bütün sayfalar aynı varsayılan başlıkla kaydedilir ve elinizde kalan şey, boş kart yerine yanlış kart olur.

Prerender Kurulumu#

En yaygın kurulum, derleme sonrası çalışan bir betikle başsız Chromium sürmektir. İskelet şöyledir:

// prerender.js — derlemeden sonra çalıştırılır
import { chromium } from 'playwright';
import { writeFile, mkdir } from 'node:fs/promises';
import { dirname, join } from 'node:path';

const ROTALAR = ['/', '/hakkimizda', '/hizmetler', '/blog', '/iletisim'];
const TABAN = 'http://127.0.0.1:4173';   // yerel önizleme sunucusu
const CIKTI = './dist';

const tarayici = await chromium.launch();
const baglam = await tarayici.newContext();

for (const rota of ROTALAR) {
  const sayfa = await baglam.newPage();

  // Dış isteklere hiç çıkma: analitik, reklam, üçüncü parti hepsi engellensin
  await sayfa.route('**/*', (yol) => {
    yol.request().url().startsWith(TABAN) ? yol.continue() : yol.abort();
  });

  await sayfa.goto(TABAN + rota, { waitUntil: 'networkidle' });

  // İçeriğin gerçekten çizildiğini kanıtlayan bir işaret bekle
  await sayfa.waitForSelector('link[rel="canonical"]', { timeout: 15000 });

  const html = await sayfa.content();
  const hedef = join(CIKTI, rota === '/' ? 'index.html' : rota + '/index.html');
  await mkdir(dirname(hedef), { recursive: true });
  await writeFile(hedef, html, 'utf8');

  console.log('yazildi:', hedef);
  await sayfa.close();
}

await tarayici.close();

Bu betikteki üç satır tecrübeyle eklenmiştir ve atlanmamalıdır.

Dış istekleri engellemek. Prerender sırasında analitik ve reklam betikleri de çalışır; engellemezseniz her derleme sahte trafik üretir ve üçüncü parti kodlar üretilen HTML'e gömülür. Ayrıca derleme, dış servislerin yavaşlığına bağımlı hale gelir.

Doğru bekleme işareti seçmek. networkidle tek başına yeterli değildir; sayfanın kabuğu (menü, altbilgi) yüklendiği anda ağ sessizleşebilir ama asıl içerik hâlâ gelmemiş olabilir. Bu yüzden içeriğin varlığını kanıtlayan somut bir işaret bekleyin: sayfaya özel canonical etiketi, bir veri özniteliği ya da içerik kapsayıcısının belirli bir uzunluğa ulaşması gibi.

Zaman aşımını hatayla karşılamak. İşaret gelmezse o rotayı sessizce boş kaydetmek en tehlikeli sonucu doğurur: derleme yeşil görünür ama siteniz yüzlerce içeriksiz sayfa yayınlar. Zaman aşımında ya hata verip derlemeyi durdurun ya da o rota için dosya hiç yazmayın; böylece sunucu uygulama kabuğuna geri düşer ve içerik en azından tarayıcıda çizilir.

Yayın tarafında sunucu, varsa statik dosyayı, yoksa uygulama kabuğunu servis edecek şekilde ayarlanır:

server {
    root /var/www/firmaniz/dist;

    location / {
        # 1) tam eşleşen dosya  2) dizin içindeki index.html  3) SPA kabuğu
        try_files $uri $uri/index.html /app.html;
    }
}

Buradaki app.html prerender edilmemiş ham SPA kabuğudur. Yaygın bir hata, geri düşüşü index.html olarak bırakmaktır: prerender sonrası index.html artık ana sayfanın statik kopyasıdır, dolayısıyla bilinmeyen bir yola giren kullanıcı bir an için ana sayfa içeriğini görür.

Dinamik Render ve Cloaking Riski#

Bir başka yaklaşım daha vardır: isteği gönderenin bot mu insan mı olduğuna bakıp bota önceden çizilmiş HTML, kullanıcıya normal SPA göndermek. Buna dinamik render denir ve bir dönem yaygın biçimde önerildi.

Bugün bu yaklaşım geçici bir çözüm olarak görülüyor ve uzun vadeli bir strateji olarak önerilmiyor. Sebepleri pratiktir. Bot listesini güncel tutmak zorundasınız; yeni bir bot tanımadığınızda boş sayfa görür. İki farklı çıktı ürettiğiniz için hata ayıklamak zorlaşır. En önemlisi de risk şudur: bota gösterdiğiniz içerik kullanıcıya gösterdiğinizden farklı olursa bu, arama motorları tarafından yanıltma (cloaking) sayılır ve yaptırımı ağırdır.

Sınır nettir: bot ile kullanıcıya aynı içeriği farklı biçimde sunmak kabul edilebilir; farklı içerik sunmak değildir. Yine de bu ince çizgide yürümek yerine, herkese aynı statik HTML'i vermek hem daha basit hem de risksizdir. Prerender'ın dinamik render'a üstünlüğü tam olarak budur: ayrım yapmaz.

Doğrulama: Botun Ne Gördüğünü Kontrol Etmek#

Prerender kurduktan sonra "çalışıyor" demeden önce mutlaka ham HTML'e bakın. Tarayıcıda sağ tık ile "sayfa kaynağını görüntüle" yeterli değildir; en güvenilir yol JavaScript çalıştırmayan bir istemcidir:

# 1) Ham HTML'de gerçek içerik var mı?
curl -s https://firmaniz.com/hizmetler | grep -c "<h1"

# 2) Sayfaya ÖZEL başlık ve meta üretiliyor mu?
curl -s https://firmaniz.com/hizmetler | grep -o '<title>[^<]*</title>'
curl -s https://firmaniz.com/hizmetler | grep -o 'property="og:[^"]*" content="[^"]*"'

# 3) Canonical doğru sayfayı gösteriyor mu?
curl -s https://firmaniz.com/hizmetler | grep -o 'rel="canonical"[^>]*'

# 4) Yanıt boyutu makul mü? (birkaç KB ise prerender çalışmamıştır)
curl -s https://firmaniz.com/hizmetler | wc -c

İki farklı rotanın çıktısını karşılaştırmak en hızlı sağlık kontrolüdür:

for yol in / /hizmetler /blog /iletisim; do
  baslik=$(curl -s "https://firmaniz.com$yol" | grep -o '<title>[^<]*</title>')
  echo "$yol -> $baslik"
done

Bütün rotalar aynı başlığı dönüyorsa prerender ya hiç çalışmamıştır ya da meta etiketleri yazılmadan fotoğraf çekilmiştir. Ayrıca Search Console'daki URL denetleme aracıyla Google'ın işlenmiş HTML'ini görüp kendi curl çıktınızla karşılaştırın; ikisi büyük ölçüde örtüşmelidir.

Sık Yapılan Hatalar#

Rota listesini elle yönetmek. Yeni sayfa eklendiğinde listeye eklenmeyi unutmak kaçınılmazdır ve o sayfa sessizce prerender edilmemiş kalır. Listeyi içerik kaynağınızdan (dosya sistemi, CMS API'si, site haritası) otomatik üretin.

Prerender'ı fail-soft bırakmak. Betik hata alsa bile derlemenin başarılı sayılması, içeriksiz bir sitenin yayına çıkmasına yol açar ve CI yeşil göründüğü için kimse fark etmez. En azından üretilen dosya sayısını beklenen rota sayısıyla karşılaştıran bir kontrol ekleyin.

Fotoğrafı çok erken çekmek. Sabit bir bekleme süresi (örneğin 500 ms) koymak, geliştirme makinenizde çalışır ama derleme sunucusu yük altındayken tutmaz. Süre yerine somut bir DOM işareti bekleyin.

Kullanıcıya özel içeriği prerender etmek. Giriş yapmış kullanıcıya ait bir bilgi statik dosyaya kaydedilirse, o dosyayı sonraki tüm ziyaretçiler görür. Prerender yalnızca herkese açık ve herkes için aynı olan sayfalara uygulanmalıdır.

Zaman damgası ve rastgele içerik. "Son güncelleme: şimdi" gibi ifadeler prerender anında donar ve aylarca eski bir tarih gösterir. Bu tür değerleri sayfa yüklendikten sonra istemcide doldurun.

Prerender'ı bahane edip JavaScript'i şişirmek. Prerender ilk görünümü kurtarır ama kullanıcı sayfayı kullanmaya başladığında yine tüm paketi indirmiştir. Etkileşim gecikmesi için ayrıca çalışmanız gerekir; mobil hız optimizasyonu yazısındaki JavaScript azaltma adımları burada da geçerlidir.

Sıkça Sorulan Sorular#

Prerender SEO için gerçekten gerekli mi#

Sitenizin ham HTML'i boşsa evet, oldukça faydalıdır. Arama motorları JavaScript çalıştırabildiği için içeriğiniz eninde sonunda indekslenir ama bu ikinci aşama gecikmeli çalışır; sık güncellenen içerikte bu gecikme trafik kaybına dönüşür. Ayrıca sosyal paylaşım botları JavaScript çalıştırmadığı için prerender olmadan paylaşım kartlarınız hiçbir zaman sayfaya özel olmaz. Sunucudan zaten dolu HTML gönderiyorsanız prerender'a ihtiyacınız yoktur.

Prerender ile SSR arasında hangisini seçmeliyim#

Sayfalarınız herkes için aynıysa prerender daha basit ve daha ucuzdur: sunucuda çalışan ek bir süreç, ters vekil ya da önbellek katmanı gerektirmez ve paylaşımlı hostingde bile yayınlanabilir. Kullanıcıya göre değişen ya da dakika dakika güncellenen içerik varsa SSR gerekir. Çoğu sitede doğru cevap karışımdır: herkese açık içerik sayfalarını prerender edin, kişiye özel bölümleri istemcide ya da SSR ile üretin.

Prerender derleme süremi ne kadar uzatır#

Her rota için bir tarayıcı sekmesi açıldığından, süre rota sayısıyla doğru orantılı artar. Onlarca sayfalık bir sitede bu ek yük genellikle dakikanın altındadır; yüzlerce sayfada ise paralel çalıştırma gerekir. İki pratik iyileştirme vardır: aynı tarayıcı bağlamında birden fazla sekmeyi eşzamanlı sürmek ve derleme çıktısı değişmediğinde önceki yakalamaları yeniden kullanan bir önbellek katmanı eklemek. İkincisi, içerik değişmeyen sürümlerde tarayıcıyı hiç başlatmamanızı sağlar.

Prerender edilmiş sayfa kullanıcı için de hızlı mı#

Evet, ve bu genellikle SEO faydasından bile daha değerlidir. Kullanıcı ilk yanıtta içeriği gördüğü için LCP belirgin biçimde düşer; JavaScript arka planda yüklenirken sayfa okunabilir durumdadır. Ancak sayfa görünür olduğu halde bir süre tıklamalara cevap vermeyebilir, çünkü uygulamanın devralması JavaScript'in çalışmasını bekler. Bu yüzden prerender'ı, gönderilen JavaScript'i azaltma çalışmasının yerine değil yanında yapın.

Prerender edilen sayfalarda meta etiketler nasıl doğru üretilir#

Uygulamanızın her rota için kendi başlık, açıklama, canonical ve og: etiketlerini ayarlaması gerekir. Kritik nokta zamanlamadır: fotoğrafı, bu etiketler DOM'a yazıldıktan sonra çekmelisiniz. En sağlam yöntem, sayfaya özel bir etiketin varlığını bekleme koşulu olarak kullanmaktır — örneğin sayfanın kendi canonical bağlantısı. Böylece etiketler yazılmadan hiçbir dosya kaydedilmez ve "hepsi aynı başlıkla kaydedilmiş" hatası yapısal olarak imkânsız hale gelir.

Prerender edilmiş dosyalar güncel içeriği göstermez mi#

Gösterir, çünkü prerender her derlemede yeniden çalışır; içeriğiniz değiştiğinde yeni bir derleme alıp yayınlarsınız. Sorun yalnızca çok sık değişen veriler için ortaya çıkar: fiyat, stok, canlı sayaç gibi. Bu tür alanları statik HTML'e gömmek yerine sayfa açıldıktan sonra küçük bir API isteğiyle doldurun. Böylece sayfanın kendisi statik ve hızlı kalırken değişken veri her zaman güncel olur.

Kapanış#

Prerender, JavaScript ile çizilen bir siteye mimarisini değiştirmeden statik bir ilk kare kazandırmanın en pratik yoludur: bot ve kullanıcı içeriği ilk yanıtta görür, sunucuda ise fazladan hiçbir şey çalışmaz. Aklınızda kalması gereken dört madde: fotoğrafı sabit bir süreyle değil somut bir DOM işaretiyle çekin; başarısız bir yakalamayı sessizce boş dosya olarak kaydetmeyin; rota listesini elle değil içerik kaynağınızdan üretin; ve prerender'ın LCP'yi iyileştirse de etkileşim gecikmesini düzeltmediğini unutmayın.

Prerender edilmiş bir site sonuçta yalnızca statik dosyalardan oluşur; bu yüzden ağır bir altyapıya ihtiyaç duymaz. Web hosting paketlerimiz bu tür bir çıktıyı servis etmek için fazlasıyla yeterlidir. Derleme adımını kendi sunucunuzda otomatikleştirmek ya da başsız tarayıcı çalıştırmak isterseniz tam root erişimli VDS ve bulut sunucu paketlerimize bakabilir, yönlendirme ve sunucu yapılandırması tarafında destek isterseniz sunucu yönetimi hizmetimizden yararlanabilirsiniz. Teknik SEO tarafını bütün olarak ele almak isterseniz SEO sayfamız başlangıç noktasıdır.