React SEO: Sıralama alan bir React uygulaması için oluşturma, meta veriler ve bağlantılar

Kısa test

SEO size uygun mu ve nasıl başlamalısınız?

Soru 1 / 425%

İnsanlar sattığınız şeyi Google'da arıyor mu?

Evet, sanırımHayır, yeni veya çok nişBilmiyorum

React SEO, bir React uygulamasını arama motorları ve yapay zeka asistanları için taranabilir, dizine eklenebilir ve anlaşılır hale getirme işidir. React'in kendisi tarafsızdır: sorunlar her şeyin tarayıcıda oluşturulmasından kaynaklanır. Google, JavaScript SEO temel bilgileri sayfasında JavaScript uygulamalarını üç aşamada (tarama, oluşturma, dizine ekleme) işlediğini ve sunucu tarafı oluşturmanın ya da ön oluşturmanın "sitenizi kullanıcılar ve tarayıcılar için hızlandırdığı ve her bot JavaScript çalıştıramadığı için hâlâ çok iyi bir fikir" olduğunu doğrular.

React SEO açısından neden zordur?

Tek sayfalık uygulama olarak oluşturulan bir React uygulaması, boş bir kök div ve bir script etiketinden ibaret bir HTML dosyası sunar. Tarayıcı JavaScript'i indirir, çalıştırır ve sayfayı kurar. Yalnızca HTML'i okuyan bir tarayıcı dizine eklenecek hiçbir şey görmez: ne başlık ne metin ne de bağlantı.

Googlebot JavaScript çalıştırır, ancak bunu ayrı bir adımda yapar: sayfa taranır, oluşturma kuyruğuna alınır, arayüzsüz bir Chromium'da oluşturulur ve ancak bundan sonra oluşturulan bağlantılar ve içerik kullanılır. Her ek adım bir hata fırsatıdır (betik hatası, engellenmiş API, zaman aşımı) ve yeni sayfaların aramada görünmesini geciktirir. JavaScript SEO rehberimiz bu süreci ayrıntılarıyla anlatıyor, Google'da dizine ekleme makalemiz ise sayfaların nasıl daha hızlı dizine eklendiğini açıklıyor.

Diğer botlar daha az sabırlıdır. Vercel'in Aralık 2024 tarihli analizi The rise of the AI crawler, "büyük yapay zeka tarayıcılarının hiçbirinin şu anda JavaScript oluşturmadığını" tespit etti ve GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot ve PerplexityBot'u saydı. İstemci tarafında oluşturulan bir React sayfası, Google onu dizine eklese bile ChatGPT, Claude ve Perplexity için görünmezdir.

Bir React sitesi hangi oluşturma yaklaşımını kullanmalı?

React ekibi artık yeni uygulamalara bir çatıyla başlamayı öneriyor. Create React App'i 14 Şubat 2025'te kullanımdan kaldırırken yaptığı duyuruda "sunucuda oluşturmanın SEO'yu iyileştirebileceğini" ve kullanıcıların içeriği görmeden önce indirmesi gereken JavaScript'i azaltarak performansı da artırdığını yazdı. Arama açısından en zayıftan en güçlüye seçenekler:

Dinamik oluşturma konusunda Google dokümantasyonu açıktır: "geçici bir çözümdü, uzun vadeli bir çözüm değildi" ve Google bunun yerine sunucu tarafı oluşturmayı, statik oluşturmayı veya hidrasyonu önerir. Bir çatı seçiyorsanız Next.js SEO rehberimiz oluşturma modlarını, Metadata API'yi ve site haritalarını ayrıntılı olarak ele alıyor.

Geçiş mümkün değilse, Google biraz özenle tek sayfalık bir uygulamayı yine de dizine ekleyebilir. Tek sayfalık uygulama SEO rehberimiz koşulları listeliyor; bu makalenin geri kalanı her iki durum için de geçerlidir.

React'te başlık ve meta etiketler nasıl ayarlanır?

React 19'dan (5 Aralık 2024'ten beri kararlı) bu yana bileşenler title, meta ve link etiketlerini doğrudan oluşturabilir ve React bunları belgenin head bölümüne taşır. React 19 sürüm notları, bu yerleşik desteğin "yalnızca istemci uygulamaları, akışlı SSR ve Server Components ile" çalıştığını belirtir. React 19'dan önce bu işi react-helmet veya react-helmet-async gibi kütüphaneler yapıyordu ve rota bazında varsayılanları geçersiz kılmak için hâlâ kullanışlıdır.

function ProductPage({ product }) {
  return (
    <>
      <title>{`${product.name} | Shop`}</title>
      <meta name="description" content={product.summary} />
      <link rel="canonical" href={`https://example.com/p/${product.slug}`} />
      <h1>{product.name}</h1>
    </>
  )
}

Yöntem ne olursa olsun üç kural geçerlidir:

• Her sayfada tek başlık, benzersiz ve açıklayıcı. React dokümantasyonu, birden fazla bileşen aynı anda başlık oluşturursa "tarayıcıların ve arama motorlarının davranışının tanımsız" olduğu konusunda uyarır. Metin ve değişken karışımı yerine tek bir dize (template literal) verin.
• Her URL için bir açıklama ve bir kanonik adres, sayfa verisinden üretilir. Bir meta etiket oluşturucu yazmanıza yardım eder, bir kanonik etiket denetleyicisi de yayındaki durumu doğrular.
• Open Graph etiketleri ilk HTML'de olmalı; paylaşılan sayfalar için önemlidir, çünkü bağlantı önizleme botları genellikle ham HTML'i okur.

