React SEO Nedir?

Client Side Rendering Problemi

Varsayılan olarak React (örneğin Create React App ile oluşturulmuş bir proje), Client Side Rendering (CSR) kullanır. Bu mimaride sunucu, tarayıcıya neredeyse boş bir HTML dosyası gönderir. Gelen HTML dosyasının içinde genellikle sadece <div id="root"></div> şeklinde bir kapsayıcı ve uygulamanın çalışmasını sağlayan devasa bir JavaScript bundle dosyası bulunur.

Arama motoru botu sitenize geldiğinde, anında okunabilir bir metin, başlık veya görsel bulamaz. Botun içeriği görebilmesi için JavaScript dosyasını indirmesi, ayrıştırması (parse), derlemesi ve çalıştırması gerekir. Bu işlem, sunucudan doğrudan HTML okumaya göre çok daha maliyetli ve zaman alıcıdır. Kullanıcılar için birkaç milisaniye süren bu render işlemi, kısıtlı kaynaklara sahip arama motoru botları için büyük bir bariyerdir.

Google Bot ve JavaScript Render

Google, JavaScript ağırlıklı siteleri taramak için "Two-Wave Indexing" (İki Aşamalı İndeksleme) adı verilen bir sistem kullanır. Birinci aşamada google bot react sitenize gelir ve sunucudan dönen ham HTML'i okur. CSR kullanıyorsanız, bot sadece boş bir sayfa görür ve ilk aşamada indekslenecek bir içerik bulamaz.

Ardından, URL'niz Google'ın Web Rendering Service (WRS) kuyruğuna (render queue) eklenir. Google'ın sunucularında yeterli kaynak boşa çıktığında (bu saatler, hatta günler sürebilir), WRS sitenizi headless bir Chromium tarayıcıda açar, JavaScript'i çalıştırır, DOM'u oluşturur ve asıl içeriği ikinci aşamada dizine ekler. Bu gecikme, özellikle haber siteleri veya sürekli güncellenen e-ticaret platformları gibi hızın kritik olduğu projelerde ciddi indeksleme sorunları yaratır. Arama motorları zamanla yarışır; JavaScript seo süreçlerinde botları bekletmek her zaman organik performans kaybı anlamına gelir.

Server Side Rendering (SSR)

Server Side Rendering (SSR), React bileşenlerinin tarayıcı yerine sunucuda (genellikle Node.js üzerinde) HTML'e dönüştürülüp istemciye gönderilmesi işlemidir. SSR kullanıldığında, arama motoru botu sitenize istek attığında boş bir kapsayıcı yerine, içeriği tamamen dolu, anında okunabilir bir HTML sayfası ile karşılaşır. Botun JavaScript çalıştırmasına gerek kalmaz. Bu durum, react seo süreçlerindeki en büyük problem olan "render gecikmesini" ortadan kaldırır. Ancak SSR, sunucu maliyetlerini artırabilir ve İlk Byte Süresini (TTFB) bir miktar uzatabilir, çünkü sunucu her istekte HTML oluşturmak için işlemci gücü harcar.

Next.js Kullanımı

React ekosisteminde SSR kurmak manuel olarak oldukça karmaşık bir süreçtir (Babel yapılandırmaları, Webpack ayarları, state yönetimi senkronizasyonu). Bu karmaşayı çözen endüstri standardı araç Next.js'tir. Bir React framework'ü olan Next.js, out-of-the-box (kutusundan çıktığı gibi) SSR ve pre-rendering desteği sunar. Next.js seo açısından olağanüstü güçlüdür çünkü sayfalarınızı sunucu tarafında render etmeyi standart bir özellik olarak barındırır. Geliştiriciler, getServerSideProps gibi veri getirme (data fetching) fonksiyonlarını kullanarak, API'den gelen verilerin HTML'in içine gömülmüş halde arama motorlarına sunulmasını sağlayabilirler.

Static Site Generation (SSG)

Next.js'in sunduğu bir diğer kritik SEO çözümü Static Site Generation (SSG) yapısıdır. SSG, React bileşenlerinin sunucu tarafında her kullanıcı isteğinde değil, proje "build" (derleme) aşamasındayken bir kez HTML'e dönüştürülmesidir. Oluşturulan bu statik HTML dosyaları CDN (İçerik Dağıtım Ağı) üzerinden sunulur. SSG, hem SEO için mükemmeldir (çünkü botlara anında HTML döner) hem de performans açısından rakipsizdir (çünkü sunucu tarafında anlık render işlemi yapılmaz). Bloglar, kurumsal siteler ve içeriği çok sık değişmeyen sayfalar için en ideal react seo optimizasyonu yöntemidir.

React Helmet Kullanımı

