Kalau kamu sedang ingin membangun website modern untuk keperluan bisnis online, Next JS 15 adalah salah satu pilihan paling make sense di zaman sekarang. Kenapa? Karena framework ini dirancang bukan cuma untuk kemudahan pengembangan, tapi juga untuk performa dan visibilitas website kamu di mesin pencari seperti Google.
Di era digital seperti sekarang, punya website aja gak cukup. Website kamu harus bisa ditemukan dengan mudah oleh calon pelanggan, apalagi kalau kamu jualan lewat landing page atau punya katalog produk online. Nah, di sinilah peran SEO (Search Engine Optimization) jadi sangat penting.
Banyak bisnis gagal bersaing karena mereka fokus ke tampilan, tapi lupa optimasi struktur dan performa teknis yang disukai mesin pencari. Untungnya, Next JS datang membawa solusi lengkap: selain powerful buat developer, dia juga paunya fitur bawaan yang siap bantu kamu bersaing secara organik di Google.
Tanpa perlu terlalu banyak konfigurasi ribet seperti zaman pakai framework lama, di Next JS semuanya sudah disiapkan: mulai dari struktur folder yang SEO-friendly, rendering strategi yang bisa disesuaikan, sampai dukungan built-in untuk metadata dan optimalisasi gambar. Semua ini bikin website kamu bisa lebih cepat di-load dan lebih mudah dipahami oleh crawler-nya Google.
Next JS Punya Fitur-Fitur yang Memperkuat SEO Website Bisnis
Salah satu hal keren dari Next JS adalah dia ngerti banget kebutuhan pebisnis online. Framework ini bukan cuma mikirin gimana developer bisa kerja cepat, tapi juga mikirin hasil akhirnya: website yang cepat, stabil, dan SEO-friendly.
Misalnya, Next JS bisa membantu kita menerapkan teknik rendering yang sesuai dengan halaman yang kita buat. Untuk halaman produk atau landing page, kita bisa pakai static rendering supaya kecepatan maksimal dan bisa di-crawl dengan baik. Untuk halaman yang sering berubah datanya, kita bisa pakai server rendering atau ISR (Incremental Static Regeneration) supaya tetap optimal di mata mesin pencari.
Selain itu, Next JS juga punya sistem penulisan metadata yang rapi. Kamu bisa atur title, description, dan tag lain secara fleksibel di setiap halaman. Ini penting banget buat SEO, karena search engine butuh informasi ini buat menampilkan konten kamu dengan baik di hasil pencarian.
Dan masih banyak lagi fitur menarik lainnya yang akan kita pelajari bersama di artikel ini: mulai dari penggunaan image yang otomatis teroptimasi, struktur URL yang bersih, sampai integrasi dengan berbagai alat analitik.
Kalau kamu serius ingin websitemu tampil di halaman pertama Google dan membantu bisnis makin dikenal orang, maka pelajari SEO lewat Next JS ini bisa jadi keputusan penting yang membuka banyak peluang baru. Yuk kita lanjut kae bagian berikutnya dan bahas satu per satu fitur yang bisa kamu manfaatkan.
Tata Cara Menggunakan generateMetadata() untuk SEO pada Proyek Next JS
Di Next JS 15 dengan App Router, pengaturan SEO seperti title dan description halaman sekarang jadi lebih rapi dan terstruktur. Semua itu bisa dilakukan dengan menggunakan fungsi generateMetadata() yang disediakan khusus untuk digunakan di setiap file page.
Fungsi ini memungkinkan kita untuk mengatur metadata secara dinamis atau statis, tergantung dari jenis halaman dan kebutuhannya. Hal ini sangat berguna saat kita ingin mengoptimalkan SEO berdasarkan konten yang muncul di halaman tersebut, seperti judul artikel, nama produk, atau informasi kota tertentu.
Berikut adalah contoh penggunaan generateMetadata() secara lengkap di halaman detail kota:
// app/city/[slug]/page.tsx
import { Metadata } from 'next'
import { cities } from '@/data/cities.mock'
type Props = {
params: { slug: string }
}
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const city = cities.find((item) => item.slug === params.slug)
if (!city) {
return {
title: 'City Not Found – Angga Office',
description: 'Sorry, the city you are looking for does not exist.',
}
}
return {
title: `${city.name} Office Spaces – Angga Office`,
description: `Explore premium office space and coworking in ${city.name}. Book your space today and grow your business with Angga Office.`,
openGraph: {
title: `${city.name} Office Spaces – Angga Office`,
description: `Explore premium office space and coworking in ${city.name}.`,
images: [
{
url: city.thumbnail,
width: 1200,
height: 630,
alt: `${city.name} Office`,
},
],
},
}
}
export default function CityDetailPage({ params }: Props) {
const city = cities.find((item) => item.slug === params.slug)
if (!city) {
return <div className="text-center py-20">City not found</div>
}
return (
<div className="max-w-4xl mx-auto py-10">
<h1 className="text-3xl font-bold mb-4">{city.name}</h1>
<img src={city.thumbnail} alt={city.name} className="rounded-xl" />
<p className="mt-4 text-gray-600">
Discover the best office spaces available in {city.name}. Choose your ideal location and get started today.
</p>
</div>
)
}
Penjelasan singkatnya begini: kita memanfaatkan generateMetadata() untuk mengambil data berdasarkan params.slug, lalu mengembalikan objek metadata seperti title, description, dan openGraph. Dengan begini, setiap halaman kota punya metadata yang unik dan sesuai isi kontennya, yang tentunya sangat bagus untuk SEO.
Oh ya, kalau kamu pakai Next Image dan punya thumbnail yang tajam dan cepat dimuat, itu juga bantu banget memperkuat nilai SEO dan user expeerience.
Fitur ini bisa kamu terapkan di berbagai jenis halaman dinamis lain, seperti halaman produk, artikel blog, atau detail kursus. Jadi metadata kamu selalu relevan dan mendukung ranking pencarian organik.
Tata Cara Menggunakan Open Graph (OG) untuk SEO pada Proyek Next JS
Open Graph (OG) adalah standar metadata yang digunakan oleh media sosial seperti Facebook dan LinkedIn untuk menampilkan preview yang menarik saat halaman website kamu dibagikan. Nah, di Next JS 15 dengan App Router, kita bisa menyisipkan data OG ini langsung dari fungsi generateMetadata().
Cara penggunaannya hampir sama seperti metadata biasa, kita cukup tambahkan properti openGraph dalam return dari generateMetadata(). Biasanya OG berisi informasi seperti title, description, url, dan images.
Berikut adalah contoh implementasi openGraph untuk halaman detail sebuah produk atau kota:
// app/city/[slug]/page.tsx
import { Metadata } from 'next'
import { cities } from '@/data/cities.mock'
type Props = {
params: { slug: string }
}
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const city = cities.find((item) => item.slug === params.slug)
if (!city) {
return {
title: 'City Not Found – Angga Office',
description: 'The city you are looking for does not exist.',
}
}
return {
title: `${city.name} Office Spaces – Angga Office`,
description: `Explore premium office spaces in ${city.name}. Boost your team's productivity today.`,
openGraph: {
title: `${city.name} Office Spaces – Angga Office`,
description: `Explore premium office spaces in ${city.name}. Book your location today.`,
url: `https://yourdomain.com/city/${city.slug}`,
siteName: 'Angga Office',
images: [
{
url: city.thumbnail,
width: 1200,
height: 630,
alt: `${city.name} Office Thumbnail`,
},
],
locale: 'en_US',
type: 'website',
},
}
}
Dengan cara ini, saat pengguna share halaman tersebut di media sosial, akan muncul preview lengkap dengan gambar, judul, dan deskripsi yang sesuai — tidak cuma tampil teks acak dari halaman kamu.
Ini sangat membantu meningkatkan engagemeent dari media sosial ke website kamu.
Tata Cara Menambahkan Twitter Card Support untuk SEO pada Proyek Next JS
Selain Open Graph, Twitter punya format sendiri untuk menampilkan preview saat link dibagikan, yaitu Twitter Card. Untungnya, Next JS juga mendukkung hal ini lewat properti twitter dalam fungsi generateMetadata().
Kamu bisa mengatur jenis kartu, gambar, dan keterangan yang akan muncul saat link halaman dibagikan di Twitter.
Berikut contoh implementasinya:
// app/city/[slug]/page.tsx
import { Metadata } from 'next'
import { cities } from '@/data/cities.mock'
type Props = {
params: { slug: string }
}
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const city = cities.find((item) => item.slug === params.slug)
if (!city) {
return {
title: 'City Not Found – Angga Office',
description: 'Sorry, city data is not available.',
}
}
return {
title: `${city.name} Office Spaces – Angga Office`,
description: `Get access to professional office spaces in ${city.name} with top-class facilities.`,
twitter: {
card: 'summary_large_image',
title: `${city.name} Office Spaces – Angga Office`,
description: `Get access to premium coworking and office rentals in ${city.name}.`,
site: '@AnggaOffice',
creator: '@AnggaOfficial',
images: [city.thumbnail],
},
}
}
Dengan menambahkan dukungan Twitter Card, kamu memberikan kesan profesional dan siap bersaing di dunia digital. Ketika pengguna membagikan halaman kamu di Twitter, akan muncul gambar besar, judul, dan deskripsi yang kamu atur — bukan sekadar link polos.
Dua kombinasi antara Open Graph dan Twitter Card ini merupakan strategi yang sangat kuat untuk meningkatkan klik dan daya tarik website kamu dari social media, yang tentunya sangat berpengaruh terhadap SEO dan traffic jangka panjang.
Tata Cara Mengatur Sitemap dan robots.txt untuk SEO pada Proyek Next JS
Supaya website kamu lebih cepat dikenali dan diindeks oleh Google maupun mesin pencari lainnya, kamu perlu menyiapkan dua hal penating: sitemap.xml dan robots.txt. Keduanya bekerja sama membantu crawler mesin pencari menavigasi struktur website kamu dengan benar dan efisien.
Di Next JS, khususnya versi terbaru dengan App Router, kamu bisa menggunakan fitur bawaan untuk membuat file-file ini secara dinamis lewat app/ directory.
Untuk membuat sitemap, kamu bisa membuat file sitemap.xml/route.ts di dalam folder app/. Ini akan menghasilkan endpoint /sitemap.xml secara otomatis. Kamu bisa buat list URL dari data statis atau dinamis, lalu tampilkan sebagai XML.
Berikut contoh pengaturannya:
// app/sitemap.xml/route.ts
import { cities } from '@/data/cities.mock'
export async function GET() {
const baseUrl = '<https://buildwithangga.com>'
const staticPages = ['', '/about', '/contact'].map((path) => {
return `<url><loc>${baseUrl}${path}</loc></url>`
})
const dynamicCityPages = cities.map((city) => {
return `<url><loc>${baseUrl}/city/${city.slug}</loc></url>`
})
const xml = `
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>">
${staticPages.join('')}
${dynamicCityPages.join('')}
</urlset>
`.trim()
return new Response(xml, {
headers: {
'Content-Type': 'application/xml',
},
})
}
Dengan file ini, saat kamu buka https://yourdomain.com/sitemap.xml, akan muncul semua URL penting dalam format yang bisa dipahami Googlebot.
Selanjutnya untuk robots.txt, kamu bisa buat file robots.txt/route.ts agar otomatis tersedia di URL /robots.txt. File ini memberi tahu crawler halaman mana yang boleh atau tidak boleh diakses.
Berikut contohnya:
// app/robots.txt/route.ts
export async function GET() {
const content = `
User-agent: *
Allow: /
Sitemap: <https://yourdomain.com/sitemap.xml>
`.trim()
return new Response(content, {
headers: {
'Content-Type': 'text/plain',
},
})
}
Di sini, User-agent: * artinya aturaen ini berlaku untuk semua bot. Allow: / berarti semua halaman diizinkan untuk di-crawl. Baris terakhir menunjukkan lokasi sitemap agar bot bisa mengaksesnya dengan mudah.
Kombinasi sitemap.xml dan robots.txt ini sangat penting untuk SEO teknikal. Google akan lebih cepat memahami halaman apa saja yang penting di website kamu, dan menghindari halaman yang tidak perlu, sehingga meningkatkan performa indexing dan ranking halamanmu di hasil pencarian.
10 Kesalahan yang Dapat Merusak SEO pada Proyek Next JS
Meskipun Next JS punya fitur-fitur bawaan yang sangat mendukung SEO, tetap ada banyak kesalahan umum yang bisa bikin ranking website kamu jeblok di hasil pencarian. Di bawah ini adalah daftar kesalahan penting yang perlu kamu hindari, lengkap dengan contoh kasus nyata dalam proyek Next JS.
Tidak Mengatur Metadata Secara Dinamis di Halaman Dinamis
Banyak developer hanya fokus mengatur metadata di homepage atau halaman statis saja. Padahal, halaman dinamis seperti detail produk atau artikel juga butuh metadata yang unik agar bisa tampil optimal di hasil pencarian.
// SALAH: Metadata tidak disesuaikan dengan data konten
export const metadata = {
title: 'Produk - My Store Angga',
description: 'Detail produk di toko kami.',
}
// BENAR: Gunakan generateMetadata untuk metadata yang dinamis
export async function generateMetadata({ params }) {
const product = await getProduct(params.slug)
return {
title: `${product.name} - My Store`,
description: product.description,
}
}
Tidak Menggunakan Semantic HTML seperti , , , dan
Penggunaan tag HTML biasa seperti <div> tanpa struktur yang jelas bisa menyulitkan mesin pencari memahami hierarki konten halaman kamu.
// SALAH
return (
<div>
<div>Ini judul</div>
<div>Konten utama</div>
</div>
)
// BENAR
return (
<main>
<header>
<h1>Ini judul</h1>
</header>
<article>
<p>Konten utama</p>
</article>
</main>
)
Mengabaikan Alt Text pada Gambar
Gambar tanpa alt membuat aksesibilitas berkurang dan SEO jadi turun karena mesin pencari tidak bisa memahami isi gambar.
// SALAH
<Image src="/product.jpg" width={500} height={300} />
// BENAR
<Image src="/product.jpg" alt="Gambar produk A" width={500} height={300} />
Tidak Mengatur Robots.txt dan Sitemap.xml
Tanpa dua file ini, crawler Google bisa kesulitan menjelajahi halaman penting, atau malah mengindeks halaman yang tidak perlu seperti /admin atau /checkout.
// Sitemap dan robots telah dijelaskan di jawaban sebelumnya
Menggunakan Client Component untuk Halaman Informasi Statis
Client Component butuh JavaScrript untuk render halaman, yang bisa menunda proses indexing oleh mesin pencari.
// SALAH
'use client'
export default function AboutPage() {
return <div>Tentang Kami</div>
}
// BENAR
export default function AboutPage() {
return <div>Tentang Kami</div>
}
Konten Halaman Muncul Terlambat karena Fetching di Client
Kalau data penting seperti deskripsi produk diambil di client, mesin pencari bisa gagal membaca kontennya sebelum rendering selesai.
// SALAH
'use client'
useEffect(() => {
fetch('/api/product').then(setData)
}, [])
// BENAR
export async function generateMetadata() {
const product = await getProduct()
return { title: product.name }
}
Tidak Mengatur Canonical URL
Tanpa canonical tag, halaman dengaan konten yang sama bisa dianggap sebagai duplicate content dan bikin ranking turun.
// Contoh metadata dengan canonical
export async function generateMetadata({ params }) {
return {
title: 'Detail Produk',
alternates: {
canonical: `https://yourdomain.com/product/${params.slug}`,
},
}
}
Menggunakan Gambar dari Sumber Eksternal Tanpa Konfigurasi
Kalau kamu pakai <Image> dari Next untuk gambar eksternal tanpa izin domain di next.config.js, gambar tidak akan muncul dan SEO jadi buruk.
// next.config.js
images: {
domains: ['external-image.com'],
}
Struktur URL Tidak Konsisten dan Tidak Ramah Mesin Pencari
Gunakan URL yang bersih dan deskriptif. Hindari penggunaan query string acak atau angka ID saja.
// SALAH: /product?id=12345
// BENAR: /product/tas-kulit-original
Tidak Menambahkan Social Sharing Metadata (OG & Twitter Card)
Kalau metadata OG dan Twitter Card tidak tersedia, halaman kamu terlihat membosankan saat dibagikan di media sosial, dan itu bisa menurunkan CTR (click-through rate).
export async function generateMetadata() {
return {
title: 'Kelas BWA Terbaik',
openGraph: {
title: 'Produk Terbaik',
description: 'Dapatkan produk terbaik di toko kami.',
images: ['/product.jpg'],
},
twitter: {
card: 'summary_large_image',
title: 'Produk Terbaik',
images: ['/product.jpg'],
},
}
}
Dengan menghindari 10 kesalahan ini, kamu bisa memaksimalkan potensi SEO dari website Next JS kamu. Mesin pencari akan lebih mudah memahami, merayapi, dan menampilkan konten kamu di hasil pencarian yang tepat.
Penutup dan Saran untuk Web Developer Pemula Hingga Expert
Belajar Next JS untuk SEO memang bukan hal yang instan, tapi percayalah — ini investasi jangka panjang yang akan sangat menguntungkan. Dengan menguasai praktik-praktik SEO seperti metadata, Open Graph, Twitter Card, sitemap, robots.txt, hingga struktur konten yang ramah crawler, kamu tidak hanya menjadi developer yang bisa bikin website, tapi developer yang ngerti strategi bisnis digital.
Untuk kamu yang masih pemula atau sudah menengah tapi ingin naik level jadi web developer expert, saran terbaiknya: belajarlah langsung dari mentor yang sudah berpengalaman dan pernah menjalankan proyek nyata. Di BuildWithAngga, kamu bisa belajar bareng mentor expert yang akan bimbing kamu step-by-step, bukan cuma teori tapi langsung praktik di proyek profesional.
Beberapa benefit unggulan yang kamu bisa dapatkan:
- Belajar dari studi kasus nyata, bukan hanya dari dokumentasi
- Kelas berkualitas tinggi dengan sistem pembelajaran fleksibel
- Akses seumur hidup ke materi dan update terbaru
- Komunitas aktif untuk diskusi dan portfolio review
- Sertifikat yang bisa menunjang karir profesional dan freelance
Dan yang paling penting: semua ini didesain untuk mempersiapkan kamu bekerja secara remote. Artinya kamu bisa kerja dari mana aja, gabung di perusahaan internasional, atau jadi freelancer yang dibayar mahal — asalkan kamu punya skill dan mindset yang benar.
Yuk mulai upgrade dirimu hari ini. Jangan cuma jadi web developer biasa. Jadi developer yang dicari karena bisa bangun website yang cepat, scalable, dan siap masuk halaman satu Google. Belajar bareng mentor expert di BuildWithAngga sekarang dan siapkan diri kamu buat karir digital yang sukses. 🚀
.jpg)
