Statik Site Oluşturucular

Hugo, Jekyll, Eleventy, Hexo, Gatsby ve Astro’nun her sayfayı önceden statik HTML’e dönüştürerek Google’ın JS oluşturma kuyruğunu nasıl devre dışı bıraktığı ve içeriği ilk istekte dizine eklenebilir kıldığı.

Bu sayfada 1 kanıt sinyali

Statik site oluşturucu (SSG), her sayfayı derleme zamanında tamamlanmış HTML’e dönüştürür. Böylece tarayıcı istemeden önce içerik ham HTML’de hazırdır; JavaScript oluşturma kuyruğu veya Wave 2 gecikmesi yoktur ve içerik hemen dizine eklenebilir. İstemci taraflı çatılara göre temel SEO avantajı budur. Hugo, Jekyll, Eleventy, Hexo, Gatsby ve Astro bu özelliği paylaşır; dil, tarayıcıya gönderdikleri JS miktarı ve yerleşik görsel/site haritası araçları değişir. Asıl sorun derleme güncelliğidir: statik site yalnızca son derlemesi kadar günceldir; içerik değişikliklerinin arama motorlarına ulaşması için yeniden oluşturulup dağıtılması gerekir. Bu siteyi ve patrickstox.com’u tam da bu nedenlerle Astro ile kurdum.

Kısa özet — SSG her rotayı derleme zamanında statik HTML’e önceden dönüştürür; dolayısıyla içerik ilk tarayıcı isteğinden önce yanıtta bulunur. Web Rendering Service, oluşturma kuyruğu veya “Wave 2” gecikmesi yoktur. Bu, bir siteye sağlayabileceğiniz en büyük dizine eklenebilirlik avantajıdır. SSG’ler, sayfayı tarayıcıda oluşturan CSR çatılarından ve her istekte sunucu tarafında oluşturabilen meta çatılardan ayrılır. Bu kümedeki Hugo, Jekyll, Eleventy, Hexo, Gatsby ve Astro statik HTML sunar; dil, JS yükü ve yerleşik site haritası/görsel araçları değişir. Asıl hata modu oluşturma değil, derleme güncelliğidir: statik site yalnızca son derlemesi kadar günceldir. Değişen içerik yeni derlemeyi tetiklemezse arama motorlarına sessizce eski HTML sunulur. Bu siteyi tam da bu ödünleşimler nedeniyle Astro ile çalıştırıyorum.

“Statik” gerçekte ne demektir?

Statik site oluşturucu, içerik ve şablonlarınızı bir derleme adımından geçirerek tamamlanmış HTML, CSS ve varlıklardan oluşan bir klasör çıkarır. SEO açısından kritik nokta HTML’in ne zaman üretildiğidir: her istek için veya tarayıcıda değil, derleme zamanında, bir kez ve herkes için. Google’ın JavaScript rehberi tarama, oluşturma ve dizine eklemeyi ayrı işleme aşamaları olarak tanımlar. SSG, HTML zaten tamamlanmış olduğundan ürettiği içerik için istemci taraflı oluşturmayı kritik yoldan çıkarır. Bu iddiaya ilişkin kanıt Google processes JavaScript through crawling, rendering, and indexing, while pre-rendered HTML is present before client execution. Kapsam: Google Search JavaScript processing; indexing is not guaranteed. Güven düzeyi: yüksek · Doğrulandı: Google: JavaScript SEO basics

Statik sitelerin dizine eklenmek için mümkün olan en güvenli mimari olmasının nedeni budur. İçerik yanıtın ilk baytında bulunur. Ham ve oluşturulmuş HTML arasında eşlik boşluğu yoktur; oluşturucunun başarılı olmasına bağımlılık veya durum tutmayan Chrome’a özgü tuhaflıklar için tasarım yapma gereği kalmaz.

SSG, istemci taraflı oluşturma ve meta çatılar

Üç mimari, HTML’in ortaya çıktığı üç farklı an:

  • Statik site üretimi (SSG). HTML herhangi bir istek gelmeden önce derleme zamanında bir kez oluşturulur. Düz dosyalar olarak, çoğu zaman CDN’den sunulur. İçerik ham HTML’dedir. Hugo, Jekyll, Eleventy ve Hexo ile varsayılan statik modlarında Gatsby ve Astro böyledir.
  • İstemci taraflı oluşturma (CSR). Sunucu asgari bir kabuk gönderir; JavaScript sayfayı tarayıcıda istek/çalışma zamanında oluşturur. İçerik, oluşturmanın başarılı olmasına bağlıdır. Varsayılan CSR kullanan React veya Vue SPA buna örnektir ve SEO için en riskli kurulumdur (bkz. JavaScript SEO).
  • Meta çatılar (SSR / hibrit). Next.js, Nuxt ve SvelteKit gibi çatılar HTML’i sunucuda her istek için oluşturabilir (SSR), bazı rotaları önceden oluşturabilir (SSG) veya ikisini karıştırabilir. İçerik HTML’dedir; ancak istek sırasında üretildiğinden saf SSG’de olmayan sunucu maliyeti ve gecikme eklenir.