SPA mimarisinde, kullanıcı farklı bir sayfaya (route) geçtiğinde head etiketlerinin dinamik olarak güncellenmesi gerekir. Bu işlemi React ekosisteminde çözmek için en yaygın kullanılan kütüphane react helmet (veya modern SSR uyumluluğu için react-helmet-async) kütüphanesidir. React Helmet, bileşenlerinizin (components) içine eklendiğinde, o bileşen render olduğu anda sayfanın title ve meta etiketlerini manipüle eder.

Örneğin, bir ürün detay sayfasında React Helmet kullanılarak ürünün adı title etiketine, ürün açıklaması ise meta description etiketine yazdırılabilir. Ancak burada dikkat edilmesi gereken bir nokta vardır: Eğer saf bir CSR uygulaması kullanıyorsanız, React Helmet etiketleri de JavaScript çalıştıktan sonra DOM'a ekler. Bu durumda Google dışındaki bazı arama motorları veya sosyal medya botları (Facebook, Twitter) JavaScript'i çalıştırmadığı için sayfalarınızın önizlemelerini doğru okuyamaz. Bu nedenle React Helmet, SSR veya SSG mimarisi ile birlikte kullanıldığında tam verim sağlar.

Dynamic Meta Tags

Meta tag optimization süreçlerinde, her sayfanın arama niyetine uygun benzersiz etiketlere sahip olması zorunludur. React uygulamanızda, route değişikliklerini dinleyerek veritabanından veya API'den gelen dinamik verilere göre meta etiketleri yönetmelisiniz. Next.js kullanıyorsanız, 13. versiyon ve sonrasında gelen "Metadata API" veya eski versiyonlardaki next/head bileşeni ile dinamik meta etiket yönetimi doğrudan framework tarafından desteklenir ve sayfa sunucudan render edilirken HTML'in içine eksiksiz bir şekilde gömülür.

Site Hızı Optimizasyonu

Google için site hızı optimizasyonu doğrudan bir sıralama faktörüdür. React uygulamaları genellikle büyük boyutlu JavaScript paketleri (bundle) üretir. Tarayıcı bu büyük paketi indirmeden ve ayrıştırmadan uygulama etkileşime giremez hale gelir. Bu durumu aşmak için gereksiz NPM paketlerinin projeden çıkarılması, görsel optimizasyonlarının yapılması ve modern paketleyicilerin (Webpack, Vite) ayarlarının optimize edilmesi gerekir.

Lazy Loading ve Performans

Kullanıcının ilk ekran açılışında (above the fold) görmeyeceği bileşenlerin veya ağır kütüphanelerin anında yüklenmesi performansı düşürür. React.lazy ve Suspense API'leri kullanılarak, alt sayfalardaki veya modal içindeki bileşenler sadece kullanıcı o alana geldiğinde (lazy loading) yüklenebilir. Aynı şekilde görsellerin loading="lazy" niteliği ile yüklenmesi, uygulamanın ilk açılış hızını ciddi şekilde artırır ve core web vitals verilerini iyileştirir.

Code Splitting

Tek bir devasa bundle.js dosyası sunmak yerine, uygulamayı daha küçük JavaScript parçalarına bölmek (Code Splitting) hayati önem taşır. Kullanıcı anasayfaya girdiğinde sadece anasayfayı ilgilendiren JS kodları indirilir, iletişim sayfasına ait kodlar indirilmez. Bu sayede tarayıcının ana iş parçacığı (main thread) üzerindeki yük azalır. Uygulamanın interaktif hale gelme süresi (Time to Interactive - TTI) kısalır. Next.js gibi frameworkler route bazlı code splitting işlemini otomatik olarak yapar.

Hangisi SEO için daha iyi?

Sorunun net cevabı tartışmasız Next.js'tir. Saf React (Create React App veya Vite ile kurulan temel yapılar) tamamen Client Side Rendering mantığıyla çalışır ve SEO için doğuştan dezavantajlıdır. Arama motorlarıyla uyumlu hale getirmek için üçüncü parti çözümlere ve karmaşık yapılandırmalara ihtiyaç duyar.

Next.js ise doğuştan "SEO-friendly" (SEO dostu) bir yapıya sahiptir. Server Side Rendering (SSR), Static Site Generation (SSG) ve Incremental Static Regeneration (ISR) gibi özellikleri sayesinde içerikleri arama motorlarına hazır HTML olarak sunar. Dahili resim optimizasyon bileşeni (next/image), dahili font optimizasyonu (next/font) ve otomatik kod bölme (code splitting) özellikleri sayesinde Core Web Vitals metriklerinde saf bir React uygulamasına göre çok daha yüksek skorlar elde etmenizi sağlar. İçeriğin önemli olduğu blog, e-ticaret veya kurumsal projelerde Next.js kullanımı bir tercih değil, organik görünürlük için teknik bir zorunluluktur.

Crawl ve Render Süreci

