1~
2SEO 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.
3~
4## 1. Tag Meta Dinamik dan Open Graph
5~
6Next.js 13+ membolehkan pengurusan tag meta berpusat menggunakan fungsi `generateMetadata`:
7~
8```tsx
9export async function generateMetadata({ params }) {
10  const { locale } = await params;
11  const t = await getTranslations({ locale, namespace: 'common' });
12  return {
13    title: t('title'),
14    description: t('description'),
15    openGraph: {
16      title: t('title'),
17      description: t('description'),
18      images: ['/public/placeholder.svg'],
19    },
20    icons: {
21      icon: '/favicon.ico',
22    },
23  };
24}
25```
26~
27> **Petua:** Ingat untuk mengemas kini tag meta untuk setiap bahasa dan halaman menggunakan terjemahan dinamik.
28~
29## 2. Peta Laman dan robots.txt Automatik
30~
31Untuk menjana peta laman dan robots.txt, gunakan [next-sitemap](https://www.npmjs.com/package/next-sitemap):
32~
33```bash
34npm install next-sitemap
35```
36~
37Konfigurasi `next-sitemap.config.js` untuk menyokong bahasa:
38~
39```js
40module.exports = {
41  siteUrl: 'https://spinny.dev',
42  generateRobotsTxt: true,
43  i18n: {
44    locales: [
45      'it',
46      'en',
47      'fr',
48      'de',
49      'es',
50      'ar',
51      'hi',
52      'ja',
53      'zh',
54      'pt',
55      'bn',
56      'ru',
57      'id',
58      'ur',
59      'ko',
60      'tr',
61      'vi',
62      'th',
63      'pl',
64    ],
65    defaultLocale: 'it',
66  },
67};
68```
69~
70> **Alat Tambahan:** Cuba [next-seo](https://github.com/garmeeh/next-seo) untuk pengurusan tag meta dan data berstruktur lanjutan.
71~
72## 3. Pengantarabangsaan (i18n) dan SEO Berbilang Bahasa
73~
74Next.js menyokong laluan setempat. Ingat untuk:
75~
76- Gunakan tag `hreflang` untuk setiap bahasa.
77- Jana peta laman berbilang bahasa.
78- Terjemah tag meta.
79~
80Contoh tag `hreflang`:
81~
82```tsx
83<link rel="alternate" href="https://spinny.dev/it" hreflang="it" />
84<link rel="alternate" href="https://spinny.dev/en" hreflang="en" />
85```
86~
87> **Amalan Terbaik:** Sentiasa tawarkan pemilih bahasa yang kelihatan dan kekalkan konsistensi URL.
88~
89## 4. Prestasi dan Core Web Vitals
90~
91- Gunakan `<Image />` Next.js untuk imej yang dioptimumkan.
92- Dayakan pemuatan tertunda.
93- Analisis dengan [Lighthouse](https://developers.google.com/web/tools/lighthouse) dan [Vercel Analytics](https://vercel.com/analytics).
94- Kurangkan JavaScript dan CSS yang tidak digunakan.
95- Manfaatkan cache dan CDN Vercel.
96~
97## 5. Data Berstruktur (JSON-LD)
98~
99Tambah data berstruktur untuk meningkatkan keterlihatan dalam rich snippet:
100~
101```tsx
102<script
103  type="application/ld+json"
104  dangerouslySetInnerHTML={{
105    __html: JSON.stringify({
106      '@context': 'https://schema.org',
107      '@type': 'BlogPosting',
108      headline: 'SEO Teknikal untuk Pembangun Next.js',
109      datePublished: '2025-07-28',
110      author: { '@type': 'Person', name: 'Filippo Spinella' },
111      inLanguage: 'ms',
112    }),
113  }}
114/>
115```
116~
117> **Petua:** Sertakan juga data berstruktur untuk serbuk roti, artikel, dan produk jika berkenaan.
118~
119## 6. Pengendalian Ralat dan Halaman 404 Tersuai
120~
121Cipta halaman `not-found.tsx` setempat untuk setiap bahasa. Ini meningkatkan pengalaman pengguna dan SEO.
122~
123> **Petua:** Sesuaikan halaman ralat 500 dan pelayan juga.
124~
125## 7. Alat Berguna
126~
127- **next-sitemap**: peta laman dan robots.txt
128- **next-seo**: pengurusan tag meta lanjutan
129- **Google Search Console**: pemantauan SEO
130- **Ahrefs Webmaster Tools**: analisis teknikal
131- **Screaming Frog**: perangkakan lanjutan
132- **Mermaid**: untuk menggambarkan aliran dan seni bina SEO
133~
134## 8. Pemantauan dan Analisis
135~
136Integrasikan Google Analytics, Vercel Analytics, dan pantau Core Web Vitals.
137~
138- Gunakan [Google Tag Manager](https://tagmanager.google.com/) untuk pengurusan tag berpusat.
139- Pantau log akses dan ralat dengan alat seperti Sentry.
140~
141~
142## Kesimpulan
143~
144SEO 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!
145~
146> **Senarai Semak Akhir:**
147>
148> - [x] Tag meta dinamik
149> - [x] Peta laman berbilang bahasa
150> - [x] Data berstruktur
151> - [x] Prestasi dioptimumkan
152> - [x] Pemantauan aktif
153~