JavaScript ve SEO: React ve Next.js'te Dikkat Edilecekler

Google JavaScript'i nasıl işler?

Google'ın dokümanına göre JavaScript kullanan sayfalar üç aşamadan geçer 1:

• Tarama (crawling): Googlebot URL'yi ister, gelen HTML'i okur ve içindeki bağlantıları sıraya ekler.
• İşleme (rendering): Sayfa, Chromium tabanlı başsız (ekransız) bir tarayıcıda çalıştırılır; JavaScript'in ürettiği içerik ortaya çıkar.
• İndeksleme: İşlenmiş HTML analiz edilir ve dizine eklenir.

Kritik ayrıntı: HTTP 200 dönen sayfalar işleme kuyruğuna alınır, ancak robots meta etiketi veya başlığı indekslenmemesini söylüyorsa alınmaz 1. Bu yüzden ilk HTML'de noindex varsa Google işleme ve JavaScript çalıştırma adımını atlayabilir; JavaScript ile sonradan kaldırmak işe yaramaz 1.

Google aynı dokümanda sunucu tarafı işleme veya ön işlemenin hâlâ iyi bir fikir olduğunu, çünkü siteyi kullanıcılar ve tarayıcılar için hızlandırdığını ve her botun JavaScript çalıştıramadığını belirtiyor 1. Bu cümle, aşağıdaki yapay zekâ tarayıcıları bölümünün de özetidir.

CSR, SSR, SSG, ISR: hangisi SEO için daha güvenli?

"İşleme modeli", sayfanın HTML'inin nerede ve ne zaman üretildiğini anlatır. Pazarlama ekibinin bilmesi gereken tek soru şudur: tarayıcı sayfayı ilk istediğinde ana metin HTML'in içinde mi?

Hangi modeli seçeceğinize içeriğin ne sıklıkla değiştiği karar verir. Kurumsal sayfalar ve blog yazıları gün içinde değişmediği için SSG en hızlı ve en sorunsuz seçenektir. Binlerce ürünlü bir katalogda her sayfayı her derlemede yeniden üretmek pahalı olacağından ISR mantıklıdır: sayfa ilk istekte üretilir, sonra belirlediğiniz aralıkla yenilenir. Stok ve fiyatın anlık doğru olması gereken sayfalarda SSR tercih edilir. CSR ise arama motorunda görünmesi gerekmeyen alanlarda, örneğin hesap paneli veya sipariş takibi gibi giriş arkasındaki sayfalarda sorun yaratmaz. Aynı site içinde bu modelleri sayfa türüne göre karıştırmak normaldir.

Next.js App Router'da bileşenler varsayılan olarak sunucu bileşenidir; risk, ana içeriği 'use client' ile işaretlenmiş bir bileşende tarayıcıdan veri çekerek üretmekle başlar. Etkileşim (filtre, sepet, sohbet balonu) istemcide kalabilir; ürün açıklaması, makale metni, fiyat ve gezinme sunucudan gelmelidir.

Yapay zekâ tarayıcıları JavaScript çalıştırıyor mu?

Bu soruya en somut veri, Vercel'in bir veri ortağıyla birlikte hazırlayıp 17 Aralık 2024'te yayımladığı analizden geliyor 5.

Metodoloji: Birincil veri, nextjs.org ve Vercel ağının birkaç aylık izlenmesinden geliyor. Bulguları farklı teknolojilerde doğrulamak için iki iş ilanı sitesi de incelenmiş: biri Next.js ile, diğeri özel bir monolitik altyapıyla kurulu 5. Ölçek fikri vermesi için: incelenen son bir ayda GPTBot Vercel ağında 569 milyon, Claude'un tarayıcısı 370 milyon istek üretmiş 5.

