React için SEO

React varsayılan olarak istemci tarafında render edilir, bu nedenle JavaScript çalışana kadar tarayıcılar boş bir kabuk görür. Google'ın React uygulamalarını gerçekte nasıl işlediği, hangi render stratejisini seçeceğiniz ve yönlendirme, meta veriler ve render zaman aşımı yinelenen içerik tuzağını nasıl düzelteceğiniz burada.

İlk yayın tarihi: 26 Haz 2026 · Son güncelleme: 8 Ağu 2026 · Advanced
Diller

React SEO için kötü değildir — ancak varsayılan olarak istemci tarafı render kötüdür. Kutudan çıktığı haliyle (CRA, Vite + React), sunucu boş bir kabuk gönderir ve tarayıcı sayfayı oluşturur, bu nedenle JavaScript çalışana kadar tarayıcılar hiçbir şey görmez. Google, React'i Web Rendering Service aracılığıyla render edebilir, ancak render sıraya alınır, geciktirilir ve zaman aşımına uğrayabilir — Gary Illyes, yalnızca şablon içeren ve kopya olarak işaretlenen sayfalarla sonuçlanan render zaman aşımlarını göstermiştir. AI tarayıcı render sözleşmeleri sağlayıcıya göre değişir, bu nedenle yalnızca CSR içeriği bir kapsam riski ekler. Çözüm render stratejisidir: SSR veya SSG (en kolayı Next.js veya Remix) içeriği ilk HTML'e koyar ve hydrateRoot (createRoot değil) ile hidrate edilir, böylece sunucu ve istemci çıktıları tam olarak eşleşir. Ardından History API yönlendirmesi, gerçek <a href> bağlantıları, doğru durum kodları ve sürüme uygun meta veriler kullanın: React 19 <title>/<meta>/<link> öğelerini yerel olarak yükseltir, aksi takdirde react-helmet-async (bakımı yapılmayan orijinal react-helmet'i asla kullanmayın).

TL;DR — React’in SEO sorunu React’in kendisi değil — varsayılan olarak istemci tarafı render’dır. CRA ve Vite + React boş bir kabuk gönderir ve DOM’u tarayıcıda oluşturur, bu yüzden bir tarayıcının getirdiği ham HTML’de içerik yoktur. Google, Web Rendering Service (daima güncel Chromium) aracılığıyla bunu render edebilir, ancak render ayrı bir kuyruğa alınır, gecikebilir ve zaman aşımına uğrayabilir — Gary Illyes, yalnızca şablon içeren ve ardından kopya olarak işaretlenen sayfalarla sonuçlanan render zaman aşımlarını belgelemiştir. Bing, JS’i daha az güvenilir şekilde render eder; AI tarayıcı render’ı sağlayıcıya göre değişir. Çözüm render stratejisidir: SSR veya SSG (en kolayı Next.js veya Remix) içeriği ilk HTML’e koyar — ve sunucu tarafından render edilmiş işaretlemeyi hydrate ediyorsanız, hydrateRoot kullanın (createRoot değil) ve sunucu/istemci uyumsuzluğunu bastırılacak bir uyarı değil, bir hata olarak ele alın. Ardından History API yönlendirmesi (hash URL’ler değil) ve gerçek <a href> bağlantıları kullanın. <head> meta verileri için: React 19 <title>/<meta>/<link> öğelerini yerel olarak yukarı taşır; React 18’de veya gelişmiş ihtiyaçlar için react-helmet-async kullanın (bakımı yapılmayan orijinal react-helmet’i asla kullanmayın). Doğru HTTP durum kodlarını ayarlayın. SSR için sıralama bonusu yoktur — yalnızca içeriğin güvenilir şekilde dizine eklenmesini sağlar. Genel render mekaniği için JavaScript SEO ve headless CMS konularına bakın.

React’i SEO için gerçekten zorlaştıran şey

React, bileşen tabanlı bir JavaScript kütüphanesidir ve kutu dışında — Create React App, Vite + React — istemci tarafında çalışır. Sunucu, neredeyse boş bir belge (ünlü bir şekilde yalnızca bir <div id="root"></div>) artı bir JavaScript paketi döndürür ve tarayıcı, DOM’u oluşturmak için bu JavaScript’i çalıştırır. Bunu, tam HTML’in — içerik, başlıklar, bağlantılar — ilk yanıtta geldiği sunucu tarafından render edilmiş bir sayfayla (WordPress, bir Rails uygulaması) karşılaştırın.

Yani her şeye karar veren soru şudur: herhangi bir JavaScript çalışmadan önce ham HTML’de ne var? Varsayılan bir React uygulaması için cevap “neredeyse hiçbir şey”dir. Bir CRA uygulamasında Sağ Tık → Kaynak Görüntüle’ye tıklayın ve kabuğu görürsünüz, içeriği değil. Bir tarayıcının ilk getirmesinde aldığı tam olarak budur.

Sorumluluğun gerçekte nerede olduğu konusunda kesin olmak gerekirse: React kütüphanesi yalnızca CSR değildir. React DOM, istemci render’ı (createRoot), sunucu render’ı (akış ve statik API’ler) ve hydration API’leri sunar — kütüphane hepsini destekler. Boş kabuk sorunu, varsayılan araç zincirinin (Create React App, sunucusuz Vite + React) bir özelliğidir; bu zincir yalnızca istemci API’lerini bağlar ve sunucuda HTML’e render eden hiçbir şeyi bağlamaz. Araç zincirini değiştirin — Next.js, Remix veya React’in kendi sunucu render API’leri — ve aynı kütüphane ilk yanıtta tam HTML gönderir.

Bu, daha geniş JavaScript SEO sorununun React’e özgü uygulamasıdır — genel hata modları (parite, etkileşim, durum, zamanlama) için oraya gidin. Burada React’e özgü olana ve nasıl düzeltileceğine odaklanacağım.

Google bir React uygulamasını gerçekte nasıl işler

Google, JavaScript’i üç aşamada işler: tarama → render → dizine ekleme. Googlebot URL’yi getirir, render edilmiş DOM daha sonra Web Rendering Service (WRS) tarafından oluşturulur — Chrome ile aynı motor olan, daima güncel bir Chromium sürümü — ve ardından render edilmiş çıktı dizine eklenir ve bağlantıları çıkarılır. Evidence for this claim Google processes JavaScript pages through crawling, rendering, and indexing using its Web Rendering Service. Scope: Google Search rendering behavior. Confidence: high · Verified: Google: JavaScript SEO basics

Önemli nüans, render’ın ne zaman gerçekleştiğidir. Render, kaynak yoğun bir işlemdir, bu yüzden ilk taramadan ayrı olarak kuyruğa alınır. Martin Splitt akışı açıkça anlattı: “bir HTTP isteği yaparız ve bir şey geri alırız … biraz çıplak HTML ve tek yaptığı JavaScript’i yüklemek ve JavaScript’i çalıştırmak. Ardından, bu HTML … render’a gider. Render, JavaScript’i çalıştırır — boom!, daha önce orada olmayan bir sürü içerik oluşur.” Bir CSR React sayfası için, “boom” tüm sayfanızdır — hiçbiri bu render adımı çalışana kadar var olmaz.

Taşınmaya değer bir uyarı: eski “iki dalga indeksleme” modeline aşırı odaklanmayın. Splitt’in kendisi bunu geri adım atarak dalgayı “aşırı basitleştirme” olarak nitelendirdi. Pratik çıkarım “tanımlanmış zamanlamalı resmi bir Dalga 2 var” değil — işlemenin ayrı, ertelenebilir, hata yapabilir bir adım olduğu ve CSR’ın içeriğinizin %100’ünü bunun yanlış tarafına koyduğudur.

React uygulamalarını özellikle etkileyen işleyici hakkında iki gerçek daha:

  • Durumsuzdur. Googlebot, sayfa yüklemeleri arasında localStorage, sessionStorage veya çerezleri saklamaz. İstemci tarafı durumuna bağlı herhangi bir içerik veya yönlendirme, tarayıcı için görünmezdir.
  • Vazgeçebilir. İşleyici bir zaman aşımı uygular. Ana içeriğiniz yavaş yüklenirse — büyük paketler, API çağrılarının şelaleleri — işleme, içeriğiniz gelmeden önce bitebilir ve Google eksik sayfayı dizine ekler.

İşleme zaman aşımı tuzağı (ve neden kopyalar oluşturur)

Bu hata modu nadiren iyi açıklanır ve React uygulamaları için en zarar verici olanıdır. Gary Illyes bunu doğrudan anlattı: “Gelen kutumda, merkez parçanın yüklenmesinin sonsuza kadar sürdüğü ve işlemenin zaman aşımına uğradığı bir sürü e-postam var … ve elimizde yalnızca şablon içeren bir sürü sayfa kaldı. Yalnızca şablonla, bu sayfalar kopyadır.”

Bunun bir CSR React uygulaması için ne anlama geldiğini adım adım inceleyin. Başlığınız, gezinme çubuğunuz ve altbilginiz hızlı yüklenen şablonlardır. Gerçek sayfa içeriğiniz — her URL’yi benzersiz kılan kısım — JavaScript tarafından getirilir ve işlenir ve yavaş yüklenir. İşleme zaman aşımına uğrar. Google, her URL’de başlık + gezinme + altbilgi ile kalır. Artık her sayfa aynı görünür ve Google bunları Search Console’da birbirlerinin kopyaları olarak işaretler.

Illyes’in kendi çözümü uygulanabilir kısımdır: “İçerik (marjinal şablon dahil) önce yüklenecek şekilde js çağrılarını yeniden yapılandırmayı deneyin ve bunun yardımcı olup olmadığına bakın.” Ancak daha kalıcı cevap, ana içeriğiniz için işleme adımına hiç bağımlı olmamaktır — bu da SSR veya SSG anlamına gelir.

React için işleme stratejileri

Bu, en etkili tek karardır. Seçenekler, SEO için kabaca en kötüden en iyiye:

  • CSR (varsayılan React). Sunucu kabuğu gönderir; tarayıcı her şeyi oluşturur. İçerik, işleme kuyruğu tarafından geciktirilir ve zaman aşımına maruz kalır. SEO için en kötüsü. Dizine eklenmesini istemediğiniz kimlik doğrulamalı panolar için uygundur. Evidence for this claim Client-only React rendering constructs UI in the browser; server rendering APIs produce HTML before browser hydration. Scope: React rendering mechanics; SEO impact depends on what the initial response contains. Confidence: high · Verified: React: hydrateRoot React: Server APIs
  • Ön işleme. Tam bir SSR çerçevesi olmadan derleme zamanı işleme — react-snap gibi araçlar veya bir ön işleme hizmeti uygulamanızı tarar ve statik HTML kaydeder. Daha hafiftir; daha basit, çoğunlukla statik siteler için çalışır.
  • SSG (Statik Site Oluşturma). HTML dağıtım sırasında bir kez oluşturulur ve statik dosyalar olarak sunulur. En hızlısı, içerik her zaman ham HTML’de bulunur. Son derece dinamik veya kullanıcı başına içerik için sınırlıdır; büyük siteler yavaş derlemeler alır.
  • SSR (Sunucu Tarafı İşleme). Sunucu, istek başına React’i çalıştırır ve tam HTML gönderir. İçerik tarayıcılar için hemen kullanılabilir; her zaman günceldir. Bir Node.js sunucusu ve biraz daha yüksek TTFB gerektirir.
  • Hibrit / ISR (Artımlı Statik Yeniden Oluşturma). Statik sayfaları arka planda yeniden oluşturan bir Next.js özelliği — statik hız ve periyodik tazelik.
Stratejiİlk HTML’de içerik?SEO riskiEn iyi olduğu yer
CSR (ham React)HayırEn yüksekGiriş yapılmış panolar, dizine eklenmeyen uygulamalar
Ön işlemeEvet (derleme zamanı)DüşükKüçük, çoğunlukla statik siteler
SSGEvet (derleme zamanı)En düşükBloglar, dokümanlar, pazarlama
SSREvet (isteğe göre)DüşükTaze, dinamik içerik
ISR / hibritEvetDüşükSaatlik/günlük değişen içerik

Ve yeni yapılarda atlanacak bir strateji: dinamik oluşturma — tarayıcı kullanıcı aracısını algılayıp kullanıcılara CSR sunarken önceden oluşturulmuş bir sürüm sunmak. Google artık buna “bir geçici çözüm ve uzun vadeli bir çözüm değil” ve “ek karmaşıklıklar ve kaynak gereksinimleri yaratır” diyor ve bunun yerine sunucu tarafı oluşturma, statik oluşturma veya hydration öneriyor. (Bing, 2018’de dinamik oluşturmayı önermişti, ancak bu rehberlik eski — 2019’dan beri Bingbot, Microsoft Edge / Chromium üzerinden oluşturuyor ve SSR/SSG de orada doğru tercih.)

Burada öldürülmeye değer bir efsane var: SSR bir sıralama artışı değildir. John Mueller’ın dediği gibi, “bunu şu ya da bu şekilde uygulamanın SEO sıralama bonusları yoktur” — farklı yöntemler “içeriği dizine eklenebilir yapmanın sadece farklı yollarıdır.” SSR’ın değeri güvenilir dizine eklenebilirliktir (ve genellikle daha hızlı İlk İçerikli Boyama’dan daha iyi Core Web Vitals), sihirli bir sıralama kolu değil.

Hydration tam olarak eşleşmelidir — bu bir hata sınırıdır, bir SEO tekniği değil

SSR ve SSG’nin her ikisi de tarayıcıya içeriğinizi zaten içeren HTML verir. React daha sonra istemcide bu işaretlemeye bağlanmak zorundadır ve bu, düz bir istemci oluşturmadan farklı bir API’dir:

  • createRoot React’i sıfırdan bir DOM düğümüne oluşturur — mevcut işaretleme beklenmez. Yalnızca CSR uygulamaları için kullanın.
  • hydrateRoot React’i react-dom/server’ın zaten oluşturduğu HTML’e bağlar ve istemcinin ilk oluşturmasının sunucunun gönderdiğiyle aynı çıktıyı üretmesini bekler. SSR/SSG kullanıyorsanız, hydrateRoot değil createRoot istersiniz — sunucu tarafından oluşturulmuş işaretlemede createRoot çağırmak, React’in onu atması ve sıfırdan yeniden oluşturması anlamına gelir, SSR/SSG’yi kurarken elde etmek istediğiniz SEO avantajını çöpe atar.
Evidence for this claim hydrateRoot attaches React to HTML previously generated by React on the server; the initial client output should match the server output. Scope: hydration Confidence: high · Verified: hydrateRoot

Sunucu ve istemci çıktıları arasındaki uyumsuzluklar, SEO düzeltmeleri yapan React uygulamalarında gerçek bir risktir — bir başlıkta Date.now(), yerel ayara bağlı bir biçim, bir if (typeof window !== 'undefined') dalı. React’in kendi belgeleri o zaman ne olacağı konusunda açık sözlüdür: geliştirme sırasında uyumsuzluklar hakkında uyarır, ancak “uyumsuzluk durumunda öznitelik farklılıklarının düzeltileceğine dair hiçbir garanti yoktur.” Rehberlik, uyumsuzluklara hata olarak davranmak ve bunları düzeltmektir — uyarıyı bastırmak ve içerik eşitliğini varsaymak değil. SEO için özellikle: sayfa tarayıcıda doğru görünüyor diye oluşturulan içeriğinizin ve meta verilerinizin sunucunun gönderdiğiyle eşleştiğini varsaymayın. Sunucu HTML’ini doğrudan hydration sonrası DOM ile karşılaştırın (aşağıdaki test bölümündeki Kaynağı Görüntüle ile Öğeyi İncele kontrolü bunun hızlı versiyonudur) temiz bir konsola güvenmek yerine.

React Router ve URL yapısı

React Router, tarayıcıda sunucu gidiş-dönüşleri olmadan gezinmeyi yönetir; bu, SEO için doğru yapılandırılırsa sorun değildir:

  • History API’yi kullanın, hash yönlendirmeyi değil. BrowserRouter pushState kullanır ve temiz, taranabilir URL’ler üretir (/products). HashRouter /#/products üretir ve Google hash tabanlı URL’leri güvenilir şekilde çözemez — onları çalıştıran eski AJAX tarama düzeni kullanımdan kaldırılmıştır. History API’yi kullanın.
  • Sunucu da bu URL’leri işlemelidir. History API yönlendirmesiyle, her “sayfa”nın sunucunun yanıt verebileceği gerçek bir URL’ye ihtiyacı vardır — SSR için kritiktir ve /products üzerinde doğrudan bir isabet veya yenilemenin 404 vermemesi için gereklidir.
  • <Link> gerçek bir bağlantı oluşturur. React Router’ın <Link> bileşeni, taranabilir olan bir <a href> çıktısı verir. Bağlantı olmadan onClick işleyicileri üzerine kurulu gezinme taranabilir değildir — Google yalnızca gerçek <a href> bağlantılarını takip eder.

Meta verileri yönetme: react-helmet, react-helmet-async ve React 19’un yerel etiketleri

React 18’e kadar React, rota değişikliklerinde belge <head> öğesini yerel olarak hiç güncellemedi — her rotanın <title>, meta açıklaması, canonical ve Open Graph / Twitter etiketlerinin bir kütüphane tarafından ayarlanması gerekiyordu. React 19 bunu değiştirdi: bileşenler <title>, <meta> ve <link> etiketlerini doğrudan oluşturabilir ve React bunları kendi başına <head> öğesine taşır — istemci tarafı uygulamalar, akışlı SSR ve Sunucu Bileşenleri ile birlikte çalışır. React 19.2, 2026 ortası itibarıyla mevcut kararlı sürümdür, bu nedenle bu artık güncel bir React sürümündeki her uygulama için geçerlidir.

Bu, doğru cevabın React sürümünüze ve gerçekten neye ihtiyacınız olduğuna bağlı olduğu anlamına gelir:

  • React 19, bağımsız uygulama, yalnızca temel etiketler. <title>/<meta>/<link> öğelerini doğrudan bileşenlerinizde oluşturun — kütüphaneye gerek yok.
  • React 19, ancak htmlAttributes/bodyAttributes, SSR context serileştirmesi, onChangeClientState, prioritizeSeoTags veya titleTemplate gerekiyor. Yerel taşıma bunları kapsamaz — react-helmet-async kullanın. Kendi belgeleri bunu doğrudan belirtir: bu belirli ihtiyaçlar olmadan, React 19’da pakete hiç ihtiyacınız olmayabilir.
  • React 18 veya daha eski, bağımsız uygulama. Yerel taşıma henüz mevcut değil — react-helmet-async kullanın. Aktif olarak bakımı yapılıyor (ana sürüm 3 ve React sürümünüzü çalışma zamanında algılar) ve SSR’yi destekler.
  • Orijinal react-helmet. Hiçbir React sürümünde kullanmayın. Bakımı yapılmıyor — 2020’den beri sürüm yok — ve React 18’in eşzamanlı oluşturma altında bilinen hataları var.
  • Next.js uygulamaları. React sürümünden bağımsız olarak Next’in kendi Metadata API’sini (metadata dışa aktarımı / App Router’da generateMetadata) kullanın — Helmet eklemeyin ve yerel React etiketi taşımasına da güvenmeyin. Çerçeve, bir Next.js uygulamasında belgeyi sahiplenir.

Genel olarak JavaScript SEO’dan devralınan bir güvenilirlik kuralı, yukarıdakilerden hangisini kullanırsanız kullanın geçerlidir: HTML düzeyindeki meta veriler, JS ile enjekte edilen meta verilerden daha iyidir. İstemci tarafı JavaScript ile enjekte edilen bir canonical etiketi, sunucu tarafından oluşturulan HTML’de bulunandan çok daha az güvenilirdir — bu da SSR/SSG için başka bir argümandır.

AI tarayıcıları bunu acil hale getiriyor

2026’daki pürüz: GPTBot (OpenAI), ClaudeBot (Anthropic), PerplexityBot ve diğer aracılar için oluşturma davranışı sağlayıcıya ve sürüme özgüdür. Bir CSR React uygulaması her tarayıcıya ilk Googlebot getirmesinin gördüğü aynı boş kabuğu gönderir ve mevcut sağlayıcı dokümantasyonu, onu dolduracak tek bir paylaşılan oluşturma adımı oluşturmaz. Üretken motorlar daha büyük bir keşif yüzeyi haline geldikçe, SSR/SSG yalnızca Google’a özgü bir endişe olmaktan çıkar: ham HTML, evrensel bir tarayıcı sınırlaması varsaymadan kapsamı en üst düzeye çıkarır. (Headless CMS konusu bu AI tarayıcı gerçeğini daha derinlemesine ele alır.)

Google’ın gerçekte ne gördüğünü test etme

Tarayıcınıza güvenmeyin — DevTools Denetçiniz oluşturulmuş DOM’u (JavaScript sonrası) gösterir, bu da JavaScript olmayan bir tarayıcının görmediği şeydir. Doğru araçları kullanın:

  • Kaynağı Görüntüle ile Öğeyi İncele. Kaynağı Görüntüle ham HTML’dir (tarayıcıların JS’den önce aldığı). Öğeyi İncele oluşturulmuş DOM’dur. İçerik İncele’de varsa ancak Kaynağı Görüntüle’de yoksa, JavaScript’e bağımlıdır.
  • URL İnceleme Aracı (Search Console) — en yetkili kontrol. Canlı bir test çalıştırın ve oluşturulmuş HTML, ekran görüntüsü ve sayfa kaynakları / konsol mesajlarına bakarak Google’ın gerçekte ne oluşturduğunu ve neyin yüklenemediğini görün.
  • Zengin Sonuçlar Testi — siteyi doğrulamadan hızlı bir oluşturulmuş HTML kontrolü.
  • DevTools’ta JavaScript’i devre dışı bırakın ve yeniden yükleyin — JS çalıştırmayan bir tarayıcının hızlı bir simülasyonu (ve AI tarayıcılarının gördükleri için iyi bir vekil).
  • Search Console Kapsam raporu — “Keşfedildi, şu anda dizine eklenmedi” bir oluşturma kuyruğu birikimini gösterebilir; yinelenen sayfa kümeleri, oluşturma zaman aşımı şablon tuzağını gösterebilir.
  • JS oluşturan tarayıcılar — Ahrefs Site Audit ve Screaming Frog (JS oluşturma modu) sayfaları ölçekte oluşturur, böylece tüm sitede ham ve oluşturulmuş arasındaki farkı görebilirsiniz.

Next.js ve Remix (pratik cevap)

SEO önemliyse ve ham CSR React kullanıyorsanız, sunucuda render eden bir framework’e geçmek genellikle doğru hamledir. Next.js bunun için özel olarak tasarlanmıştır — SSR ve SSG kutudan çıkar, ISR, App Router, yerleşik Metadata API, otomatik kod bölme ve görsel optimizasyonu sunar. Remix ise web standartlarına dayalı alternatiftir; fetch/Request/Response üzerine kuruludur, varsayılan olarak SSR kullanır ve güçlü bir aşamalı iyileştirme hikayesine sahiptir. Next.js kendi derinlemesine incelemesini hak ediyor — burada bilerek kısa tutuyorum. React SEO için asıl nokta daha dardır: framework, içeriğinizi yalnızca tarayıcıda çalışan render adımından çıkarıp ilk HTML’e taşımak için vardır.

React, render’ı sonradan akla gelen bir şey değil de mimari bir karar olarak ele aldığınızda SEO için iyidir. Sıralamada yer alması gereken her şey için SSR veya SSG seçin, bağlantılarınızı ve yönlendirmelerinizi dürüst tutun, her rota için meta verileri yönetin ve gerçekte neyin render edildiğini tarayıcınızın değil, Google’ın kendi araçlarının söylemesine izin verin.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.