Belajar Next.js App Router #9: Metadata & SEO

• Apa Itu Metadata?
• Metadata di Next.js App Router
• Contoh Metadata Sederhana
• Metadata Global Menggunakan layout.tsx
• Metadata Dinamis dengan generateMetadata
• SEO di App Router
• Kesimpulan

Halo teman-teman semuanya. Pada artikel sebelumnya, kita telah mempelajari cara melakukan data fetching di Server Component pada Next.js App Router. Pada artikel ini, kita akan membahas topik yang sangat penting dalam pengembangan aplikasi web, yaitu metadata dan SEO.

Metadata berperan besar dalam menentukan bagaimana halaman web kita ditampilkan di mesin pencari dan saat dibagikan ke media sosial. Dengan App Router, Next.js menyediakan cara yang lebih rapi dan terstruktur untuk mengelola metadata pada setiap halaman.

Apa Itu Metadata?

Metadata adalah informasi tambahan tentang halaman web yang biasanya tidak terlihat langsung oleh pengguna, tetapi dibaca oleh browser dan mesin pencari. Contoh metadata yang umum digunakan adalah judul halaman (title), deskripsi (meta description), dan informasi Open Graph.

Pengelolaan metadata yang baik akan membantu meningkatkan visibilitas halaman di mesin pencari serta memberikan tampilan yang lebih baik saat halaman dibagikan.

Metadata di Next.js App Router

Pada App Router, metadata dapat didefinisikan langsung di dalam file page.tsx atau layout.tsx. Next.js akan secara otomatis menggabungkan metadata dari layout dan halaman yang sedang diakses. Metadata biasanya didefinisikan menggunakan object metadata.

Contoh Metadata Sederhana

Berikut contoh penggunaan metadata statis pada halaman:

// import metadata
import type { Metadata } from 'next'

export const metadata: Metadata = {
    title: 'Halaman Products',
    description: 'Daftar produk pada aplikasi Next.js App Router',
}

export default function ProductsPage() {
    return (
        <div className="flex flex-col items-center pt-50 justify-center">
            <h1>Halaman Products</h1>
            <p>Ini adalah halaman products.</p>
        </div>
    )
}

Dengan konfigurasi ini, judul dan deskripsi halaman akan berubah sesuai nilai metadata yang kita tentukan.

Metadata Global Menggunakan layout.tsx

Selain metadata per halaman, kita juga bisa mendefinisikan metadata global di file layout.tsx.

Contoh sederhana:

// import metadata
import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'My Blog',
  description: '...',
}
 
export default function RootLayout() {}

Metadata ini akan digunakan sebagai default untuk seluruh halaman, kecuali jika ditimpa oleh metadata di halaman tertentu.

Metadata Dinamis dengan generateMetadata

Untuk halaman yang menggunakan dynamic route, kita bisa membuat metadata secara dinamis menggunakan function generateMetadata.

Contoh penggunaan metadata dinamis:

// import metadata
import type { Metadata } from "next";

// type PageProps
type PageProps = {
  params: Promise<{
    slug: string;
  }>;
};

// generateMetadata
export async function generateMetadata(
  { params }: PageProps
): Promise<Metadata> {
  const { slug } = await params;

  return {
    title: `Detail Produk ${slug}`,
    description: `Halaman detail produk dengan slug ${slug}`,
  };
}

export default async function ProductDetailPage({ params }: PageProps) {

  // get params
  const { slug } = await params;

  return (
    <div className="flex flex-col items-center justify-center pt-50">
      <h1 className="text-2xl font-bold">Detail Product</h1>
      <p>
        Ini adalah halaman:{" "}
        <span className="text-red-500 font-semibold">{slug}</span>
      </p>
    </div>
  );
}

Dengan pendekatan ini, metadata akan menyesuaikan dengan parameter URL yang sedang diakses.

SEO di App Router

Dengan metadata yang dikelola dengan baik, Next.js App Router sudah sangat ramah terhadap SEO. Selain metadata, faktor lain seperti Server Component, rendering di server, dan struktur routing yang rapi juga turut membantu performa SEO aplikasi.

Penggunaan App Router secara tepat memungkinkan mesin pencari membaca konten halaman dengan lebih optimal.

Kesimpulan

Pada artikel ini, kita telah mempelajari cara mengelola metadata dan SEO di Next.js App Router, mulai dari metadata statis, metadata global, hingga metadata dinamis menggunakan generateMetadata. Dengan pengelolaan metadata yang baik, aplikasi Next.js akan lebih optimal untuk mesin pencari dan media sosial.

Pada artikel selanjutnya, kita akan membahas Route Handler (API) pada Next.js App Router sebagai pengganti API Routes pada pendekatan lama.

Terima Kasih