Loading...
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.
<head> HTML yang membantu mesin pencari memahami isi halamanmu. Misalnya judul, deskripsi, dan keywords.Sejak Next.js 13+, kamu bisa pakai metadata API di dalam file page.tsx atau layout.tsx.
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.
Kamu juga bisa langsung tambahin konfigurasi Open Graph di metadata.
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.
<Image /> untuk mempercepat loading gambar.next-sitemap.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.