JavaScript SEO: Modern Web Siteleri (React, Vue, Next.js) İçin İndekslenme Rehberi

İçindekiler

Okuma Süresi: 9 Dakika

Son yıllarda web geliştirmenin ağırlık merkezi sunucu tarafından istemciye kaydı. React, Vue ve Angular ile kurulan tek sayfa uygulamaları (SPA) kullanıcıya akıcı bir deneyim sunuyor; fakat aynı akıcılık, arama motorlarının sayfayı anlamasını ciddi biçimde zorlaştırabiliyor. JavaScript SEO artık sadece ‘teknik SEO’nun bir alt başlığı değil; modern web projelerinin başarı veya başarısızlık çizgisini belirleyen stratejik bir disiplin. Bu yazıda kod örneklerinden çok, uzman perspektifinden hangi kararların neden alındığını, hangi tuzaklara düşüldüğünü ve her framework için ‘doğru’ yaklaşımın nasıl kurulduğunu inceleyeceğiz.

JS SEO

Vaktiniz mi Kısıtlı?

Bu içeriğin Google NotebookLM tarafından hazırlanan sesli özetine aşağıdan ulaşabilirsiniz:

00:00

Temel Prensip: Botu Birinci Sınıf Kullanıcı Saymak

JavaScript ağırlıklı bir projede SEO başarısının birinci koşulu, arama motoru botunu tıpkı insan kullanıcı gibi ‘birinci sınıf’ saymaktır. Pek çok SPA projesinde mühendisler UX’i optimize ederken botun deneyimini tamamen göz ardı eder; sonuç, çok hızlı ama arama sonuçlarında görünmeyen bir sitedir. Bot, Chromium tabanlı bir tarayıcıda çalışsa bile sabırsızdır: belirli bir render bütçesi vardır, kullanıcı etkileşimini taklit etmez, uzun süren fetch’leri beklemez. Dolayısıyla botun ilk 3-5 saniye içinde bulması gereken her veriyi, bu süre içinde HTML içinde hazır bulmalıdır.

Bu bakış açısı, mimari kararları doğrudan etkiler. Meta etiketleri, H1, kanonik URL, fiyat, stok, ürün açıklaması ve internal link yapısı gibi SEO için kritik alanlar, JavaScript çalıştırılmadan okunabilir olmalıdır. Bunun en güvenilir yolu server-side rendering (SSR) veya static site generation (SSG) kullanmaktır; client-side rendering (CSR) yalnızca kullanıcı hesabı arkasına saklanan uygulama bölümleri için doğru bir tercihtir.

JS SEO

Google’ın İki Dalgalı İndekslemesi ve Stratejik Anlamı

Google, JavaScript içeren sayfaları iki dalgada indeksler. İlk dalgada ham HTML alınır, içindeki temel içerik ve linkler çıkarılır. İkinci dalgada sayfa Web Rendering Service (WRS) tarafından gerçek bir tarayıcıda çalıştırılır ve render edilmiş DOM tekrar değerlendirilir. Bu ikinci dalga saatler, bazen günler sürebilir. Uzman bakış açısıyla bunun anlamı şudur: CSR ile kurulan bir haber sitesi, güncel içeriğin birkaç saat veya gün gecikmeyle indekslenmesi riskini göze alır. E-ticaret sitesinde fiyat ve stok bilgisi JS ile geliyorsa, Google bot bunları ikinci dalgada görür; bu süre zarfında rich snippet çıkmaz, shopping feed’leri tutarsız davranır.

Buradan çıkan stratejik karar net: kritik dönüşüm sayfaları (ürün, kategori, anasayfa, blog detay) kesinlikle birinci dalgada anlaşılır olmalıdır. Admin panel, filtre sonuç sayfaları veya kullanıcı oturumuna bağlı ekranlar ise ikinci dalgaya bırakılabilir, hatta çoğu zaman noindex olmalıdır.

JS SEO

Rendering Stratejisi Seçimi: Karar Rehberi

Rendering stratejisi, JavaScript SEO’nun tek en önemli kararıdır. Dört temel seçenek (CSR, SSR, SSG, ISR) farklı projeler için farklı oranlarda doğru olur.