Hangi yönlendirme ve bağlantı hataları dizine eklemeyi engeller?

Google, "bağlantılarınızı yalnızca href özniteliğine sahip HTML a öğeleriyse keşfedebildiğini" belirtir ve farklı içerik yüklemek için URL parçalarının (fragment) kullanılmamasını önerir. React SEO sorunlarının çoğu yönlendirme ayrıntılarından gelir:

Google'ın neyi oluşturduğunu görmek için Search Console'daki URL denetleme aracını kullanıp test edilen sayfanın HTML'ine bakın ya da önemli sayfa şablonlarını bir dizine eklenebilirlik denetleyicisinden geçirin.

React'te site haritası ve yapılandırılmış veri nasıl yönetilir?

React'in yerleşik bir site haritası yoktur. sitemap.xml dosyasını derleme sırasında rotalarınızdan ve verilerinizden (ya da çatınızın site haritası özelliğiyle) üretin, yalnızca 200 döndüren kanonik URL'leri listeleyin ve robots.txt içinde belirtin. Küçük bir statik site için bir XML site haritası oluşturucu yeterlidir.

Yapılandırılmış veri, meta verilerle aynı kurala uyar: JSON-LD betiğini sayfayla birlikte, aynı veriden ve tercihen sunucuda oluşturun. Google, JavaScript ile eklenen JSON-LD'yi oluşturmadan sonra okuyabilir; ancak ilk HTML'de bulunmayan işaretleme, oluşturma yapmayan tarayıcılar için de yoktur. Yazılar için Article, e-ticarette Product, tüm sitede Organization ve derin sayfalar için BreadcrumbList kullanın.

Performans React SEO'yu nasıl etkiler?

Büyük JavaScript paketleri Core Web Vitals değerlerine zarar verir: sayfa yanıt vermeden önce tarayıcı kodu indirmeli, ayrıştırmalı ve hidrasyonunu yapmalıdır; bu da özellikle mobilde Largest Contentful Paint ve Interaction to Next Paint üzerinde yük oluşturur. React ekibinin Create React App duyurusu, sunucuda oluşturmanın daha az JavaScript ve eksiksiz bir HTML belgesi gönderdiğini, bunun First Contentful Paint'i hızlandırdığını ve INP'yi düşürebileceğini belirtir. Pratik kaldıraçlar: React.lazy ile kodu rotaya göre bölmek, görselleri açık boyutlarla sunmak, ekranın alt kısmındaki bileşenleri geç yüklemek ve üçüncü taraf betikleri denetlemek.

Bir React SEO kontrol listesi neleri içermeli?

1. Dizine eklenebilir her URL eksiksiz HTML döndürür (sunucuda oluşturma veya ön oluşturma) ve bu curl ile kontrol edilir.
2. Her URL için benzersiz bir başlık, açıklama ve kendini gösteren kanonik adres vardır.
3. Geçmiş tabanlı rotalar kullanılır, hash URL'si yoktur ve her iç bağlantı href içeren bir a olarak oluşturulur.
4. Gerçek durum kodları: eksik sayfalar için 404, taşınan sayfalar için 301 veya 308.
5. Rotalarla aynı veriden üretilen bir sitemap.xml, robots.txt içinde bildirilir.
6. JSON-LD sayfayla birlikte oluşturulur ve zengin sonuç testiyle doğrulanır.
7. Oluşturma için gereken betikler, stiller ve API'ler robots.txt içinde izinlidir.
8. Kod rotaya göre bölünür ve Core Web Vitals gerçek kullanıcılarda izlenir.

Bir React sitesi yapay zeka yanıtlarında nasıl görünür olur?

GEO (üretken motor optimizasyonu) erişimle başlar. Yapay zeka tarayıcıları ham HTML'i aldığı için bir React sayfası, okunmak, özetlenmek ve alıntılanmak üzere metnini, başlıklarını ve JSON-LD'sini JavaScript olmadan sunmalıdır. Bir yapay zeka taranabilirlik denetimi, bu botların sayfalarınızdan ne aldığını gösterir. İkinci koşul alıntılanmaya değer içeriktir: her bölümde bir soruyu yanıtlayan, kaynak, rakam ve net tanımlar içeren sayfalar.

Bu içerik tarafını ürünümüz Sorank otomatikleştirir. Sorank, autopilot modunda çalışan bir SEO ve GEO yazılımıdır: Blog Makalesi Oluşturucu ayda 20, 60 veya 120 makaleyi kaynaklar, iç bağlantılar ve görsellerle yazıp yayımlar ve webhook aracılığıyla React veya Next.js sitesi gibi özel yapılara bağlanır. SEO Chat ise sitenizin arama performansıyla ilgili sorularınızı sohbet içinde yanıtlar.

Özetle: HTML'i sunucudan sunun, her URL'ye kendi başlığını, açıklamasını ve kanonik adresini verin ve gerçek bağlantılar kullanın. Böylece React diğer siteler gibi sıralama alır ve yapay zeka asistanları onu okuyabilir. Bu siteyi Google ve yapay zeka için hazırlanmış makalelerle sürekli beslemek için Sorank planlarına göz atın; aylık 49 dolardan başlar ve 3 günlük ücretsiz deneme sunar.