Metadata dan SEO: Judul, Deskripsi, Open Graph

Kenapa penting?

Judul tab browser, deskripsi di hasil Google, dan preview saat link dibagikan ke WhatsApp semuanya berasal dari metadata HTML. Next.js punya Metadata API yang membuat pengaturan ini deklaratif dan per halaman.

Metadata statis

Cara paling sederhana, export objek metadata dari page.tsx atau layout.tsx:

// app/tentang/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Tentang Kami",
  description: "Profil singkat tim dan misi perusahaan kami.",
};

export default function Tentang() {
  return <h1>Tentang Kami</h1>;
}

Template judul

Supaya setiap halaman otomatis punya akhiran nama situs, atur di root layout:

// app/layout.tsx
export const metadata: Metadata = {
  title: {
    default: "TokoKu",
    template: "%s | TokoKu",
  },
};

Halaman dengan title "Tentang Kami" akan tampil sebagai "Tentang Kami | TokoKu" di tab browser.

Metadata dinamis

Untuk halaman dinamis seperti artikel blog, pakai fungsi generateMetadata yang menerima params yang sama dengan halaman:

// app/blog/[slug]/page.tsx
import type { Metadata } from "next";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  return {
    title: "Artikel: " + slug,
    openGraph: {
      title: "Artikel: " + slug,
      images: ["/og-" + slug + ".png"],
    },
  };
}

Open Graph

Tambahkan openGraph agar preview link di WhatsApp, Twitter, dan Discord tampil cantik dengan gambar dan deskripsi. Tanpa ini, link yang dibagikan terlihat polos dan kurang dipercaya orang.

Kesalahan umum pemula

• Export metadata dari Client Component. Ini error. Metadata hanya untuk Server Component; pindahkan ke layout di atasnya.
• Judul duplikat di semua halaman. Setiap halaman penting wajib punya title unik. Judul sama di semua halaman membingungkan Google dan user.
• Lupa Open Graph image. Tanpa gambar OG, link yang dibagikan ke WhatsApp terlihat polos. Siapkan satu gambar OG default untuk seluruh situs.

Latihan singkat

1. Atur title template di root layout, lalu beri setiap halaman title yang berbeda. Cek tab browser.
2. Tambahkan description dan openGraph di satu halaman, lalu bagikan link-nya ke dirimu sendiri via WhatsApp untuk melihat preview-nya.

Rangkuman

• Export objek metadata untuk title dan description tiap halaman.
• Atur title template di root layout agar konsisten (%s | NamaSitus).
• generateMetadata untuk halaman dinamis seperti artikel blog.
• Metadata hanya bisa di Server Component, dan Open Graph penting untuk preview link.

Catatan teknis: Metadata hanya bisa dipakai di Server Component. Kalau halamanmu Client Component, pisahkan metadata ke layout di atasnya atau ke file page.tsx yang tetap server. Export metadata dari file dengan "use client" akan error.