Astro ile Nasıl %100 SEO Skoru Aldık?

Kurumsal web sitemizi React SPA’dan Astro’ya taşıdığımızda Lighthouse SEO skorumuz 61’den 100’e çıktı. Aynı içerik, aynı tasarım, tek fark: tarayıcıya artık monte edilmesi gereken bir kutu değil, kapıdan kutusuz giren hazır bir mobilya gönderiyoruz. Bu yazıda o farkın nereden geldiğini ve nasıl elde ettiğimizi anlatıyoruz.

Sorun: Tarayıcı Neden Boş Bir Sayfa Görüyordu

React SPA (Single Page Application) mimarisinde sunucu, tarayıcıya hazır bir sayfa değil, boş bir kutu ve montaj talimatı gönderir. Google botu siteyi ziyaret ettiğinde karşılaştığı şey de tam olarak budur: içeriği değil, içeriğin nereden indirilip nasıl kurulacağının kodunu görür.

<!-- Google'ın gördüğü (SPA) -->
<div id="root"></div>
<script src="/bundle.js"></script>

Sipariş ettiğiniz mobilyanın kutusuz, parça parça ve tornavidasız gelmesi gibi düşünün. Oturabilmeniz için önce kutuyu açmanız, parçaları tanımanız, doğru sırayla vidalamanız gerekir. Tarayıcı da aynı zahmeti çeker: bundle.js dosyasını indirir, çalıştırır, ancak ondan sonra sayfayı “monte eder”. Bu montaj süresince ekranda gerçek bir şey yoktur; sadece boş bir oda.

Bu bekleme üç somut sorun doğurur:

• Crawler’lar montajı beklemez: çoğu tarama botu boş <div>’i kaydedip geçer, asıl içeriği hiç görmez.
• Core Web Vitals çöker: büyük JavaScript paketi indirilip çalışana kadar geçen süre, LCP (En Büyük İçerikli Boyama) metriğini doğrudan şişirir.
• Kullanıcı boş ekrana bakar: TTFB (İlk Byte Süresi) düşük olsa bile, gördüğü şey içerik değil, montaj sesidir.

Çözüm: Kapıya Hazır Mobilya Gibi Gelen HTML

Astro, bu montaj işini sizin salonunuzda değil, kendi atölyesinde (build sırasında) yapar. Her sayfa, siz ziyaretçiye göndermeden önce tamamen kurulmuş, oturmaya hazır halde üretilir. Tarayıcıya istek geldiğinde JavaScript’in inmesini beklemeye gerek kalmaz; içerik zaten oradadır.

<!-- Google'ın gördüğü (Astro) -->
<h1>Geleceği Kanatlandırıyoruz.</h1>
<p>Serçe Bilişim olarak işletmenizi...</p>

Google botu için fark, kapalı bir kutuyla boş bir montaj talimatı arasındaki fark kadar büyük: biri anlaşılmaz, diğeri anında okunabilir.

Peki Hiç Hareket Eden Bir Şey Kalmıyor mu?

Her mobilyanın tamamen sabit olması gerekmez; bazı parçaların (çekmece, katlanır kapak) hareketli kalması gerekir. Astro’nun Island Architecture (Ada Mimarisi) yaklaşımı da böyle çalışır: sayfanın büyük kısmı sabit ve JavaScript’siz kalırken, yalnızca gerçekten etkileşim gereken bölümler (form, animasyon) kendi küçük JavaScript adalarını yükler.

<!-- Navbar: sabit mobilya, sıfır JS -->
<Navbar />

<!-- Hero: animasyon için sadece bu bölüm JS yükler -->
<Hero client:load />

<!-- Services: ekrana girince yüklenir, ilk açılışı yormaz -->
<Services client:visible />

Sonuç, tüm eviniz monte edilmiş gibi görünürken sadece ihtiyaç duyduğunuz çekmecenin menteşesinin çalışmasıdır; geri kalan hiçbir yeri gereksiz yere ağırlaştırmaz.

Sonuçlar: Aynı Site, Yeni Rakamlar

Taşımadan önce ve sonra ölçtüğümüz rakamlar, aradaki farkın soyut bir teori olmadığını gösteriyor:

Metrik	React SPA	Astro
Lighthouse SEO	61	100
Lighthouse Performance	74	98
LCP	4.2s	0.8s
JS Bundle	420KB	~12KB
Google İndeksleme	Kısmi	Tam

420KB’lik bir montaj talimatı, 12KB’a indi. Google artık kutuyu açıp beklemek zorunda kalmıyor; kapıdan girer girmez içeriği okuyor.

Hangi Siteler İçin Mantıklı

Bu geçiş her proje için doğru cevap değil; sürekli değişen, kullanıcıya özel veri gösteren bir uygulamada Island Architecture’ın kendisi de bir SPA’nın esnekliğini tam karşılamayabilir. Ama içeriği ağırlıklı olarak durağan olan bir kurumsal site, blog veya portföy için denklem nettir: ziyaretçiye kutu değil, hazır mobilya gönderin.