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
hreflanguntuk 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