← Blog · 20 Haziran 2026

SPA blogunu AI motorlarına görünür kılmak: build-time prerender

Bu blog bir Vue SPA. Sorun şu: GPTBot, ClaudeBot, PerplexityBot gibi AI crawler’larının çoğu JavaScript çalıştırmaz. Yani /blog/<slug> adresine geldiklerinde ham HTML’de gördükleri tek şey boş bir <div id="app"> — en alıntılanabilir içeriğim, kod ve istatistik dolu yazılar, onlara görünmüyordu.

SSR’a geçmeden çözmek

Tam SSR kurmak (Nuxt’a taşımak gibi) altı yazılık bir blog için fazla. Daha küçük bir yol var: postbuild’de prerender. Vite build bittikten sonra çalışan bir Node scripti, dist/index.html’i şablon alıp her yazı için statik bir sayfa basıyor:

const template = readFileSync("dist/index.html", "utf8");
let html = template
  .replace(/<title>.*?<\/title>/, `<title>${post.title}</title>`)
  .replace("</head>", `${blogPostingJsonLd}</head>`)
  .replace(/<div id="app">[\s\S]*?<\/div>/, `<div id="app">${articleHtml}</div>`);
writeFileSync(`dist/blog/${post.slug}/index.html`, html);

Sonuç: dist/blog/<slug>/index.html — gövde, per-route canonical ve BlogPosting/FAQPage JSON-LD’si JS olmadan ham HTML’de. nginx bunu try_files $uri $uri/index.html ile redirect’siz servis ediyor; Vue mount edince #app’i devralıyor, JS’li kullanıcıda hiçbir fark olmuyor.

Neden işe yarıyor

JS çalıştırmayan crawler artık boş kabuk yerine gerçek metni okuyor. Google’ın JavaScript SEO rehberi bile render maliyetinden söz eder; AI motorlarının çoğu o maliyeti hiç ödemez — render edilmiş içerik onlara hazır gelmeli. Bilinmeyen bir slug için prerender yok, o yüzden nginx index.html’e düşüp SPA’nın kendi 404’ünü gösteriyor.

Küçük bir postbuild scripti, koca bir SSR migrasyonunun çözeceği problemi çözdü — bu blogun ölçeğinde tam yeterli.