Sınırlar yer yer bulanıklaşır: Gatsby ve Astro bileşen tabanlı oldukları ve düz dosyadan fazlasını yapabildikleri için bazen meta çatı sayılır. Ancak temel kullanım biçimlerinde statik oluşturucudurlar ve SEO açısından böyle değerlendirilmelidir. Önemli zihinsel model şudur: HTML ne kadar erken hazır olursa tarayıcı görmeden önce o kadar az şey ters gidebilir. En erken seçenek SSG’dir.

Altı oluşturucunun karşılaştırması

Altısının da çıktısı dizine eklenebilir statik HTML’dir. SEO kararını gerçekten etkileyen eksenlerde farkları şöyledir:

OluşturucuDil / geliştirildiği ortamTarayıcıya giden JSSite haritasıGörsel optimizasyonuEn uygun kullanım
HugoGoVarsayılan olarak yokYerleşik (sitemap.xml otomatik üretilir)Yerleşik görsel işleme (boyutlandırma, WebP)Hızlı derleme isteyen büyük içerik siteleri
JekyllRubyVarsayılan olarak yokEklenti (jekyll-sitemap)Eklentiler (jekyll-picture-tag vb.)GitHub Pages blogları; özgün SSG
Eleventy (11ty)JavaScript (Node)Varsayılan olarak yokŞablon/eklenti (siz üretirsiniz)Eklenti (@11ty/eleventy-img)Sıfır JS çıktısı ve esneklik isteyen JS geliştiricileri
HexoJavaScript (Node)Varsayılan olarak yok (temaya bağlı)Eklenti (hexo-generator-sitemap)EklentilerÖzellikle Node/Asya ekosistemindeki bloglar
GatsbyJavaScript / ReactReact paketi (hydrate eder)Eklenti (gatsby-plugin-sitemap)Yerleşik (gatsby-plugin-image, güçlü)Veri odaklı statik site isteyen React ekipleri
AstroJS/TS, herhangi bir UI çatısıVarsayılan olarak yok (yalnızca adalar)Resmî (@astrojs/sitemap)Yerleşik (astro:assets)JS vergisi olmadan bileşen isteyen içerik siteleri

Tablodan özellikle çıkarılması gereken birkaç nokta:

  • JS yükü, SEO’ya komşu temel ayrıştırıcıdır. Hugo, Jekyll, Eleventy ve Hexo siz eklemedikçe neredeyse hiç JavaScript göndermez. Gatsby, istemcide tam bir React paketini yeniden işler; HTML statik olduğu için yine dizine eklenebilir ama diğerlerinde olmayan bir Core Web Vitals maliyeti taşır. Astro, adalar mimarisiyle ortada durur: varsayılan çıktı statik HTML’dir ve JavaScript yalnızca ihtiyaç duyan etkileşimli bileşenlere (“adalara”) gider.
  • Derleme hızı ölçeğe göre farklılaşır. Hugo (Go) çok hızlı olmasıyla tanınır ve on binlerce sayfayı rahatlıkla işler. Node tabanlı oluşturucular büyük ölçekte daha yavaştır; Gatsby’nin derleme süreleri tarihsel olarak en büyük şikâyet konusudur.
  • Site haritaları ve görsel optimizasyonu hemen her yerde büyük ölçüde çözülmüştür; Hugo ve Astro kutudan çıktığı hâliyle daha fazlasını sunarken Jekyll/Eleventy/Hexo bakımlı eklentilere dayanır.
  • Gatsby’nin yayın temposu belirgin biçimde yavaşladı. Proje arşivlenmedi ve hâlâ yamalar yayımlıyor; ancak Temmuz 2026 itibarıyla GitHub deposunda son 90 günde yalnızca birkaç commit ve şubat ayından beri tek bir küçük sürüm görülüyor. Bugün bir oluşturucu seçiyorsanız hydration/CWV maliyetinin yanında daha etkin geliştirilen bir seçeneğe karşı bunu da tartın.

Bu siteyi neden Astro ile kurdum?

