Modern web sitelerinde ürün listeleri, filtreler, sayfa geçişleri, içerik blokları ve meta bilgileri JavaScript ile üretilebilir. Kullanıcı tarayıcısında sayfa eksiksiz görünse bile arama motorunun ilk HTTP yanıtında yalnızca boş bir uygulama kabuğu bulunabilir. JavaScript dosyası yüklenmez, API isteği hata verir veya içerik yalnızca tıklama sonrasında açılırsa Google’ın gördüğü sayfa kullanıcıdan farklı olabilir.
JavaScript SEO, JavaScript kullanılan sayfaların URL keşfi, tarama, render ve indeksleme aşamalarında arama motorlarına güvenilir içerik sunmasını sağlamaya odaklanır. Amaç JavaScript’i kaldırmak değil; kritik içerik, bağlantı ve sayfa sinyallerini yalnızca başarılı bir istemci çalışmasına bağımlı bırakmamaktır.
Bu rehber genel SEO uyumlu web tasarım kurallarını tekrar etmez. Odak, JavaScript rendering problemi, SSR–CSR–hydration farkları ve indekslenebilir içeriğin nasıl test edileceğidir.
JavaScript SEO nedir?
JavaScript SEO; JavaScript tabanlı veya JavaScript ile zenginleştirilmiş sayfaların arama motorları tarafından bulunması, işlenmesi ve doğru içerikle indekslenmesi için yapılan teknik optimizasyonların bütünüdür. Konu yalnızca React, Vue veya Angular gibi framework’lerle sınırlı değildir. İçeriği, bağlantıyı, canonical etiketini veya robots bilgisini sonradan JavaScript ile değiştiren her site bu kapsama girebilir.
Google Search Central, Google Search’ün JavaScript’i güncel Chromium tabanlı bir ortamla çalıştırdığını; ancak web uygulamalarının nasıl tarandığı ve render edildiği konusunda dikkate alınması gereken farklılıklar bulunduğunu belirtir Google JavaScript SEO Temelleri.
Google JavaScript sayfaları hangi aşamalarda işler?
Google’ın resmî rehberine göre JavaScript sayfaları üç ana aşamada işlenir: crawling, rendering ve indexing. Googlebot önce URL’yi talep eder, ilk HTML yanıtını ve erişilebilen bağlantıları işler. JavaScript çalıştırılması gereken sayfa render kuyruğuna alınabilir. Web Rendering Service sayfayı render ettikten sonra oluşan HTML tekrar işlenir ve indeksleme için değerlendirilir.
| Aşama | Google ne yapar? | JavaScript SEO riski |
|---|---|---|
| Crawling | URL’ye HTTP isteği gönderir, durum kodunu ve ilk HTML’i alır | robots.txt engeli, sunucu hatası veya boş app shell |
| İlk işleme | HTML içindeki bağlantı ve temel sayfa sinyallerini çıkarır | Kritik bağlantıların yalnızca script olaylarında bulunması |
| Rendering | JavaScript’i çalıştırır ve oluşan DOM’u işler | JS hatası, bloklu kaynak, API hatası veya uzun görev |
| Indexing | İçeriği, canonical ve diğer sinyalleri değerlendirir | Yanlış meta/canonical, soft 404 veya eksik render edilmiş içerik |
Tarama ile render aynı anda gerçekleşmek zorunda değildir. Bu nedenle ilk HTML’de bulunan başlık, ana içerik ve linkler daha az bağımlılıkla keşfedilebilir. Google, crawling ve rendering akışını ayrıntılı biçimde JavaScript SEO rehberinde açıklar Google JavaScript SEO Temelleri.
Googlebot JavaScript dosyalarını çalıştırır mı?
Evet; Google Search JavaScript çalıştırabilir. Fakat sayfanın ihtiyaç duyduğu script, CSS, API endpoint’i veya font gibi kaynaklar Googlebot’a kapalıysa sonuç eksik olabilir. robots.txt tarafından engellenen bir sayfa ya da kaynak Google tarafından normal biçimde render edilemeyebilir.
JavaScript dosyalarının herkese açılması, gizli verinin istemciye gönderilmesi anlamına gelmemelidir. Güvenlik sunucu tarafında authentication ve authorization ile korunmalıdır. Arama botuna özel gizli API erişimi vermek yerine indekslenmesi gereken public içerik güvenilir HTML olarak sunulmalıdır.
İlk HTML neden önemlidir?
Client-side rendered bir uygulamada sunucudan gelen ilk HTML yalnızca root elementi ve script referansları içerebilir. Ana başlık, ürün açıklaması ve navigasyon JavaScript çalıştıktan sonra eklenir. Google render başarılı olduğunda bu içeriği görebilir; fakat bütün keşif ve anlamlandırma ikinci aşamaya bağımlı olur.
SSR veya static rendering kullanıldığında kritik içerik HTML yanıtında hazır gelir. Tarayıcı daha sonra JavaScript ile interaktif davranışları ekleyebilir. Bu yaklaşım hem botların hem düşük güçlü cihazların içerikle daha erken karşılaşmasını sağlayabilir.
CSR, SSR, static rendering ve hydration farkları
| Yaklaşım | İlk içerik nerede oluşur? | SEO açısından temel durum |
|---|---|---|
| CSR | Tarayıcı JavaScript’i çalıştırdıktan sonra | Kritik içerik ve linkler render başarısına daha bağımlıdır |
| SSR | Her istekte sunucuda HTML üretilir | İlk yanıtta içerik sunulabilir; sunucu maliyeti ve cache planlanır |
| Static rendering | Build aşamasında statik HTML üretilir | Değişimi seyrek public sayfalarda güçlü ve basit olabilir |
| Hydration | Sunucu HTML’i gönderir, tarayıcı interaktivite ekler | İçerik hazırdır; hydration hataları kullanıcı etkileşimini bozabilir |
web.dev, SSR’ı sunucunun HTML üretmesi, CSR’ı tarayıcının JavaScript ile DOM oluşturması ve hydration’ı sunucu tarafından üretilmiş HTML’e istemci davranışlarının bağlanması olarak tanımlar web.dev Rendering on the Web.
En iyi yaklaşım framework adına göre değil sayfa türüne göre seçilmelidir. Giriş gerektiren uygulama paneli CSR ile çalışabilirken organik aramadan trafik alması beklenen ürün, kategori, hizmet ve blog sayfalarında SSR veya static rendering daha güvenli olabilir.
JavaScript ile üretilen bağlantılar Google tarafından bulunur mu?
JavaScript ile DOM’a eklenen bağlantılar, gerçek bir <a href="..."> elementi oluşturuyorsa Google tarafından taranabilir. Yalnızca onclick olayı kullanan span veya butonlar güvenilir link keşfi sağlamaz. Google’ın link rehberi, taranabilir bağlantının anchor elementi ve çözümlenebilir bir href değeri taşımasını önerir Google Taranabilir Bağlantı Rehberi.
- Navigasyonda gerçek anchor ve href kullanın.
- Router bileşeninin oluşan HTML’de geçerli anchor üretmesini doğrulayın.
- Boş veya yalnız ikon içeren linklere anlaşılır anchor/alt metni sağlayın.
- URL’yi yalnızca click handler içinde saklamayın.
- JavaScript ile eklenen linkleri render edilmiş HTML’de kontrol edin.
İç linkler yalnız kullanıcı navigasyonu için değil URL keşfi ve site mimarisi için de önemlidir. Bu kontrol, kapsamlı bir teknik SEO danışmanlığı çalışmasında kaynak HTML ve render edilmiş DOM karşılaştırmasıyla yapılmalıdır.
SPA yapılarında her ekranın ayrı URL’si olmalı mı?
Organik aramada ayrı sayfa olarak bulunması gereken her içerik kalıcı ve paylaşılabilir URL’ye sahip olmalıdır. Tek URL altında yalnızca JavaScript state’i değiştirerek ürün, kategori veya makale göstermek arama motorunun ayrı içerikleri keşfetmesini zorlaştırır.
History API ile gerçek URL’ler üretilebilir; ancak bu URL’ler doğrudan açıldığında sunucu doğru içerik veya uygulama girişini döndürmelidir. Sunucunun bütün bilinmeyen adreslere 200 durum koduyla aynı app shell’i vermesi soft 404 sorununa yol açabilir.
HTTP durum kodları JavaScript sitelerde neden kritik?
Bir SPA’da bulunmayan ürün route’u ekranda “ürün bulunamadı” mesajı gösterebilir; fakat sunucu 200 döndürüyorsa teknik olarak başarılı sayfa yanıtı verilmiş olur. Google’ın JavaScript hata giderme rehberi, SPA’larda soft 404 oluşmaması için gerçek 404 response veya noindex uygulanabilecek hata URL’si gibi stratejiler önerir Google JavaScript Sorunlarını Giderme.
- Mevcut sayfalarda 200 durum kodu döndürün.
- Kalıcı olarak kaldırılan URL için uygun 404 veya 410 kullanın.
- Yönlendirmeleri sunucu tarafında 3xx ile uygulayın.
- Sunucu hatalarını boş 200 sayfa olarak gizlemeyin.
- Client-side route ile sunucu response davranışını birlikte test edin.
JavaScript ile title, meta ve canonical değiştirmek güvenli mi?
Google JavaScript ile değiştirilen bazı meta etiketlerini işleyebilir; ancak resmî rehber mümkün olduğunda meta etiketlerini JavaScript ile eklemek veya değiştirmekten kaçınmayı ve zorunluysa kapsamlı test yapmayı önerir Google Desteklenen Meta Etiketleri.
Her route için benzersiz title, meta description, canonical ve robots sinyali ilk HTML’de doğru üretilirse hata yüzeyi azalır. Hydration sonrasında head içeriğinin yanlış varsayılan değere dönmediği de kontrol edilmelidir. Canonical yalnızca HTML’de görünmekle değil hedef URL’nin gerçekten eşdeğer içerik sunmasıyla anlam kazanır.
Lazy loading içerik indekslemesini nasıl etkiler?
Görsel ve alt içerikleri viewport’a yaklaşıldığında yüklemek performans açısından yararlı olabilir. Fakat ana içerik yalnız kullanıcının tıklaması, kaydırması veya form doldurması sonrasında çağrılıyorsa Google bu etkileşimi gerçekleştirmeyebilir. Kritik içerik otomatik ve görünürlük temelli yüklenmelidir.
Google’ın lazy loading rehberi, uygulama sonrasında URL Inspection Tool ile render edilmiş HTML’in kontrol edilmesini önerir Google Lazy-Loaded İçerik Rehberi. Sonsuz kaydırmada her içerik parçası kalıcı URL’ye sahip olmalı ve sayfalar arasında gerçek taranabilir bağlantılar bulunmalıdır.
robots.txt JavaScript rendering’i nasıl bozabilir?
robots.txt içinde sayfanın çalışması için gerekli script veya API yolları engellenirse Googlebot kaynakları alamayabilir. Kullanıcı tarayıcısı eriştiği için hata manuel kontrolde görünmeyebilir. URL Inspection çıktısındaki yüklenemeyen kaynaklar bu nedenle incelenmelidir.
robots.txt indeks gizleme aracı değildir. Engellenen URL’nin içeriği taranmasa bile başka sayfalardaki bağlantılardan URL bilinip arama sonuçlarında sınırlı biçimde görünebilir. İndekslenmemesi gereken public sayfalar için Google’ın desteklediği noindex yöntemi kullanılmalı; noindex etiketini görebilmesi için taramaya izin verilmelidir.
Dynamic rendering çözüm olarak kullanılmalı mı?
Dynamic rendering, botlara server-rendered sürüm; kullanıcılara client-rendered sürüm sunan eski bir workaround yaklaşımıdır. Google güncel dokümantasyonunda bunu uzun vadeli ve önerilen çözüm olarak görmediğini; SSR, static rendering veya hydration yöntemlerini önerdiğini belirtir Google Dynamic Rendering Rehberi.
Ayrı bot render altyapısı içerik eşitsizliği, cache, bakım ve hata ayıklama maliyeti oluşturur. Geçici legacy sistem çözümü olarak kullanılacaksa kullanıcı ve bot içeriğinin anlamlı biçimde eşdeğer olduğu doğrulanmalıdır.
JavaScript hataları indekslemeyi nasıl etkiler?
Syntax hatası, hydration çakışması, API zaman aşımı veya beklenmeyen null değer render zincirini durdurabilir. Kullanıcıda hata yalnız belirli cihazda görülürken Googlebot farklı ağ veya cache koşulunda aynı problemi yaşayabilir. Client-side analytics, Googlebot ve Web Rendering Service davranışının tamamını göstermeyebilir.
Google, URL Inspection Tool ve Rich Results Test üzerinden render edilmiş DOM, yüklenen kaynaklar ve JavaScript console hatalarının incelenmesini önerir Google JavaScript Sorunlarını Giderme. Üretimde gerçek kullanıcı JS hata oranı da ayrı gözlemlenmelidir.
Kaynak HTML ile render edilmiş HTML neden karşılaştırılmalı?
Kaynak HTML sunucunun ilk cevabıdır. Render edilmiş HTML ise JavaScript çalıştıktan sonraki DOM durumunu gösterir. Başlık, ana metin, linkler ve yapılandırılmış veri yalnız ikinci görünümde bulunuyorsa SEO bütünüyle render başarısına bağımlıdır.
| Kontrol | Kaynak HTML | Render edilmiş HTML | Risk |
|---|---|---|---|
| H1 ve ana metin | Yok | Var | Render başarısızlığında içerik kaybolur |
| İç linkler | Yok | Gerçek href ile var | URL keşfi render aşamasına kalır |
| Canonical | Varsayılan | Doğru URL | Çelişkili sinyal oluşabilir |
| Robots meta | Noindex | Index | İlk noindex sinyali indekslemeyi engelleyebilir |
| 404 mesajı | 200 app shell | Bulunamadı | Soft 404 riski |
Search Console ile JavaScript SEO testi nasıl yapılır?
- Search Console URL Inspection Tool’da canlı URL testi çalıştırın.
- Google’ın aldığı HTTP durum kodunu kontrol edin.
- Render edilmiş ekran görüntüsü ve HTML içinde ana içeriği arayın.
- Yüklenemeyen JavaScript, CSS ve API kaynaklarını inceleyin.
- Console hata ve exception kayıtlarını kontrol edin.
- Canonical, robots, title ve structured data çıktısını doğrulayın.
- Sayfadaki önemli iç linklerin gerçek href ile oluştuğunu test edin.
- Mobil Googlebot görünümünün masaüstü testinden farklı olabileceğini unutmayın.
- Düzeltme sonrası yalnız tek URL’yi değil aynı template’teki örnekleri test edin.
- Page Indexing ve Crawl Stats raporlarındaki değişimi izleyin.
Tek URL’nin başarılı testi bütün siteyi garanti etmez. Ürün, kategori, filtre, pagination, blog ve hata template’leri ayrı örnek setleriyle denetlenmelidir. Bu süreç SEO denetimi ve aksiyon planı içinde geliştiriciye atanabilir somut sorunlara dönüştürülmelidir.
SSR kullanmak bütün JavaScript SEO sorunlarını çözer mi?
Hayır. SSR yalnızca kritik içeriğin ilk HTML’de bulunmasını kolaylaştırır. Yanlış canonical, robots engeli, duplicate URL, soft 404, zayıf iç link yapısı veya bozuk structured data SSR kullanılan sitede de sorun oluşturabilir.
Ayrıca SSR sayfası sunucuda hata veriyor, cache yanlış kullanıcı verisi gösteriyor veya hydration içeriği değiştiriyorsa yeni problemler doğar. Rendering yaklaşımı SEO altyapısının bir parçasıdır; kalite garantisi değildir.
Hangi sayfalarda SSR veya static rendering öncelikli olmalı?
- Organik aramada görünmesi beklenen hizmet ve landing sayfaları.
- Ürün, kategori ve marka sayfaları.
- Blog, rehber ve dokümantasyon içerikleri.
- Her biri ayrı URL’ye sahip lokasyon veya sektör sayfaları.
- Arama botlarının keşfetmesi gereken pagination ve liste sayfaları.
- Title, canonical ve structured data doğruluğu kritik sayfalar.
Giriş sonrası CRM, yönetim paneli veya kişisel dashboard arama indeksine açık değilse CSR daha doğal olabilir. Bir web tasarım ve SEO projesinde rendering kararı sayfa şablonuna ve arama görünürlüğü hedeflerine göre verilmelidir.
En sık yapılan JavaScript SEO hataları
- Google JavaScript çalıştırdığı için test gerekmeyeceğini varsaymak.
- Kritik içeriği boş app shell ve tek API çağrısına bağımlı bırakmak.
- Link yerine click handler kullanılan div veya button üretmek.
- Bütün SPA route’larına 200 durum kodu döndürmek.
- İçeriği yalnız kullanıcı tıklaması veya kaydırmasıyla yüklemek.
- Meta, canonical ve robots etiketlerini çelişkili biçimde değiştirmek.
- Gerekli JS ve API kaynaklarını robots.txt ile engellemek.
- Dynamic rendering’i kalıcı mimari olarak kurmak.
- Kaynak HTML ile render edilmiş DOM’u karşılaştırmamak.
- Sadece ana sayfayı test edip diğer template’leri görmezden gelmek.
JavaScript SEO kontrol listesi
- Her indekslenebilir içerik benzersiz ve kalıcı URL’ye sahip mi?
- Sunucu doğru 200, 3xx, 404 veya 410 durum kodunu veriyor mu?
- Ana içerik kaynak veya render edilmiş HTML’de eksiksiz mi?
- Önemli bağlantılar anchor ve gerçek href kullanıyor mu?
- Title, canonical ve robots sinyalleri ilk HTML’de doğru mu?
- JavaScript, CSS ve public API kaynakları Googlebot’a açık mı?
- Lazy loading kullanıcı etkileşimine bağımlı mı?
- Search Console canlı testinde console ve resource hatası var mı?
- SSR/CSR tercihi sayfanın organik trafik hedefiyle uyumlu mu?
- Release sonrasında template bazlı otomatik render kontrolleri çalışıyor mu?
Sonuç: Google’ın render edebilmesi test sorumluluğunu kaldırmaz
Google modern JavaScript’i çalıştırabilir ve render edilen içeriği indeksleyebilir. Buna rağmen crawling, rendering ve indexing ayrı aşamalardır. Kritik içerik, link ve meta sinyalleri yalnız başarılı istemci çalışmasına bağlıysa JavaScript hatası veya kaynak engeli arama görünürlüğünü etkileyebilir.
Sağlıklı JavaScript SEO yaklaşımı; her içerik için gerçek URL, doğru HTTP durumu, taranabilir bağlantı, güvenilir HTML, kontrollü lazy loading ve Search Console doğrulamasını birlikte uygular. SSR, static rendering veya hydration bu hedefi kolaylaştırabilir; fakat asıl ölçüt Google’ın render edilmiş HTML’de doğru içeriği ve sinyalleri gerçekten görebilmesidir.
Sıkça Sorulan Sorular
Google JavaScript ile oluşturulan içerikleri indeksleyebilir mi?
Evet. Google JavaScript çalıştırıp render edilen içeriği işleyebilir. Ancak bloklanan kaynaklar, JavaScript hataları, kullanıcı etkileşimi gerektiren yükleme ve yanlış sayfa sinyalleri içeriğin eksik görülmesine neden olabilir.
React veya Vue siteler SEO açısından kötü müdür?
Hayır. Framework tek başına SEO sonucu belirlemez. URL, rendering, HTTP durum kodu, iç link, meta bilgileri ve indekslenebilir içeriğin nasıl sunulduğu önemlidir.
JavaScript SEO için SSR zorunlu mudur?
Zorunlu değildir. Google CSR içeriğini render edebilir. Ancak organik arama hedefli kritik sayfalarda SSR veya static rendering içeriği ilk HTML’de sunarak bağımlılığı ve hata yüzeyini azaltabilir.
SPA sayfalarında 404 nasıl verilmelidir?
Bulunmayan URL sunucu seviyesinde gerçek 404 veya 410 durum kodu döndürmelidir. Yalnızca JavaScript ile ekranda hata mesajı gösterip 200 dönmek soft 404 riski oluşturabilir.
JavaScript ile oluşturulan linkler Google tarafından taranır mı?
Oluşan DOM’da gerçek anchor elementi ve çözümlenebilir href bulunuyorsa taranabilir. Yalnız onclick kullanan button, span veya div yapıları güvenilir link keşfi sağlamaz.
JavaScript sayfanın Google görünümü nasıl test edilir?
Search Console URL Inspection Tool ile canlı test çalıştırın; render edilmiş HTML, ekran görüntüsü, yüklenen kaynaklar, console hataları, canonical ve robots sinyallerini kontrol edin.