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.

Astro’nun Çözümü: Kapıya Kurulu 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>Sistem Kuşu 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 kendi küçük JavaScript adalarını yükler. Geçişi yaptığımız Mart 2026’da sayfayı biz de böyle kurmuştuk:

<!-- 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:

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.

Bu tablo geçişin yapıldığı Mart 2026 ölçümüdür; o günden bu yana site bir adım daha attı ve bir sonraki bölüm onu anlatıyor.

Sonradan Ne Oldu: Adaları da Kaldırdık

Yukarıdaki ada kurulumu birkaç ay yaşadı, sonra bir denetimde şunu fark ettik: adaların içindeki React bileşenleri artık hiçbir yerden çağrılmıyordu. Aynı bölümlerin .astro ikizleri yazılmıştı ve sayfada gerçekten render edilenler onlardı; React tarafı, kimsenin kullanmadığı hâlde çıktıya yaklaşık 194 KB’lik ölü bir çalışma zamanı basmaya devam ediyordu.

Ağustos 2026’da o bileşenler silindi ve React entegrasyonu yapılandırmadan tamamen çıkarıldı. Site bugün sıfır çatı JavaScript’i gönderiyor; megamenü, çerez paneli ve iletişim formu dahil bütün etkileşim, birkaç satırlık düz <script> bloklarıyla çalışıyor.

Bunu burada anlatmamızın sebebi hikâyeyi tamamlamak değil. Bu yazının kendisi, kaldırdığımız bir kurulumu örnek olarak gösteriyordu ve düzeltilmeseydi tam olarak internette bayat tavsiyenin nasıl dolaşımda kaldığını anlattığımız yazıdaki kusurun bir örneği olurdu: yazıldığı gün doğru olan, sonradan sessizce yanlışa dönen bir cümle. Ada mimarisi hâlâ geçerli bir Astro yaklaşımı; yalnızca bizim sitemizin artık ona ihtiyacı yok.

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.

Aynı yaklaşımı kendi sitemizden sonra bir müşteri mağazasında da uyguladık: orada LCP 24 saniyeden 4,4 saniyeye indi ve ürün görsellerinin dosya boyutu %96 azaldı. İkisini de öncesi ve sonrasıyla PageSpeed Insights üzerinden ölçtük.