Bu siteyi ve patrickstox.com’u Astro ile kurdum; gerekçem bu sayfanın özetiyle aynıdır. Gerçek bileşenlerle Markdown/MDX kullanmak istedim ama bunu elde etmek için her sayfada JavaScript vergisi ödemek istemedim. Astro varsayılan olarak istemci tarafında sıfır JS gönderir: okuduğunuz sayfalar statik HTML olarak sunulur, yalnızca lens sekmeleri ve test gibi az sayıdaki etkileşimli parça JavaScript yükler. Böylece bileşen tabanlı yazım deneyiminden vazgeçmeden klasik SSG’nin dizine eklenebilirliğini ve iyi Core Web Vitals değerlerini elde ederim. Etkileşimsiz dev bir içerik kümesinde aşırı hızlı derleme gerekse Hugo; React veri katmanı gerekse Gatsby açık seçim olurdu. Az sayıda etkileşimli ayrıntı içeren bu yoğun içerik sitesi için doğru ödünleşim Astro’dur.

Tek gerçek sorun: derleme güncelliği

Yukarıdakilerin hepsi avantajdı. İnsanları yakalayan sorun şudur:

Statik site yalnızca son derlemesi kadar günceldir. HTML, derleme zamanında dondurulmuş bir anlık görüntüdür. Bir fiyatı değiştirin, bilgiyi düzeltin, yazı yayımlayın veya başlık etiketini güncelleyin: yeniden oluşturup dağıtana kadar bunların hiçbiri arama motorlarına ulaşmaz. Her istekte sayfayı veritabanından kuran canlı sunucu olmadığı için değişikliği otomatik alacak bir mekanizma da yoktur. Bu iddiaya ilişkin kanıt Static build output remains a snapshot until the project is rebuilt and redeployed. Kapsam: Astro static build workflow as a representative example. Güven düzeyi: yüksek · Doğrulandı: Astro: Build and deploy

Uygulamada bunun anlamı şudur:

  • İçerik düzenlemeleri derlemeyi tetiklemelidir. Headless CMS veya Git kullanıyorsanız yayımlama işleminin dağıtımı başlatması için webhook kurun. Yalnızca elle çalışan derleme süreci, eski fiyatların ve “hayalet” 404s sayfalarının dizine sızma yoludur.
  • Sık değişen veriler zordur. Stok, fiyat ve canlı sayaçlar siz yeniden derleyebildiğinizden hızlı değişiyorsa statik kopya geride kalır. Artımlı derlemeler, planlı yeniden derlemeler veya değişken rotalarda SSR/ISR kullanan hibrit meta çatı burada işe yarar.
  • Zamana duyarlı sayfalar bir ritim gerektirir. “Bugünün fırsatları” derleme zamanında sabitleniyorsa derleme en az günlük çalışmalıdır; aksi hâlde sayfa yanlış bilgi verir.

Bunların hiçbiri vazgeçme nedeni değildir; mesele disiplindir. SSG’lerin SEO için harika olmasının nedeni (HTML’in önceden kararlaştırılması), içerik değiştiğinde onu yeniden kararlaştırma konusunda bilinçli davranmanızın da nedenidir.

Sonraki durak: statik site oluşturucular kümesi

Bu merkez haritadır. Aşağıdaki her oluşturucunun dilini, JS yükünü, site haritası/görsel araçlarını, çatıya özgü SEO sorunlarını ve derlemeleri güncel tutma yöntemlerini anlatan ayrı bir ayrıntılı rehberi vardır:

  • Hugo SEO — Go tabanlı, sıfır JS ve çok hızlı derleme; otomatik site haritası, yerleşik görsel işleme ve dev içerik kümelerinin yönetimi.
  • Jekyll SEO — özgün SSG ve GitHub Pages varsayılanı; jekyll-seo-tag, jekyll-sitemap ve GitHub Pages’teki eklenti sınırlaması.
  • Eleventy (11ty) SEO — JavaScript tabanlı, sıfır JS çıktısı; şablonlardan site haritası üretme ve duyarlı görseller için eleventy-img.
  • Hexo SEO — Node blog oluşturucusu; site haritası/akış eklentileri, tema JS’i ve kalıcı bağlantı/kanonik düzeni.
  • Gatsby SEO — React tabanlı statik üretim; hydration/CWV ödünleşimi, gatsby-plugin-image, gatsby-plugin-sitemap ve derleme zamanında veri alma.
  • Astro SEO — varsayılan sıfır JS, adalar mimarisi, @astrojs/sitemap, astro:assets, View Transitions ve Server Islands geri dönüş davranışı.

Yukarıdaki her konu bu merkezin altında yer alır ve kenar çubuğunda da bulunur.

Daha geniş bağlam; Google’ın JavaScript’i nasıl oluşturduğu, eşlik ve etkileşim hata biçimleri ile JS gerektiğinde seçilecek oluşturma modu için üst JavaScript SEO merkezine bakın.

Uzman notu ekle

Uzman alıntısını sabitle

Yeni biri mi? Sahipsiz profilini şu bağlantıdan oluşturun: /admin/experts/ → Uzman alıntısını sabitle Bu işlemi önce tamamlayın.