Blog, dokümantasyon, marka ve pazarlama siteleri için SSG en doğru seçimdir. İçerik nadiren değişir, build sırasında üretilen HTML CDN’den saniyeler altında sunulur, bot ilk baytta tüm içeriği görür.
E-ticaret ve pazaryeri siteleri için ISR (Incremental Static Regeneration) doğru dengedir. On binlerce ürün sayfası statik üretilir, belirlenen aralıklarla (örn. 10 dk) arka planda tazelenir. Hem CDN hızı hem fiyat tazeliği birlikte sağlanır.
Haber siteleri, sosyal ağlar, forumlar için SSR tercih edilir. Her istekte güncel veri gelir, yorumlar, beğeni sayıları anında yansır. Sunucu maliyeti artar ama SEO ve güncellik birlikte kazanılır.
CSR yalnızca giriş arkasına saklanan SaaS panelleri, yönetim arayüzleri ve SEO’dan tamamen bağımsız ekranlar için kalmalıdır. Herkese açık sayfalarda CSR bugün artık kötü pratiktir.

Uzman uyarısı: ‘Dynamic rendering’ yani bota SSR, kullanıcıya CSR sunmak, Google tarafından geçici çözüm kabul ediliyor ve uzun vadede önerilmiyor. Cloaking sınırını ihlal etme riski taşıdığı için modern projelerde tamamen terk edilmelidir.

JS SEO

Meta Yönetiminde Uzman Yaklaşımı

Meta title, description, canonical ve Open Graph etiketleri SPA mimarisinde en sık hatalı kurulan alandır. Yapılan en yaygın hata, tüm uygulama için tek bir statik meta bloku kullanıp, sayfa geçişlerinde sadece görsel başlığı değiştirmektir. Bot her URL için farklı meta görmek ister; aynı <title> onlarca URL’e çıkarsa Google bu sayfaları ‘duplicate’ olarak sınıflandırır ve çoğunu dizine almaz.

Doğru yaklaşım, sayfa bazlı dinamik meta üretimidir. React ekosisteminde react-helmet-async veya Next.js Metadata API; Vue’da @vueuse/head; Nuxt 3’te useSeoMeta composable’ı bu işi üstlenir. Ancak meta’nın sadece var olması yeterli değildir; şu ilkelere dikkat edilmelidir:

Title 50-60 karakter arası, marka adı sonda, ana anahtar kelime başta olmalıdır.
Description kullanıcıyı tıklamaya çağıran (call-to-action) bir tonda 140-155 karakter olmalıdır.
Canonical URL, sorgu parametreleri (?utm_, ?sort=) temizlenmiş halde yazılmalıdır.
Open Graph görselleri 1200×630 oranında ve mutlak URL ile verilmelidir.
Her sayfanın kendine özgü meta’sı olmalı; şablon metalardan kaçınılmalıdır.

Structured Data: Rich Snippet İçin Değil, Anlam İçin

Yapılandırılmış veri (JSON-LD), pek çok kişi tarafından yalnızca yıldız puanları ve breadcrumb’lar çıkarmak için eklenir. Oysa asıl amacı, sayfanın Google için semantik bir yapıya oturtulmasıdır. Product, Article, BreadcrumbList, Organization, FAQ ve HowTo şemaları doğru kullanıldığında sayfa, arama motoru tarafından yalnızca ‘metin yığını’ olarak değil, yapılandırılmış bir bilgi nesnesi olarak algılanır.

SPA’larda yaygın hata, JSON-LD’yi sadece client-side’da inject etmektir; bu durumda bot ikinci dalgaya kadar şemayı göremez. Doğru pratik, JSON-LD’yi SSR/SSG çıktısında, sayfanın <head> kısmına gömülü göndermektir. Ek olarak JSON-LD içindeki veri, sayfadaki görünen içerikle birebir tutarlı olmalıdır; fiyat, stok, değerlendirme puanı farklıysa Google ‘yapılandırılmış veri ihlali’ kararı verebilir ve manuel işlem uygulayabilir.

JS SEO

Core Web Vitals: JavaScript’in Asıl Sınavı

Google’ın sıralama sinyalleri arasında Core Web Vitals son yılların en belirleyici metrik setidir ve büyük ölçüde JavaScript performansından etkilenir. LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) ve INP (Interaction to Next Paint) — bu üç metrik doğrudan bundle boyutu, render stratejisi ve hydration kalitesinin fonksiyonudur.

