Next.js dikenal cepat dan ramah mesin pencari karena halaman dapat dirender di server sehingga crawler menerima HTML lengkap. Namun SEO tidak datang otomatis hanya karena memakai framework tertentu. Ada sejumlah elemen teknis yang harus dikonfigurasi dengan benar. Artikel ini merangkumnya dalam bahasa yang dapat dipahami pemilik bisnis dan developer.
1. Pilih strategi rendering yang tepat
- Static generation (SSG) untuk halaman yang jarang berubah (profil, layanan): tercepat dan murah.
- Incremental static regeneration (ISR) untuk konten yang berubah berkala (blog, katalog): cepat sekaligus tetap segar.
- Server-side rendering (SSR) untuk halaman yang sangat dinamis atau personal.
Hindari merender konten penting hanya di sisi klien (client-side only), karena crawler bisa melewatkannya.
2. Metadata yang unik per halaman
Setiap halaman membutuhkan judul (50–60 karakter) dan meta description (120–155 karakter) yang unik, serta tag Open Graph untuk tampilan saat dibagikan. Di Next.js, ini diatur lewat Metadata API dan dapat diisi dari CMS sehingga tim konten bisa mengubahnya sendiri.
3. URL bersih dan kanonik
- Pakai slug deskriptif (
/services/enterprise-erp). - Tetapkan tag
canonicaluntuk menghindari konten ganda akibat parameter atau variasi URL. - Alihkan (301) URL lama ke URL baru saat struktur situs berubah.
4. Sitemap dan robots
Hasilkan sitemap.xml otomatis dari data CMS dan sediakan robots.txt yang jelas. Kirim sitemap ke Google Search Console agar halaman baru cepat terindeks.
5. Data terstruktur (schema.org)
Tambahkan JSON-LD untuk Organization, Article, FAQPage, Product, atau BreadcrumbList. Data terstruktur membantu Google memahami konten dan dapat memunculkan tampilan kaya (rich result) di pencarian.
6. Core Web Vitals
Google menilai pengalaman pengguna lewat tiga metrik utama:
| Metrik | Arti | Target |
|---|---|---|
| LCP | Kecepatan elemen terbesar tampil | < 2,5 detik |
| INP | Responsivitas terhadap interaksi | < 200 ms |
| CLS | Stabilitas tata letak | < 0,1 |
Cara memperbaikinya:
- Gunakan komponen
next/imageagar gambar otomatis terkompresi, berukuran responsif, dan dimuat malas. - Muat font dengan
next/fontuntuk menghindari lompatan tampilan. - Kurangi JavaScript pihak ketiga dan tunda skrip non-kritis.
- Pasang CDN dan cache yang tepat di hosting.
7. Struktur konten dan tautan internal
Satu halaman, satu topik utama; gunakan hierarki heading (H1 tunggal, H2, H3) yang logis. Tautkan halaman terkait satu sama lain dengan teks tautan yang deskriptif sehingga crawler memahami hubungan antar-konten.
8. Versi mobile dan aksesibilitas
Indeks Google berbasis mobile. Pastikan teks terbaca, tombol cukup besar, dan semua gambar bermakna memiliki teks alternatif.
Checklist cepat sebelum rilis
- Judul dan deskripsi unik di setiap halaman
- Sitemap dan robots tersedia, terdaftar di Search Console
- Canonical dan redirect benar
- Skor Core Web Vitals hijau di perangkat seluler
- Data terstruktur valid
- HTTPS aktif di seluruh halaman
SEO teknis adalah fondasi; konten berkualitas dan tautan masuk tetap diperlukan untuk bersaing di hasil pencarian. Kami membangun website dengan fondasi ini sejak awal. Pelajari layanan Website Next.js atau minta audit SEO teknis untuk website Anda saat ini.
Tim konten Hostcloud — berbagi pengalaman membangun dan merawat aplikasi bisnis.
