Cara Optimasi SEO di Next.js dengan Metadata dan Open Graph
Zelixify
Editor
Kalau kamu bikin website dengan Next.js, jangan lupa untuk mikirin SEO (Search Engine Optimization). Tanpa SEO yang bagus, website kerenmu bisa tenggelam di hasil pencarian Google. Nah, salah satu cara praktis optimasi SEO di Next.js adalah dengan menambahkan metadata dan Open Graph. Artikel ini akan bahas step by step gimana caranya.
Apa Itu Metadata dan Open Graph?
- Metadata: informasi tambahan di dalam tag
<head>HTML yang membantu mesin pencari memahami isi halamanmu. Misalnya judul, deskripsi, dan keywords. - Open Graph: standar dari Facebook (juga dipakai WhatsApp, LinkedIn, dll) untuk menentukan bagaimana halamanmu tampil saat di-share di media sosial. Dengan Open Graph, kamu bisa kontrol judul, gambar, dan deskripsi yang muncul.
Optimasi Metadata di Next.js
Sejak Next.js 13+, kamu bisa pakai metadata API di dalam file page.tsx atau layout.tsx.
Contoh Metadata Dasar
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Belajar SEO di Next.js',
description: 'Tutorial lengkap optimasi SEO di Next.js dengan metadata dan Open Graph.',
keywords: ['Next.js', 'SEO', 'Open Graph'],
}
Metadata ini otomatis akan di-render di tag <head>. Jadi nggak perlu lagi nulis manual.
Menambahkan Open Graph
Kamu juga bisa langsung tambahin konfigurasi Open Graph di metadata.
Contoh Metadata dengan Open Graph
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Optimasi SEO dengan Next.js',
description: 'Panduan lengkap cara optimasi SEO menggunakan metadata dan Open Graph di Next.js.',
openGraph: {
title: 'Optimasi SEO dengan Next.js',
description: 'Panduan lengkap cara optimasi SEO menggunakan metadata dan Open Graph di Next.js.',
url: 'https://example.com/nextjs-seo',
siteName: 'My Next.js Blog',
images: [
{
url: 'https://example.com/images/seo-thumbnail.png',
width: 1200,
height: 630,
},
],
locale: 'id_ID',
type: 'website',
},
}
Dengan konfigurasi ini, saat halaman di-share di WhatsApp atau LinkedIn, akan muncul gambar dan deskripsi yang sesuai.
Tips Tambahan Optimasi SEO di Next.js
- Gunakan Next.js Image Optimization dengan
<Image />untuk mempercepat loading gambar. - Pastikan struktur heading (H1, H2, dst.) jelas dan sesuai konten.
- Tambahkan sitemap.xml menggunakan package seperti
next-sitemap. - Gunakan canonical tag untuk menghindari duplicate content.
Kesimpulan
Optimasi SEO di Next.js itu nggak ribet. Dengan memanfaatkan metadata dan Open Graph, website kamu bisa lebih mudah dikenali oleh mesin pencari dan tampil lebih menarik saat dibagikan di media sosial. Jadi, kalau kamu lagi bikin project baru dengan Next.js, jangan lupa langsung set metadata ini biar website-mu makin powerful.
Bagikan Artikel Ini