Astro ile Neden %100 SEO Skoru Aldık?

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.