Next.js, SEO dostu web uygulamaları için mükemmel bir temel sunar. Ancak iyi sıralamalar yalnızca server-side rendering ile gelmez. Metadata, yapılandırılmış veri ve Core Web Vitals; arama motorlarının — ve giderek artan biçimde AI yanıt motorlarının — sayfalarınızı nasıl anlayıp öne çıkardığını birlikte belirler.

Metadata API kullanın

App Router’ın yerleşik bir Metadata API’si vardır. Her sayfa benzersiz ve doğru metadata üretmelidir:

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next';

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `https://example.com/blog/${params.slug}` },
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      images: [post.coverImage],
    },
  };
}

Sayfa başına canonical URL, yinelenen içerik seyrelmesini önler; sayfaya özel Open Graph verisi ise paylaşıldığında linkin nasıl görüneceğini kontrol eder.

Yapılandırılmış veri (JSON-LD) ekleyin

Yapılandırılmış veri, arama motorlarının içeriğinizi varlıklara (makale, organizasyon, breadcrumb) ayırmasına yardımcı olur. JSON-LD olarak ekleyin:

export default function Page({ post }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    datePublished: post.date,
    author: { '@type': 'Organization', name: 'Şirketiniz' },
  };
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
  );
}

AI yanıt motorları da içeriği doğru biçimde atfedip alıntılamak için buna dayanır.

Core Web Vitals’ı optimize edin

Core Web Vitals hem bir sıralama sinyali hem de gerçek bir kullanıcı deneyimi sinyalidir. Next.js’te en yüksek getirili hamleler:

  • Otomatik boyutlandırma, lazy loading ve modern formatlar için next/image kullanın.
  • Web fontlarından kaynaklı layout shift’i önlemek için next/font kullanın.
  • İstemci JavaScript’ini küçük tutun — etkileşimsiz arayüz için Server Components’i tercih edin.
import Image from 'next/image';

<Image src="/hero.jpg" alt="Ürün" width={1200} height={630} priority />

Sonuç

Next.js’te SEO üç alışkanlığa indirgenir: her route’ta canonical içeren benzersiz metadata, makinelerin içeriğinizi anlaması için yapılandırılmış veri ve disiplinli performans. Bunları doğru yaparsanız; hem arama hem AI motorları tarafından hızlı, keşfedilebilir ve alıntılanabilir sayfalar elde edersiniz.