Next.js SEO: Oluşturma, meta veriler, site haritaları ve sıralama alan bir blog

Next.js SEO her şeyden önce her rota için doğru seçimi yapmaktır: neyin sunucuda oluşturulacağı, neyin önbelleğe alınacağı ve herhangi bir betik çalışmadan önce HTML'de neyin yer alacağı. Google, JavaScript SEO temel bilgileri sayfasında JavaScript uygulamalarını üç aşamada işlediğini (tarama, oluşturma, dizine ekleme) ve sunucu tarafı oluşturmanın ya da ön oluşturmanın "hâlâ çok iyi bir fikir" olduğunu açıklar. Next.js bunu varsayılan olarak yapar. Bu rehber App Router'ı (Next.js 13 ve sonrası) ele alır, eski Pages Router için de notlar içerir.

Next.js SEO için iyi mi?

Evet. İstemci tarafında oluşturulan klasik bir React uygulaması neredeyse boş bir HTML dosyası gönderir ve sayfayı tarayıcıda kurar; arama motorlarının onu oluşturması gerekir ve birçok bot bunu hiç yapmaz. Next.js React'i sunucuda oluşturur, dolayısıyla HTML yanıtı başlıkları, metni, bağlantıları ve meta verileri zaten içerir. JavaScript SEO rehberimiz bu farkın dizine ekleme için neden önemli olduğunu açıklıyor.

App Router'da bileşenler varsayılan olarak Server Components olarak çalışır. 'use client' ile işaretlenen bileşenler bile sunucuda HTML olarak önceden oluşturulur. Zayıf nokta veridir: useEffect içinde ya da yalnızca bir tıklamadan sonra yüklediğiniz her şey ilk HTML'de yer almaz. İçeriği Server Components içinde çekin, istemci bileşenlerini etkileşim için kullanın.

SSG, SSR, ISR veya CSR: hangi oluşturma modunu seçmelisiniz?

Next.js modları rota bazında karıştırmanıza izin verir. Seçim; güncelliği, hızı ve tarayıcıların ne aldığını etkiler.

Next.js ISR dokümantasyonu faydalarını sıralar: statik içeriği "tüm siteyi yeniden derlemeden" güncellemek ve uzun derleme süreleri olmadan çok sayıda sayfayı yönetmek. export const revalidate = 3600 içeren bir rota en fazla saatte bir yeniden üretilir; tam kontrol için içerik değiştiğinde revalidatePath veya revalidateTag çağırın. ISR statik dışa aktarma (output: 'export') ile çalışmaz. İstemci tarafında oluşturulmaya devam etmesi gereken uygulamalar için tek sayfalık uygulama SEO rehberimiz çözümleri anlatıyor.

Metadata API ile başlık, açıklama ve kanonik adres nasıl ayarlanır?

App Router'da Metadata API, next/head'in yerini alır. Next.js meta veri dokümantasyonuna göre bir layout veya sayfadan statik bir metadata nesnesi ya da değerler veriye bağlıysa bir generateMetadata fonksiyonu dışa aktarırsınız ve Next.js head etiketlerini üretir. Her ikisi de yalnızca Server Components içinde desteklenir.

export async function generateMetadata({ params }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `/blog/${slug}` },
    openGraph: { images: [post.cover] },
  }
}

Sorunların çoğunu önleyen beş kural:

• metadataBase ayarlayın: kök layout'ta canlı alan adınızı belirtin; böylece göreli kanonik adresler ve Open Graph URL'leri mutlak hale gelir.
• Başlık şablonu kullanın: kök layout'ta '%s | Marka' gibi bir şablonla her sayfaya markayı bir kez içeren benzersiz bir başlık verin.
• Dizine eklenebilir her sayfaya kendini gösteren bir kanonik adres verin: alternates.canonical ile tanımlanır; URL parametreleri ve sondaki eğik çizgilerden doğan kopyalara karşı korur. Kanonik etiket sözlük maddemiz kuralları özetliyor.
• Her sayfa için açıklama yazın: generateMetadata içinde içerikten üretin, asla site geneli tek bir varsayılan kullanmayın.
• Open Graph görselleri ekleyin: rota klasörüne bir opengraph-image dosyası koyun ve sonucu bir Open Graph önizleme aracıyla kontrol edin.

Dinamik sayfalarda Next.js, oluşturmayı hızlandırmak için meta verileri ilk baytlardan sonra akış halinde gönderir. Dokümantasyona göre akış, meta verileri head içinde bekleyen ve user agent ile tanınan botlar için devre dışıdır (örnekler arasında Bingbot, Twitterbot ve Slackbot var); htmlLimitedBots seçeneği listeyi özelleştirir. Önem verdiğiniz bir tarayıcı listede yoksa ekleyin. Pages Router'daki karşılığı, yinelenen etiketleri önlemek için key özniteliğiyle kullanılan next/head içindeki Head bileşenidir.

Next.js'te sitemap.xml ve robots.txt nasıl oluşturulur?

İkisi de app klasöründeki özel dosyalardır. URL döndüren bir fonksiyonu dışa aktaran sitemap.ts dosyası /sitemap.xml olur; robots.ts dosyası /robots.txt olur. Site haritası referansı, dosyanın varsayılan olarak önbelleğe alındığını ve Google'ın sınırının site haritası başına 50.000 URL olduğunu belirtir; bunun üzerinde generateSitemaps onu birkaç dosyaya böler.

import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPosts()
  return posts.map((p) => ({
    url: `https://example.com/blog/${p.slug}`,
    lastModified: p.updatedAt,
  }))
}

