Next.js Geliştiricileri için Teknik SEO: İpuçları ve Araçlar

Teknik SEO, Next.js sitenizin kolayca indekslenebilir, hızlı ve arama sonuçlarında rekabetçi olmasını sağlamak için gereklidir. Bu rehber, SEO'nuzu bir üst seviyeye taşımak için stratejiler, araçlar ve pratik kod parçacıkları sunmaktadır, özellikle çok dilli sitelere odaklanarak.

1. Dinamik Meta Tags ve Open Graph

Next.js 13+, generateMetadata fonksiyonunu kullanarak merkezi meta tag yönetimi sağlar:

export async function generateMetadata({ params }) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'common' });
  return {
    title: t('title'),
    description: t('description'),
    openGraph: {
      title: t('title'),
      description: t('description'),
      images: ['/public/placeholder.svg'],
    },
    icons: {
      icon: '/favicon.ico',
    },
  };
}

İpucu: Dinamik çeviriler kullanarak her dil ve sayfa için meta tags'ı güncellemeyi unutmayın.

2. Otomatik Sitemap ve robots.txt

Sitemaps ve robots.txt oluşturmak için next-sitemap kullanın:

npm install next-sitemap

Dilleri desteklemek için next-sitemap.config.js'yi yapılandırın:

module.exports = {
  siteUrl: 'https://spinny.dev',
  generateRobotsTxt: true,
  i18n: {
    locales: [
      'it',
      'en',
      'fr',
      'de',
      'es',
      'ar',
      'hi',
      'ja',
      'zh',
      'pt',
      'bn',
      'ru',
      'id',
      'ur',
      'ko',
      'tr',
      'vi',
      'th',
      'pl',
    ],
    defaultLocale: 'it',
  },
};

Ekstra Araç: Gelişmiş meta tag ve yapılandırılmış veri yönetimi için next-seo deneyin.

3. Uluslararasılaştırma (i18n) ve Çok Dilli SEO

Next.js yerelleştirilmiş rotaları destekler. Şunları unutmayın:

• Her dil için hreflang etiketini kullanın.
• Çok dilli sitemap'ler oluşturun.
• Meta tags'ı çevirin.

hreflang etiketi örneği:

<link rel="alternate" href="https://spinny.dev/it" hreflang="it" />
<link rel="alternate" href="https://spinny.dev/en" hreflang="en" />

En İyi Uygulama: Her zaman görünür bir dil seçici sunun ve URL tutarlılığını koruyun.

4. Performans ve Core Web Vitals

• Optimize edilmiş görseller için Next.js <Image /> kullanın.
• Lazy loading'i etkinleştirin.
• Lighthouse ve Vercel Analytics ile analiz edin.
• Kullanılmayan JavaScript ve CSS'yi minimize edin.
• Vercel'in önbelleğini ve CDN'ini kullanın.

5. Yapılandırılmış Veri (JSON-LD)

Rich snippet'lerdeki görünürlüğü artırmak için yapılandırılmış veri ekleyin:

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'BlogPosting',
      headline: 'Technical SEO for Next.js Developers',
      datePublished: '2025-07-28',
      author: { '@type': 'Person', name: 'Filippo Spinella' },
      inLanguage: 'en',
    }),
  }}
/>

İpucu: Uygulanabilir olduğunda breadcrumb'lar, makaleler ve ürünler için de yapılandırılmış veri ekleyin.

6. Hata Yönetimi ve Özel 404 Sayfaları

Her dil için yerelleştirilmiş bir not-found.tsx sayfası oluşturun. Bu, kullanıcı deneyimini ve SEO'yu iyileştirir.

İpucu: 500 ve sunucu hata sayfalarını da özelleştirin.

7. Faydalı Araçlar

• next-sitemap: sitemaps ve robots.txt
• next-seo: gelişmiş meta tag yönetimi
• Google Search Console: SEO izleme
• Ahrefs Webmaster Tools: teknik analiz
• Screaming Frog: gelişmiş crawling
• Mermaid: SEO akışlarını ve mimarilerini görselleştirmek için

8. İzleme ve Analiz

Google Analytics, Vercel Analytics'i entegre edin ve Core Web Vitals'ı izleyin.

• Merkezi etiket yönetimi için Google Tag Manager kullanın.
• Sentry gibi araçlarla erişim günlüklerini ve hataları izleyin.

Sonuç

Next.js'te teknik SEO, meta tags, performans, uluslararasılaştırma ve yapılandırılmış veri gibi ayrıntılara dikkat gerektirir. Mümkün olduğunda otomatikleştirin ve sonuçları sürekli izleyin!

Son Kontrol Listesi:

• [x] Dinamik meta tags
• [x] Çok dilli sitemap
• [x] Yapılandırılmış veri
• [x] Optimize edilmiş performans
• [x] Aktif izleme