Astro ile Neden %100 SEO Skoru Aldık?
Saf HTML üreten Astro framework ile Core Web Vitals ve Lighthouse skorlarımızı nasıl maksimize ettik? Teknik detaylar ve karşılaştırmalı analiz.
Kurumsal web sitemizi React SPA’dan Astro’ya taşıdığımızda Lighthouse SEO skoru 61’den 100’e çıktı. Bu yazıda neden ve nasıl yaptığımızı anlatıyoruz.
Sorun: React SPA ve SEO
Geleneksel React Single Page Application (SPA) mimarisinde tüm içerik JavaScript ile render edilir. Google botu sayfayı ziyaret ettiğinde boş bir <div id="root"> görür; asıl içeriği okuyamaz.
<!-- Google'ın gördüğü (SPA) -->
<div id="root"></div>
<script src="/bundle.js"></script>Bu durum şu sorunları yaratır:
- Crawler’lar içeriği göremez — arama motorları boş sayfa indexler
- Core Web Vitals düşer — büyük JS bundle LCP süresini artırır
- TTFB yüksek kalır — tarayıcı JS’i indirip çalıştırana kadar ekran boş
Çözüm: Astro ile Statik HTML
Astro build sırasında her sayfayı hazır HTML olarak üretir. Sunucuya istek geldiğinde tarayıcı anında içeriği görür, JavaScript beklenmez.
<!-- Google'ın gördüğü (Astro) -->
<h1>Geleceği Kanatlandırıyoruz.</h1>
<p>Serçe Bilişim olarak işletmenizi...</p>React Islands Mimarisi
Astro’nun en güçlü özelliği Island Architecture. Sayfanın sadece etkileşimli bölümleri (animasyonlar, formlar) React olarak yüklenir. Geri kalanı sıfır JavaScript ile çalışır.
<!-- Navbar: sıfır JS, saf HTML -->
<Navbar />
<!-- Hero: animasyon için sadece bu bölüm React yükler -->
<Hero client:load />
<!-- Services: ekrana girince yükle, performans kazancı -->
<Services client:visible />Sonuçlar
| Metrik | React SPA | Astro |
|---|---|---|
| Lighthouse SEO | 61 | 100 |
| Lighthouse Performance | 74 | 98 |
| LCP | 4.2s | 0.8s |
| JS Bundle | 420KB | ~12KB |
| Google Indexleme | Kısmi | Tam |
Sonuç
Eğer siteniz ağırlıklı olarak statik içerik barındırıyorsa (kurumsal site, blog, portfolio), Astro en iyi tercih. Hem geliştirme deneyimi hem de son kullanıcı performansı açısından React SPA’dan çok üstün.