Diller

JavaScript Framework’leri için SEO

JavaScript framework’leri için SEO — React, Next.js, Vue, Nuxt, Angular, Svelte ve Astro. Oluşturma modunun (SSR, SSG, CSR) Google’ın neyi dizine ekleyebileceğini nasıl belirlediği ve hangi framework’lerin kutudan çıktığı hâliyle SEO’yu en iyi ele aldığı.

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

JavaScript framework SEO’su oluşturma moduna iner: SSG ve SSR Googlebot’a önceden oluşturulmuş HTML verir; CSR ise başarılı olup olmayacağı değişen JavaScript çalıştırmasını gerektirir. Next.js ve Nuxt, yerleşik en fazla SEO desteğine sahiptir (SSR, SSG, ISR, metadata API’leri). CSR modundaki saf React ve Vue SEO için en riskli seçeneklerdir. Astro’nun island mimarisi varsayılan olarak SEO için mükemmeldir. Güvenilir dizine ekleme için Angular’ın @angular/ssr (eski adıyla Angular Universal) üzerinden SSR kullanması gerekir.

TL;DR — Teknik düzeyde JS framework SEO’su şunlarla ilgilidir: (1) ilk HTML yükü için oluşturma mimarisi, (2) yanıt gönderilmeden önce <head> içine metadata eklenmesi, (3) framework’ün hydration ve bağlantı keşfini nasıl ele aldığı ve (4) ISR önbelleğinin güncelliğini yitirmesi. Next.js en eksiksiz yerleşik SEO araçlarına sahiptir (Metadata API, yerleşik app/sitemap.ts, görsel optimizasyonu). Astro, mimarisi gereği SEO açısından en güvenli seçenektir.

Framework’e göre oluşturma modu, metadata API’si ve ISR desteği

Framework yetenekleri ve varsayılanları sürüme göre değişir; her framework’ün resmi belgelerinde doğrulayın. Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: web.dev: Rendering on the Web Hiçbir oluşturma modu dizine eklenmeyi veya sıralamayı garanti etmez. Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: Google: JavaScript SEO basics Bir karar için framework’leri karşılaştırırken her adayda aynı rotaları, içeriği, dağıtım hedefini ve araçları test edin — bunlardan herhangi birini değiştiren bir benchmark framework’ü değil, kurulum farkını ölçer.

FrameworkVarsayılan oluşturmaYerleşik metadata API’siSSR/SSG desteğiEkosistem SEO desteği
AstroSSG (islands)Evet (<head> in .astro files, Content Collections for structured data)İkisi deGüçlü
Next.jsSSR/SSG (yapılandırılabilir)Evet (App Router’da Metadata API)İkisi + ISRMükemmel
NuxtVarsayılan olarak SSREvet (useHead, useSeoMeta)İkisi + ISRMükemmel
SvelteKitVarsayılan olarak SSREvet (svelte:head)İkisi deİyi
React Router (framework modu)Varsayılan olarak SSREvet (meta export)SSR + Deferredİyi
AngularVarsayılan olarak CSRAngular Meta/Title servisleriyle@angular/ssr ileOrta
React (bare)CSRManuel (react-helmet-async; react-helmet bakımı yapılmıyor)Next.js/Gatsby ileWrapper’a bağlı
Vue (bare)CSRManuel (@unhead/vue; vue-meta bakımı yapılmıyor)Nuxt ileWrapper’a bağlı

Remix v2 ile React Router v7 birleşti — Remix’in sunucu oluşturma ve veri yükleme modeli artık React Router’ın “framework mode”u olarak dağıtılıyor ve Remix v2 uygulamaları için kararlı yükseltme yolu bu. Remix 3, Remix v2’nin halefi olmayan, ayrı ve deneysel, React’siz bir yeniden yazımdır (beta); onu bir React kod tabanı için doğrudan kullanılabilir SSR seçeneği olarak görmeyin.

Metadata zamanlaması, taranabilir bağlantılar ve ISR önbelleğinin güncelliğini yitirmesi

Metadata ekleme zamanlaması — Metadata (<title>, <meta>) sayfa yüklendikten sonra JavaScript tarafından eklenmemeli, sunucu yanıtında bulunmalıdır. Next.js’in Metadata API’si, Nuxt’un useSeoMeta’sı ve Astro’nun <head> bileşeni bunu doğru şekilde ele alır. CSR modunda document.title = '...' veya React Helmet bunu yapmaz — ilk HTML sunulduktan sonra çalışır.

Bağlantı keşfi — Googlebot, HTML’yi ayrıştırarak bağlantıları keşfeder. JavaScript ile eklenen bağlantılar (onClick, <a> etiketi olmadan dinamik yönlendirme) keşfedilmeyebilir. Önemli gezinme için gerçek <a href> öğeleri kullanın.

Hydration ve yinelenen içerik — SSR ve CSR farklı içerik oluşturursa (hydration uyuşmazlığı), dizine eklenen içerik kullanıcıların gördüğü içerikle eşleşmeyebilir. Tarayıcı konsolunda hydration hatalarını test edin.

Soft 404s — Client-side routers can silently render a “page not found” UI while returning a 200 HTTP status. Search engines index these as real pages. Make sure your 404 page returns a real 404 status, and server-side redirects return 301.

ISR önbelleği geçersizleştirme — Next.js ve Nuxt ISR kurulumlarında yeniden doğrulama penceresi sırasında tarayıcılara güncelliğini yitirmiş sayfalar sunulabilir. Zamana dayalı bir revalidate aralığı belirleyin; denetlemediğiniz bir zamanlamayla değişen içerik için (örneğin CMS kaydı), bunu webhook destekli bir rota işleyicisinden tetiklenen isteğe bağlı yeniden doğrulamayla birleştirin — tam API için Next.js ISR kılavuzuna bakın.

// app/blog/[id]/page.tsx — time-based revalidation
export const revalidate = 3600 // re-check this page at most once an hour

// app/api/revalidate/route.ts — on-demand revalidation, called by a CMS webhook
import { revalidatePath } from 'next/cache'
import { NextRequest, NextResponse } from 'next/server'

export async function POST(request: NextRequest) {
  const { path, secret } = await request.json()
  if (secret !== process.env.REVALIDATE_SECRET) {
    return NextResponse.json({ message: 'Invalid secret' }, { status: 401 })
  }
  revalidatePath(path) // e.g. '/blog/1' — next request regenerates fresh HTML
  return NextResponse.json({ revalidated: true })
}

Add an expert note

Pin an expert quote

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