Metadata & SEO — CompileDaily Study

Penjelasan

Next.js punya sistem Metadata API bawaan untuk SEO — meng-export objek metadata (statis) atau fungsi generateMetadata() (dinamis, mis. judul beda per produk) dari file page.js/layout.js, otomatis dirender jadi tag <title> dan <meta> yang benar di <head>.

Contoh Konsep

// app/tentang/page.js — metadata statis
export const metadata = {
    title: 'Tentang Kami — CompileDaily',
    description: 'Belajar coding gratis berbahasa Indonesia.',
};

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

// app/produk/[id]/page.js — metadata dinamis
export async function generateMetadata({ params }) {
    return {
        title: `Produk ${params.id} — CompileDaily`,
    };
}

Praktikum

Buat app/kontak/page.js dengan export metadata statis berisi title "Kontak — CompileDaily" dan description bebas. Buat juga contoh generateMetadata() dinamis untuk app/artikel/[slug]/page.js yang title-nya menyertakan params.slug.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

metadata (objek statis) dan generateMetadata() (fungsi dinamis) TIDAK BOLEH ditulis BERSAMAAN di file yang sama — pilih salah satu sesuai kebutuhan: statis kalau nilainya selalu sama, dinamis kalau nilainya bergantung pada params/data lain.