Ağır JS bundle’ları LCP’yi tahrip eder. Route bazlı code splitting, lazy loading ve üçüncü parti script’lerin geciktirilmesi temel tedbirlerdir.
Font Awesome, Google Fonts, reklam etiketleri, analytics script’leri kullanıcı etkileşimi olmadan yüklenmemelidir. next/script veya manuel idle scheduling kullanılmalıdır.
Resimler için modern formatlar (WebP/AVIF), responsive srcset ve boyut atributları CLS’i sıfıra yaklaştırır.
Hydration sırasında yaşanan DOM farklılıkları (mismatch) sayfanın yeniden render edilmesine yol açar ve INP’yi bozar. Sunucu ve istemci aynı zaman diliminde, aynı veriyle çalışmalıdır.

Performans optimizasyonu bir kerelik iş değildir. Real User Monitoring (örn. Chrome UX Report, SpeedCurve) ve CI pipeline’a entegre Lighthouse CI birlikte kullanılmalıdır; bir PR, Core Web Vitals eşiğini düşürüyorsa merge edilmemelidir.

JS SEO

Routing, URL ve İç Link Mimarisi

SPA’larda en sık yapılan bir başka kritik hata, programatik yönlendirmenin <a href> yerine onClick handler’larla yapılmasıdır. Bot, <div onClick={navigate}> yapısını link olarak algılamaz; iç link grafiği zayıflar ve sayfa keşfi bozulur. Her navigasyon noktası, framework’ün Link bileşeniyle veya doğrudan <a href> ile yazılmalıdır. Hash tabanlı routing (#/urun/123) modern SEO’da tamamen terk edilmiştir; History API üzerinden gerçek URL’ler kullanılmalıdır.

URL yapısında derinlik kontrolü önemlidir. Tıklama mesafesi (click depth) anasayfadan dört seviyeden fazla olan sayfalar, Google tarafından daha düşük önemli sayılır. Kategori/alt kategori/ürün yapısı, breadcrumb ve ‘öne çıkan ürünler’ gibi iç link modülleriyle düzleştirilmelidir.

Uzman bakışıyla iç link mimarisi bir ‘otorite akış’ haritasıdır. Anasayfadan en çok link verilen sayfa en yüksek öneme sahip olur; dolayısıyla kategori sayfaları, kampanya sayfaları ve dönüşüm odaklı içerikler anasayfa ile footer’dan mutlaka bağlanmalıdır. Tam tersine, tag sayfaları, arşiv URL’leri ve kullanıcı profilleri gibi düşük değerli ekranlar iç link’lerden mümkün olduğunca uzak tutulmalı, hatta gerekirse noindex ile dizinlemeden çıkarılmalıdır. SPA’larda bir diğer kritik konu, JavaScript ile dinamik eklenen link’lerin (sonsuz scroll sonrası gelen ürünler, ‘daha fazla göster’ butonlarıyla açılan bölümler) bot tarafından görülmeyebilmesidir; bu yüzden önemli link’ler ilk HTML’de yer almalıdır.

JS SEO

Framework Bazında En Doğru Pratikler

React Projelerinde

Saf React (CRA, Vite) bir SPA iskeletidir ve tek başına ciddi SEO projelerinde kullanılmamalıdır. Üretim için React, mutlaka Next.js, Remix veya benzeri bir meta-framework ile birlikte çalıştırılmalıdır. Eğer proje zaten CRA üzerine kurulmuşsa, içerik sayfaları ayrı bir Next.js/Astro projesine taşınır; SPA yalnızca uygulama kısmında kalır.

Vue Projelerinde

Vue ekosisteminde Nuxt 3 kesin öneridir. Hybrid rendering yetenekleri, otomatik sitemap ve robots, built-in SEO modülleri ile Nuxt, Vue SEO’sunu dakikalar içinde ayağa kaldırır. Vite + Vue kombinasyonuyla kurulu projelerde SSR ‘elle’ eklemek mümkündür ama bakım yükü ağırdır ve tavsiye edilmez.

Next.js Projelerinde

Next.js bugün JavaScript SEO’nun altın standardıdır. App Router’ın sunduğu Metadata API, sunucu bileşenleri, streaming, partial prerendering ve edge rendering; 2018’de karmaşık çözümler gerektiren sorunları iki üç satır yapılandırmayla çözer. Next.js projelerinde asıl risk ‘fazla sihir’dir: geliştiriciler framework’e güvenip temel SEO kurallarını atlayabilir. Her zaman üretilen HTML’in view-source çıktısı periyodik kontrol edilmelidir.

App Router’a geçişte en sık gözden kaçan nokta, istemci bileşeni (client component) sınırının dikkatsizce genişletilmesidir. ‘use client’ direktifi eklenen her bileşen, aslında sunucuda render edilebilecek bir içeriği istemciye iter ve SEO’ya katkısı olmayan JavaScript taşır.

‘use client’ direktifini yalnızca state, etkileşim veya tarayıcı API’si gerektiren yaprak bileşenlerde kullanmak, tüm üst düzey sayfa ve layout’ları sunucu bileşeni olarak tutmaktır. Bu yaklaşım, bundle boyutunu büyük ölçüde düşürür ve bot’un gördüğü HTML’i zenginleştirir.

JS SEO

Yaygın Tuzaklar ve Uzman Uyarıları

robots.txt’te /_next/, /static/, /assets/ klasörlerini engellemeyin. Google bunları render için okumak zorunda; engellenirse sayfa eksik render edilir.
Infinite scroll kullanıyorsanız, eşdeğer sayfalandırılmış URL’ler (?page=2) mutlaka sunun; aksi halde ikinci sayfa sonrası içerik hiç indekslenmez.
SPA’da 404 sayfası için gerçek 404 status kodu döndürmek kritiktir. Soft 404’ler zamanla sitenin genel kalite sinyalini bozar.
Çok dilli sitelerde hreflang etiketleri SSR çıktısında olmalıdır. Client-side dil değişikliği Google tarafından farklı dil olarak algılanmaz.
Lazy load yapılmış içerik önemli SEO değeri taşıyorsa (ürün açıklaması, yorumlar) Intersection Observer ile, kullanıcı scroll’u beklemeden, viewport altında görünmez şekilde yüklenmelidir.
JavaScript ile yapılan yönlendirmeler (window.location = …) bot tarafından çoğu zaman takip edilmez. Kalıcı yönlendirmeler 301 olarak sunucuda yapılmalıdır.

JS SEO

Ölçümleme ve Sürekli Doğrulama

JavaScript SEO’nun en büyük gizli tehlikesi, değişikliklerin fark edilmemesidir. Bir front-end güncellemesi meta’yı bozabilir, bir bundler yükseltmesi bundle boyutunu iki katına çıkarabilir ve hiçbir test bunu yakalamaz. Bu yüzden ölçüm, geliştirme süreciyle bütünleşmelidir.

Search Console URL Inspection her major deploy sonrası 10-20 kritik URL’de manuel çalıştırılmalıdır.
Screaming Frog veya Sitebulb ‘JavaScript rendering’ modunda aylık tam tarama yapmalı; render farkları rapor halinde paylaşılmalıdır.
Lighthouse CI, GitHub Actions içinde her PR’da çalıştırılmalı; performans eşiği altına düşen PR’lar merge edilmemelidir.
Chrome UX Report (CrUX) ile gerçek kullanıcı verisi izlenmeli; lab verisiyle yetinilmemelidir.

GSC Akışı

Sonuç Olarak;

JavaScript SEO, sadece bir kontrol listesi değil; mimariye, süreçlere ve geliştirici kültürüne dokunan bir disiplindir. Doğru rendering stratejisi, sayfa bazlı meta yönetimi, JSON-LD ile semantik zenginleştirme, Core Web Vitals disiplini ve sürekli ölçümleme birlikte yapıldığında modern framework’lerin hız avantajı SEO üzerinde bir dezavantaja dönüşmez; tam tersine, kullanıcı deneyiminden gelen sinyaller sıralamayı güçlendirir. ‘Önce hızlı bir SPA yazarız, SEO’yu sonra hallederiz’ yaklaşımı 2020’ler için artık geçerli değildir. SEO’yu projenin ilk commit’inden itibaren bir mühendislik gerekliliği olarak ele alan ekipler, arama trafiğini rakiplerinden çok daha az maliyetle büyütmektedir.

kontrol listesi

SIKÇA SORULAN SORULAR

JavaScript SEO Neden Önemlidir?

JavaScript SEO, modern web sitelerinde arama motorlarının sayfa içeriğini doğru şekilde görebilmesi, render edebilmesi ve indeksleyebilmesi için önemlidir. React, Vue, Angular ve Next.js gibi framework’lerle geliştirilen sitelerde içerik yalnızca tarayıcı tarafında yükleniyorsa Google bot sayfanın tamamını ilk taramada göremeyebilir. Bu durum özellikle ürün, kategori, blog ve hizmet sayfalarında indekslenme gecikmesi, eksik snippet görünümü ve organik trafik kaybı oluşturabilir. Bu nedenle kritik içeriklerin HTML çıktısında yer alması, meta etiketlerin sayfa bazlı üretilmesi ve iç link yapısının botlar tarafından okunabilir olması gerekir.

React ve Vue Sitelerde SEO İçin SSR Kullanmak Gerekir mi?

Herkese açık ve organik trafik hedefleyen sayfalarda SSR, SSG veya ISR kullanmak güçlü bir SEO avantajı sağlar. Saf React veya Vue ile oluşturulan client-side rendering yapılarında içerik JavaScript çalıştıktan sonra görünür hale geldiği için arama motorları sayfayı geç algılayabilir. Next.js, Remix, Nuxt 3 veya Astro gibi framework’ler sayesinde sayfa içeriği sunucu tarafında hazırlanabilir ve botlara daha anlaşılır HTML çıktısı sunulabilir. SaaS paneli, kullanıcı hesabı alanı veya SEO hedefi olmayan özel ekranlarda CSR kullanılabilir; fakat ürün, kategori, blog ve landing page gibi sayfalarda sunucu taraflı rendering yaklaşımı daha sağlıklı olur.

JavaScript SEO Kontrolü Nasıl Yapılır?

JavaScript SEO kontrolü için yalnızca tarayıcıda görünen sayfaya bakmak yeterli değildir. Sayfanın kaynak kodu, render edilmiş DOM yapısı ve Google’ın URL Denetleme aracı birlikte incelenmelidir. Kritik URL’lerde title, description, canonical, H1, iç linkler, ürün bilgileri ve JSON-LD verilerinin ilk HTML çıktısında bulunup bulunmadığı kontrol edilmelidir. Ayrıca Screaming Frog veya Sitebulb ile JavaScript rendering taraması yapılmalı, Lighthouse CI ile performans eşikleri takip edilmeli ve Search Console üzerinden indeksleme sorunları düzenli olarak analiz edilmelidir. Bu kontroller, front-end güncellemelerinin SEO tarafında oluşturabileceği riskleri erken tespit etmeye yardımcı olur.

Refik Aslandoğdu

SEO alanında 3 yıllık deneyimiyle çalışmalar yürütmektedir. Teknik analizler ve içerik optimizasyonu ile markalarına destek olmaktadır. Yenilikçi ve stratejik bir bakış açısıyla sürdürülebilir bir başarıya odaklanmaktadır.

Satış Temsilcilerimizle İletişime Geç

0850 304 37 10

Diğer Yazılar

JavaScript SEO: Modern Web Siteleri (React, Vue, Next.js) İçin İndekslenme Rehberi

Vaktiniz mi Kısıtlı?

Temel Prensip: Botu Birinci Sınıf Kullanıcı Saymak

Google’ın İki Dalgalı İndekslemesi ve Stratejik Anlamı

Rendering Stratejisi Seçimi: Karar Rehberi

Meta Yönetiminde Uzman Yaklaşımı

Structured Data: Rich Snippet İçin Değil, Anlam İçin

Core Web Vitals: JavaScript’in Asıl Sınavı

Routing, URL ve İç Link Mimarisi

Framework Bazında En Doğru Pratikler

React Projelerinde

Vue Projelerinde

Next.js Projelerinde

Yaygın Tuzaklar ve Uzman Uyarıları

Ölçümleme ve Sürekli Doğrulama

Sonuç Olarak;

JavaScript SEO Neden Önemlidir?

React ve Vue Sitelerde SEO İçin SSR Kullanmak Gerekir mi?

JavaScript SEO Kontrolü Nasıl Yapılır?

Refik Aslandoğdu

Yapay Zeka'da Adsera!

Çerez Tercihleriniz