1 
2SEO 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.
3 
4## 1. Meta Tags Dinamis dan Open Graph
5 
6Next.js 13+ memungkinkan manajemen meta tag terpusat 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> **Tips:** Ingat untuk memperbarui meta tags untuk setiap bahasa dan halaman menggunakan terjemahan dinamis.
28 
29## 2. Sitemap Otomatis dan robots.txt
30 
31Untuk menghasilkan sitemaps 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 mendukung 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:** Coba [next-seo](https://github.com/garmeeh/next-seo) untuk manajemen meta tag dan data terstruktur tingkat lanjut.
71 
72## 3. Internasionalisasi (i18n) dan SEO Multibahasa
73 
74Next.js mendukung rute yang dilokalkan. Ingat untuk:
75 
76- Menggunakan tag `hreflang` untuk setiap bahasa.
77- Menghasilkan sitemap multibahasa.
78- Menerjemahkan meta tags.
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> **Praktik Terbaik:** Selalu sediakan pemilih bahasa yang terlihat dan pertahankan konsistensi URL.
88 
89## 4. Performa dan Core Web Vitals
90 
91- Gunakan `<Image />` Next.js untuk gambar yang dioptimalkan.
92- Aktifkan lazy loading.
93- Analisis dengan [Lighthouse](https://developers.google.com/web/tools/lighthouse) dan [Vercel Analytics](https://vercel.com/analytics).
94- Minimalkan JavaScript dan CSS yang tidak digunakan.
95- Manfaatkan cache dan CDN Vercel.
96 
97## 5. Data Terstruktur (JSON-LD)
98 
99Tambahkan data terstruktur untuk meningkatkan visibilitas di rich snippets:
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: 'Technical SEO for Next.js Developers',
109      datePublished: '2025-07-28',
110      author: { '@type': 'Person', name: 'Filippo Spinella' },
111      inLanguage: 'en',
112    }),
113  }}
114/>
115```
116 
117> **Tips:** Sertakan juga data terstruktur untuk breadcrumbs, artikel, dan produk jika berlaku.
118 
119## 6. Penanganan Error dan Halaman 404 Kustom
120 
121Buat halaman `not-found.tsx` yang dilokalkan untuk setiap bahasa. Ini meningkatkan pengalaman pengguna dan SEO.
122 
123> **Tips:** Kustomisasi juga halaman error 500 dan server.
124 
125## 7. Alat yang Berguna
126 
127- **next-sitemap**: sitemaps dan robots.txt
128- **next-seo**: manajemen meta tag tingkat lanjut
129- **Google Search Console**: pemantauan SEO
130- **Ahrefs Webmaster Tools**: analisis teknis
131- **Screaming Frog**: crawling tingkat lanjut
132- **Mermaid**: untuk memvisualisasikan alur dan arsitektur 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 manajemen tag terpusat.
139- Pantau log akses dan error dengan alat seperti Sentry.
140 
141 
142## Kesimpulan
143 
144SEO teknis di Next.js membutuhkan perhatian terhadap detail seperti meta tags, performa, internasionalisasi, dan data terstruktur. Otomatisasi sebisa mungkin dan pantau hasil secara konstan!
145 
146> **Checklist Akhir:**
147>
148> - [x] Meta tags dinamis
149> - [x] Sitemap multibahasa
150> - [x] Data terstruktur
151> - [x] Performa teroptimasi
152> - [x] Pemantauan aktif
153