Crawl budget (tarama bütçesi) yönetimi React sitelerinde kritik bir konudur. Googlebot sitenize ilk geldiğinde HTML kaynağını indirir (Crawling). Ancak içerik JavaScript ile oluşturulduğu için bu aşamada anlamlı bir veri bulamaz ve sayfayı Web Rendering Service (WRS) kuyruğuna atar.

WRS, Chrome tarayıcısının altyapısını kullanarak sayfanızı ziyaret eder. JavaScript kodunuzu indirir, API isteklerinizi atar ve DOM'u oluşturur (Rendering). Eğer React uygulamanızdaki bir API isteği çok geç yanıt veriyorsa veya kodunuzda bir sonsuz döngü (infinite loop) varsa, WRS belirli bir süre (timeout) sonra render işlemini keser. Bu durumda sayfanız eksik render edilir ve içerikleriniz indekslenmez. Ayrıca Googlebot, CSS veya JS dosyalarınızın robots.txt tarafından engellenip engellenmediğini kontrol eder. Eğer uygulamanızın çalışması için gerekli olan bir JS dosyası engellenmişse, Google sayfayı render edemez.

SPA Index Problemleri

SPA mimarisinde içerikler asenkron olarak (API üzerinden) yüklendiği için indexleme sorunları sıkça görülür. Uygulama yüklendiğinde içerikler anında DOM'da olmazsa, arama motoru botu sayfayı boş olarak değerlendirebilir. Hydration süreci (sunucudan gelen statik HTML'in tarayıcıda React tarafından canlı ve interaktif hale getirilmesi) çok yavaş işlerse, botların içeriklerin son halini görmesi gecikebilir. Bir diğer yaygın hata ise hatalı sayfa durumlarında (örneğin bulunmayan bir ürün sayfası) sunucunun 404 durum kodu (Status Code) yerine 200 OK kodu dönmesi ve sadece ekranda "Bulunamadı" yazmasıdır. Bu durum (Soft 404), arama motorlarının dizin yapısını bozar.

Duplicate Route Sorunları

React Router kullanılırken yapılan en büyük hatalardan biri, URL yapısının düzgün yönetilmemesidir. Özellikle eski tip Hash Routing (site.com/#/hakkimizda) kullanımı, arama motorları için bir felakettir çünkü botlar # işaretinden sonrasını aynı sayfanın farklı bir bölümü (anchor) olarak algılar ve ayrı bir sayfa olarak indekslemez. Daima History API destekli, temiz URL yapısı (site.com/hakkimizda) sunan BrowserRouter kullanılmalıdır. Ayrıca /urunler ve /urunler/ (sondaki eğik çizgi) gibi farklılıklar arama motorları tarafından farklı sayfalar olarak (duplicate content) algılanabilir. Bu sorunları çözmek için routing yapılandırmasında tutarlılık sağlanmalı ve canonical etiketleri doğru kullanılmalıdır.

URL Yapısı

Arama motorları, içerikleri keşfetmek için benzersiz ve temiz URL'lere ihtiyaç duyar. Her farklı içeriğin (her ürünün, her makalenin) kendine ait bağımsız bir URL'si olmalıdır. Modal (popup) pencereler içinde yüklenen önemli içerikler, kendilerine ait bir URL'ye sahip olmadıkları için arama motorları tarafından indekslenemezler. Eğer içeriğin organik aramalarda bulunmasını istiyorsanız, onu modal yerine bağımsız bir rotaya (route) taşımalısınız.

İç Linkleme

React uygulamalarında geliştiriciler genellikle sayfa yönlendirmeleri için button onClick ile history.push gibi JavaScript olaylarını kullanırlar. Bu, SEO açısından yapılan en büyük mimari hatalardan biridir. Googlebot düğmelere tıklamaz veya JavaScript click olaylarını tetiklemez. Botlar yalnızca standart a href etiketlerini takip ederek site içindeki diğer sayfaları bulur. React Router kullanırken her zaman uygulamanın kendi Link bileşenlerini (React Router Link veya Next.js Link) kullanarak gerçek anchor etiketleri oluşturduğunuzdan emin olun.

Structured Data

Yapısal veri (Structured Data), arama motorlarına sayfanızın bağlamı hakkında net bilgiler sunan JSON-LD formatında kodlardır. React uygulamalarında yapısal veriyi DOM'a eklemek oldukça kolaydır. Veritabanından gelen ürün fiyatı, stok durumu veya makale yazar bilgileri, bir JSON objesi haline getirilerek sayfanın head veya body kısmına script type="application/ld+json" etiketi içinde eklenebilir. React'te bunu yapmak için dangerouslySetInnerHTML özelliği kullanılır. Bu sayede arama sonuçlarında (SERP) yıldızlı değerlendirmeler veya zengin snippet'ler (rich snippets) elde edilebilir.