SEO Teknis untuk Pengembang Next.js: Tips dan Alat

SEO teknis sangat penting untuk memastikan situs Next.js Anda mudah diindeks, cepat, dan kompetitif di hasil pencarian. Panduan ini mencakup strategi, alat, dan cuplikan kode praktis untuk membawa SEO Anda ke tingkat berikutnya, dengan fokus khusus pada situs multibahasa.

1. Meta Tags Dinamis dan Open Graph

Next.js 13+ memungkinkan manajemen meta tag terpusat menggunakan fungsi generateMetadata:

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',
    },
  };
}

Tips: Ingat untuk memperbarui meta tags untuk setiap bahasa dan halaman menggunakan terjemahan dinamis.

2. Sitemap Otomatis dan robots.txt

Untuk menghasilkan sitemaps dan robots.txt, gunakan next-sitemap:

npm install next-sitemap

Konfigurasi next-sitemap.config.js untuk mendukung bahasa:

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',
  },
};

Alat Tambahan: Coba next-seo untuk manajemen meta tag dan data terstruktur tingkat lanjut.

3. Internasionalisasi (i18n) dan SEO Multibahasa

Next.js mendukung rute yang dilokalkan. Ingat untuk:

• Menggunakan tag hreflang untuk setiap bahasa.
• Menghasilkan sitemap multibahasa.
• Menerjemahkan meta tags.

Contoh tag hreflang:

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

Praktik Terbaik: Selalu sediakan pemilih bahasa yang terlihat dan pertahankan konsistensi URL.

4. Performa dan Core Web Vitals

• Gunakan <Image /> Next.js untuk gambar yang dioptimalkan.
• Aktifkan lazy loading.
• Analisis dengan Lighthouse dan Vercel Analytics.
• Minimalkan JavaScript dan CSS yang tidak digunakan.
• Manfaatkan cache dan CDN Vercel.

5. Data Terstruktur (JSON-LD)

Tambahkan data terstruktur untuk meningkatkan visibilitas di rich snippets:

<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',
    }),
  }}
/>

Tips: Sertakan juga data terstruktur untuk breadcrumbs, artikel, dan produk jika berlaku.

6. Penanganan Error dan Halaman 404 Kustom

Buat halaman not-found.tsx yang dilokalkan untuk setiap bahasa. Ini meningkatkan pengalaman pengguna dan SEO.

Tips: Kustomisasi juga halaman error 500 dan server.

7. Alat yang Berguna

• next-sitemap: sitemaps dan robots.txt
• next-seo: manajemen meta tag tingkat lanjut
• Google Search Console: pemantauan SEO
• Ahrefs Webmaster Tools: analisis teknis
• Screaming Frog: crawling tingkat lanjut
• Mermaid: untuk memvisualisasikan alur dan arsitektur SEO

8. Pemantauan dan Analisis

Integrasikan Google Analytics, Vercel Analytics, dan pantau Core Web Vitals.

• Gunakan Google Tag Manager untuk manajemen tag terpusat.
• Pantau log akses dan error dengan alat seperti Sentry.

Kesimpulan

SEO teknis di Next.js membutuhkan perhatian terhadap detail seperti meta tags, performa, internasionalisasi, dan data terstruktur. Otomatisasi sebisa mungkin dan pantau hasil secara konstan!

Checklist Akhir:

• [x] Meta tags dinamis
• [x] Sitemap multibahasa
• [x] Data terstruktur
• [x] Performa teroptimasi
• [x] Pemantauan aktif