Bulgular: Analize göre OpenAI (OAI-SearchBot, ChatGPT-User, GPTBot), Anthropic (ClaudeBot), Meta, ByteDance ve Perplexity tarayıcılarının hiçbiri JavaScript işlemiyor 5. ChatGPT ve Claude tarayıcıları JavaScript dosyalarını indiriyor (isteklerin sırasıyla yüzde 11,50 ve yüzde 23,84'ü) ama çalıştırmıyor. Buna karşılık Gemini, Googlebot altyapısını kullandığı için JavaScript'i tam işliyor; AppleBot da tarayıcı tabanlı bir tarayıcıyla işliyor 5.

Sınırlar: Bu, tek bir barındırma ağının verisi ve belirli bir döneme ait; tarayıcıların davranışı sonradan değişmiş olabilir. Raporun kendi notu da önemli: ilk HTML yanıtına gömülü JSON verisi gibi içerikler, JS çalışmasa bile okunabilir 5. Pratik sonuç değişmiyor: kaynak gösterilmek istediğiniz içeriği sunucuda hazır HTML olarak verin. Tarayıcı bazında erişim kararları için AI tarayıcıları ve robots.txt yazımıza bakın.

Bağlantılar neden gerçek a href olmalı?

Google, bağlantıları yalnız href özniteliği olan a etiketlerinden güvenilir biçimde çıkarabildiğini söylüyor 2. Tıklama olayıyla çalışan, href taşımayan veya javascript: ile başlayan bağlantılar taranamayabilir.

<!-- Google bu bağlantıları izleyebilir -->
<a href="/hizmetler/teknik-seo">Teknik SEO</a>
<a href="https://example.com/urunler/ayakkabi" class="kart">Ayakkabılar</a>

<!-- Google bu bağlantıları güvenilir biçimde izleyemez -->
<a routerLink="urunler/ayakkabi">Ayakkabılar</a>
<span href="/urunler/ayakkabi">Ayakkabılar</span>
<a onclick="git('/urunler/ayakkabi')">Ayakkabılar</a>
<a href="javascript:git('urunler')">Ayakkabılar</a>

Next.js'te next/link bileşeni gerçek bir a etiketi üretir; sorun genellikle router.push ile çalışan kart ve düğmelerde çıkar. Yönlendirmede URL parçası (hash, ör. #/urunler) yerine History API kullanılmasını Google ayrıca öneriyor 1. Bağlantı metninin "tıklayın" yerine hedef sayfayı anlatması da aynı rehberin önerisidir 2.

Meta etiketleri ve Next.js Metadata API

Google, başlık ve meta açıklamanın JavaScript ile ayarlanabileceğini, ancak kanonik URL'nin ideal olarak HTML'de bulunmasını ve JS ile ekleniyorsa ilk HTML'deki değerle aynı olmasını öneriyor 1. Next.js App Router bunu sunucuda çözer: statik sayfalar için metadata nesnesi, veriye bağlı sayfalar için generateMetadata fonksiyonu kullanılır ve bu dışa aktarımlar yalnız sunucu bileşenlerinde desteklenir 6.

// app/blog/[slug]/page.tsx
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { getPost } from "@/lib/posts";

export async function generateMetadata(
  { params }: { params: Promise<{ slug: string }> }
): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);
  if (!post) return {};
  return {
    title: post.title,
    description: post.description,
    alternates: { canonical: `https://example.com/blog/${slug}` },
  };
}

export default async function Page(
  { params }: { params: Promise<{ slug: string }> }
) {
  const { slug } = await params;
  const post = await getPost(slug);
  if (!post) notFound(); // 404 sayfası + noindex
  return <article>{post.body}</article>;
}

Dikkat edilecek bir ayrıntı: dinamik işlenen sayfalarda Next.js meta verisini akışla (streaming) gönderebilir; yani etiketler, generateMetadata çözüldüğünde HTML'e sonradan eklenir. Next.js bunu head etiketinde meta bekleyen botlar için (dokümandaki örnekler Twitterbot, Slackbot, Bingbot) kullanıcı aracısına bakarak kapatır; önceden işlenmiş sayfalarda ise meta verisi derleme sırasında çözüldüğü için akış kullanılmaz 6. Önemli sayfalarınızı mümkünse statik üretin; dinamikse çıktıyı aşağıdaki test adımlarıyla kontrol edin.

404 durum kodları ve yumuşak 404 sorunu

