SEO Teknikal untuk Pembangun Next.js: Petua dan Alat

SEO teknikal adalah penting untuk memastikan laman Next.js anda mudah diindeks, pantas, dan berdaya saing dalam keputusan carian. Panduan ini merangkumi strategi, alat, dan potongan kod praktikal untuk membawa SEO anda ke peringkat seterusnya, dengan fokus khas pada laman berbilang bahasa.

1. Tag Meta Dinamik dan Open Graph

Next.js 13+ membolehkan pengurusan tag meta berpusat 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',
    },
  };
}

Petua: Ingat untuk mengemas kini tag meta untuk setiap bahasa dan halaman menggunakan terjemahan dinamik.

2. Peta Laman dan robots.txt Automatik

Untuk menjana peta laman dan robots.txt, gunakan next-sitemap:

npm install next-sitemap

Konfigurasi next-sitemap.config.js untuk menyokong 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: Cuba next-seo untuk pengurusan tag meta dan data berstruktur lanjutan.

3. Pengantarabangsaan (i18n) dan SEO Berbilang Bahasa

Next.js menyokong laluan setempat. Ingat untuk:

• Gunakan tag hreflang untuk setiap bahasa.
• Jana peta laman berbilang bahasa.
• Terjemah tag meta.

Contoh tag hreflang:

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

Amalan Terbaik: Sentiasa tawarkan pemilih bahasa yang kelihatan dan kekalkan konsistensi URL.

4. Prestasi dan Core Web Vitals

• Gunakan <Image /> Next.js untuk imej yang dioptimumkan.
• Dayakan pemuatan tertunda.
• Analisis dengan Lighthouse dan Vercel Analytics.
• Kurangkan JavaScript dan CSS yang tidak digunakan.
• Manfaatkan cache dan CDN Vercel.

5. Data Berstruktur (JSON-LD)

Tambah data berstruktur untuk meningkatkan keterlihatan dalam rich snippet:

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

Petua: Sertakan juga data berstruktur untuk serbuk roti, artikel, dan produk jika berkenaan.

6. Pengendalian Ralat dan Halaman 404 Tersuai

Cipta halaman not-found.tsx setempat untuk setiap bahasa. Ini meningkatkan pengalaman pengguna dan SEO.

Petua: Sesuaikan halaman ralat 500 dan pelayan juga.

7. Alat Berguna

• next-sitemap: peta laman dan robots.txt
• next-seo: pengurusan tag meta lanjutan
• Google Search Console: pemantauan SEO
• Ahrefs Webmaster Tools: analisis teknikal
• Screaming Frog: perangkakan lanjutan
• Mermaid: untuk menggambarkan aliran dan seni bina SEO

8. Pemantauan dan Analisis

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

• Gunakan Google Tag Manager untuk pengurusan tag berpusat.
• Pantau log akses dan ralat dengan alat seperti Sentry.

Kesimpulan

SEO teknikal dalam Next.js memerlukan perhatian kepada butiran seperti tag meta, prestasi, pengantarabangsaan, dan data berstruktur. Automasikan di mana mungkin dan pantau keputusan secara berterusan!

Senarai Semak Akhir:

• Tag meta dinamik
• Peta laman berbilang bahasa
• Data berstruktur
• Prestasi dioptimumkan
• Pemantauan aktif