Metadata Dasar & SEO

Analogi: kartu nama tokomu di internet

Bayangkan tokomu punya kartu nama. Di kartu itu tertulis nama toko, alamat singkat, dan satu kalimat tentang apa yang kamu jual. Orang yang belum pernah ke tokomu membaca kartu itu dan langsung paham. Metadata adalah kartu nama untuk setiap halaman websitemu, tapi pembacanya bukan manusia, melainkan Google, bot media sosial, dan tab browser. Mereka tidak "melihat" desain cantikmu, mereka membaca kartu nama ini untuk memutuskan: halaman ini tentang apa, layak diklik atau tidak.

KENAPA metadata ini ada?

Ada tiga momen di mana metadata bekerja, dan ketiganya terjadi SEBELUM user membuka halamanmu:

1. Hasil pencarian Google. Judul biru dan teks abu-abu di bawahnya? Itu title dan description-mu. Halaman tanpa description yang bagus membuat Google mengarang sendiri cuplikannya, dan biasanya hasilnya jelek.
2. Share link di WhatsApp, X, atau Discord. Kotak preview berisi gambar, judul, dan deskripsi itu dirender dari tag Open Graph. Tanpa itu, link-mu tampil sebagai teks polos yang tidak menggugah untuk diklik.
3. Tab browser dan bookmark. Teks di tab browser adalah title-mu. Title generik seperti "Home" membuat usermu kebingungan saat membuka banyak tab sekaligus.

Singkatnya: kamu bisa punya website tercepat dan tercantik sedunia, tapi tanpa metadata, tidak ada yang mengklik untuk masuk. Metadata adalah pintu depan yang tidak terlihat.

Contoh 1: metadata object dasar

Di Next.js App Router, metadata dideklarasikan sebagai object yang di-export dari file page.tsx atau layout.tsx:

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

export const metadata: Metadata = {
  title: "Blog, TokoKu",
  description: "Artikel terbaru seputar teknologi, ditulis dengan bahasa santai.",
  openGraph: {
    title: "Blog, TokoKu",
    description: "Artikel terbaru seputar teknologi.",
    images: ["/og-blog.png"],
  },
  twitter: {
    card: "summary_large_image",
    title: "Blog, TokoKu",
    description: "Artikel terbaru seputar teknologi.",
  },
};

title dan description untuk Google, openGraph untuk preview share universal (WhatsApp, Discord, Facebook), twitter untuk tampilan kartu besar di X. Gambar OG idealnya 1200x630 px, simpan di folder public/.

Contoh 2: title template, tulis sekali pakai berkali-kali

Menulis ", TokoKu" di setiap halaman itu melelahkan dan rawan typo. Atur polanya sekali di root layout:

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

export const metadata: Metadata = {
  title: {
    default: "TokoKu, Jual Gadget Murah",
    template: "%s, TokoKu",
  },
  description: "TokoKu menjual gadget original dengan harga bersahabat.",
};

Sekarang title: "Blog" di halaman mana pun otomatis menjadi "Blog, TokoKu". %s diganti judul halaman, default dipakai halaman yang tidak mendefinisikan title sendiri (biasanya homepage). Satu sumber kebenaran, nol duplikasi.

Kesalahan umum pemula

1. Menaruh metadata di file "use client"

Salah:

// app/blog/page.tsx
"use client"; // metadata di bawah ini DIABAIKAN Next.js!
export const metadata = { title: "Blog" };

Benar: metadata hanya hidup di Server Component. Pisahkan tanggung jawab: page.tsx tetap server (export metadata di sini), interaktivitas pindah ke komponen anak "use client":

// app/blog/page.tsx (tanpa "use client")
import type { Metadata } from "next";

export const metadata: Metadata = { title: "Blog, TokoKu" };

export default function BlogPage() {
  return <BlogInteraktif />; // komponen client terpisah
}

2. Semua halaman title-nya sama

Salah: setiap page menulis title: "TokoKu" sehingga Google melihat 20 halaman kembar dan bingung mana yang relevan untuk kata kunci apa. Benar: pakai template di layout plus title unik per halaman yang mengandung kata kunci halaman tersebut.

3. Description kosong atau copy-paste

Salah: description: "Selamat datang di website kami" di semua halaman. Selain tidak informatif, ini sinyal kemalasan bagi Google. Benar: satu-dua kalimat spesifik per halaman yang menjawab "kenapa user harus mengklik ini dibanding hasil lain?"

4. Lupa gambar Open Graph

Tanpa openGraph.images, link yang di-share tampil polos tanpa gambar, dan rasio klik bisa turun drastis. Selalu sediakan satu gambar OG per halaman penting, dan pastikan file-nya benar-benar ada di public/.

Catatan teknis: Cara memverifikasi: jalankan dev server, buka halaman, klik kanan, View Page Source. Cari <title> dan <meta name="description">. Kalau tidak ada, metadata-mu tidak kepasang, dan penyebab nomor satu adalah file-nya memakai "use client".