Tek sayfa uygulamalarında (SPA) bulunamayan içerik çoğu zaman "Ürün bulunamadı" yazan ama HTTP 200 dönen bir sayfa olarak gösterilir. Google bunu yumuşak 404 (soft 404) olarak değerlendirir ve iki çözüm önerir: sunucunun 404 döndürdüğü bir URL'ye JavaScript ile yönlendirmek ya da hata sayfasına JavaScript ile noindex eklemek 1 4.

Next.js'te notFound() fonksiyonu 404 sayfasını gösterir ve noindex ekler. Ancak yanıt akışla gönderilmeye başladıysa durum kodu artık değiştirilemez: Next.js dokümanına göre akış başladığında yanıt 200 döner; bulunamayan sayfa akış içinde gösterilirse Next.js HTML'e noindex ekler, böylece sayfa indekslenmez 7. Gerçek bir 404 durum kodu istiyorsanız (analitik veya izleme için), kaynağın varlığını yanıt akışı başlamadan önce kontrol etmeniz gerekir 7. Örnekteki gibi kontrolü sayfa bileşeninin başında, Suspense sınırının dışında yapmak bu yüzden önemlidir.

Tembel yüklenen içerik görünüyor mu?

Tembel yükleme (lazy-load), içeriği ihtiyaç duyulduğunda yükleyerek hız kazandırır; yanlış uygulanırsa içeriği Google'dan gizler. Google'ın önerisi, içeriğin görünür alana girdiğinde yüklenmesidir: tarayıcının yerleşik tembel yüklemesi, IntersectionObserver API veya bu ilkeyle çalışan bir kütüphane 3. Kaydırma veya tıklama gibi kullanıcı eylemine bağlı yükleme yöntemlerinden kaçının; Googlebot sayfayla bu şekilde etkileşime girmez 3.

Sonsuz kaydırmalı listelerde her içerik parçasının kalıcı ve benzersiz bir URL'si olmalı (ör. ?page=12), parçalar birbirine bağlantı vermeli ve yeni parça yüklendiğinde adres History API ile güncellenmelidir 3. Ayrıca ilk ekranda görünen içeriği tembel yüklemek algılanan hızı düşürür; bu konu Core Web Vitals yazımızda LCP başlığı altında ele alınıyor.

URL Denetimi ile test: adım adım

Teori yerine Google'ın gördüğünü kontrol edin. URL Denetimi aracının canlı testi sayfayı o anda getirir, işlenmiş HTML'i, ekran görüntüsünü, HTTP başlıklarını ve JavaScript konsol çıktısını gösterir 8 4.

1. Ham HTML'i kontrol edin. Tarayıcıda "Sayfa kaynağını görüntüle" ile ana metnin, başlığın, kanonik etiketin ve bağlantıların JavaScript çalışmadan var olup olmadığına bakın. Bu, JS çalıştırmayan tarayıcıların gördüğüdür.
2. Search Console'da URL'yi denetleyin ve "Canlı URL'yi test et" seçeneğini çalıştırın.
3. "Test edilen sayfayı görüntüle" panelini açın; işlenmiş HTML'de ana içeriğin, tembel yüklenen görsellerin src değerlerinin ve iç bağlantıların bulunduğunu doğrulayın 3.
4. Ekran görüntüsünü inceleyin; boş alan, yükleniyor animasyonu veya çerez duvarı görüyorsanız içerik Google'a ulaşmıyor olabilir.
5. "Diğer bilgiler" altındaki yüklenemeyen kaynaklara ve konsol hatalarına bakın 4.
6. Bulunmayan bir URL deneyin (ör. /blog/olmayan-yazi) ve 404 durum kodu ya da noindex döndüğünü doğrulayın.
7. Kullanıcının bildirdiği ve Google'ın seçtiği kanonik URL'yi karşılaştırın 8.

Bulguları geliştirici ekibinize öncelikli bir iş listesi olarak aktarmak için teknik SEO hizmetimizi inceleyebilir, genel tablo için teknik SEO kontrol listesine dönebilirsiniz.