Yalnızca kanonik, dizine eklenebilir ve 200 döndüren URL'leri ekleyin, lastModified alanına gerçek güncelleme tarihini yazın. Site haritası çok dilli siteler için alternates.languages da kabul eder. robots.ts içinde site haritasını gösterin ve hangi yapay zeka botlarının siteyi tarayabileceğine karar verin; yapay zeka tarayıcıları için robots.txt makalemiz bunları listeliyor. Biçimle ilgili ayrıntılar XML site haritası sözlük maddemizde.

Bir Next.js sitesinin SEO'sunu en sık bozan teknik ayrıntılar nelerdir?

Bu sorunların hepsi taranabilirliği azaltır: bir tarayıcı her URL'yi bağlantılar üzerinden keşfedebilmeli ve temiz bir durum kodu almalıdır.

Next.js'e yapılandırılmış veri nasıl eklenir?

Next.js dokümantasyonu, JSON-LD'yi application/ld+json türünde bir script etiketi olarak doğrudan sayfa veya layout bileşeninde, sayfayla aynı veriden oluşturmayı ve enjeksiyonu önlemek için serileştirilmiş JSON içindeki < karakterini kaçış karakteriyle değiştirmeyi önerir. Sunucuda oluşturulduğu için Google ve yapay zeka tarayıcıları onu ham HTML'de görür. Yazılar için Article (veya BlogPosting), kök layout'ta Organization, derin sayfalar için BreadcrumbList ve e-ticarette Product kullanın. Bir schema oluşturucu size geçerli bir başlangıç bloğu verir; ardından sayfayı Google'ın zengin sonuç testiyle doğrulayın.

Bir Next.js sitesi Core Web Vitals için nasıl yeterince hızlı hale getirilir?

Next.js, zayıf Core Web Vitals değerlerinin yaygın nedenlerini çözen bileşenlerle gelir:

• next/image: görselleri yeniden boyutlandırır, modern biçimler sunar, varsayılan olarak geç yükler ve boyut ister; bu da düzen kaymalarını önler. Ekranın üst kısmındaki ana görseli öncelikli olarak işaretleyin ki geç yüklenmesin (genellikle Largest Contentful Paint öğesidir).
• next/font: yazı tiplerini kendi alan adınızda barındırır ve geç yazı tipi değişiminden doğan kaymayı önler.
• next/script: üçüncü taraf betikleri sayfayı engellemek yerine bir stratejiyle (afterInteractive, lazyOnload) yükler.
• Daha az istemci JavaScript'i: her 'use client' sınırı indirilecek ve hidrasyonu yapılacak kod ekler; bu da mobilde Interaction to Next Paint değerini zorlar.

Yalnızca laboratuvar puanını değil, saha verilerini ölçün: PageSpeed Insights rehberimiz ikisinin nasıl okunacağını gösteriyor.

Sıralama alan bir Next.js blogu nasıl yönetilir?

Bir Next.js blogu genellikle üç biçimden birini alır: depodaki MDX veya Markdown dosyaları (basit ama her yazı bir commit ve dağıtım gerektirir), Server Components içinde sorgulanan bir headless CMS (Sanity, Contentful, Strapi, Payload) ya da harici bir araçtan makale alan bir yayın webhook'u. Üç durumda da SEO kalıbı aynıdır: generateStaticParams, generateMetadata ve ISR içeren dinamik bir app/blog/[slug] rotası, aynı kaynaktan beslenen bir site haritası ve tüm yazılara bağlantı veren bir liste sayfası.

Webhook, yayınlamayı dağıtım döngüsünden ayırır. Bir Route Handler makaleyi alır, kaydeder ve ilgili sayfaları yeniden doğrular:

// app/api/publish/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request) {
  if (request.headers.get('authorization') !== `Bearer ${process.env.PUBLISH_SECRET}`) {
    return new Response('Unauthorized', { status: 401 })
  }
  const article = await request.json()
  await savePost(article)
  revalidatePath('/blog')
  revalidatePath(`/blog/${article.slug}`)
  return Response.json({ ok: true })
}

Next.js SEO, yapay zeka asistanlarında alıntılanmanıza nasıl yardımcı olur?

Sunucuda oluşturma, GEO'nun (üretken motor optimizasyonu) ilk koşuludur. 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; GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot ve PerplexityBot'u saydı ve kendi ağında bir ayda GPTBot'tan 569 milyon, Claude'dan 370 milyon istek kaydetti. Metnini, başlıklarını ve JSON-LD'sini önceden oluşturan bir Next.js sayfası hepsi tarafından okunabilir; istemci tarafında oluşturulan bir sayfa okunamaz.

İ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, düzenli yayımlanan makaleler. Ürünümüz Sorank bu kısmı otomatikleştirir. Sorank, autopilot modunda çalışan bir SEO ve GEO yazılımıdır: anahtar kelimelerinizi bulur ve Blog Makalesi Oluşturucu ayda 20, 60 veya 120 makaleyi kaynaklar, iç bağlantılar ve görsellerle yazar. Bir Next.js sitesine, kurulum sayfasında anlatılan özel webhook ile bağlanır: Route Handler'ınız her makaleyi alır, kaydeder ve blogu yeniden doğrular. Ardından Yapay Zeka Anma Takibi, ChatGPT, Claude ve Gemini'nin markanızı alıntılayıp alıntılamadığını her hafta kontrol eder.

Özetle: bulunmasını istediğiniz her sayfayı önceden oluşturun, meta verileri sunucuda tanımlayın ve site haritasını içerikle aynı kaynaktan besleyin. Araçları Next.js verir; sıralamalar ve yapay zeka alıntıları onlarla ne yayımladığınızdan gelir. Bir Next.js blogunu sürekli makaleyle beslemek için Sorank planlarına göz atın; aylık 49 dolardan başlar ve 3 günlük ücretsiz deneme sunar.