PENGENALAN SEO DI NEXT.JS

SEO (Search Engine Optimization) adalah teknik agar website:

  • mudah dibaca oleh mesin pencari seperti Google,
  • dapat ditemukan,
  • memiliki ranking yang lebih baik.
Dalam Next.js App Router (Next.js 13+), SEO sudah disiapkan secara built-in melalui:
  • Metadata API → untuk meta tags
  • Sitemap API → untuk memberi tahu Google struktur halaman
  • Robots API → untuk menentukan halaman mana yang boleh di-index
Semua fitur ini sangat penting untuk website modern seperti ecommerce, blog, portal berita, atau company profile.

METADATA DI NEXT.JS

Fungsi Metadata

Metadata berfungsi untuk memberikan informasi kepada:

  • Browser (apa judul halaman?)
  • Search Engine (halaman ini berbicara tentang apa?)
  • Social Media (preview ketika dishare)
  • Crawler (struktur konten)
Metadata adalah dasar dari SEO modern.

Penting karena:
  • Meningkatkan click-through-rate (CTR) di Google
  • Menentukan bagaimana website muncul saat dishare
  • Membantu Google memahami isi halaman
  • Menghindari duplikasi konten
Cara Menggunakan Metadata (Static Metadata)
Contoh file: app/page.jsx
export const metadata = {
  title: "Simple Ecommerce",
  description: "Belanja Mudah & Aman di Simple Ecommerce.",
};
Output HTML yang dihasilkan:
<title>Simple Ecommerce</title>
<meta name="description" content="Belanja Mudah & Aman di Simple Ecommerce." />

Dynamic Metadata (mengambil data dari API)
Digunakan untuk halaman dinamis seperti: /products/{id} /blog/{slug}
Contoh:
export async function generateMetadata({ params }) {
  const { productId } = await params;
  const res = await getProductById(productId);
  const product = res.data;

  return {
    title: `${product.name}`,
    description: `Detail produk ${product.name}`,
    openGraph: {
      title: product.name,
      description: `Detail produk ${product.name}`,
      url: `${process.env.NEXT_PUBLIC_APP_URL}/products/${product.id}`,
      images: [product.image],
    },
  };
}
Output HTML:
<title>iPhone 15 Pro</title>
<meta name="description" content="Detail produk iPhone 15 Pro">

<!-- OpenGraph -->
<meta property="og:title" content="iPhone 15 Pro">
<meta property="og:image" content="https://.../iphone.png">
Kapan dipakai?
  • Detail Produk
  • Detail Artikel / Blog
  • Halaman Profil
  • Landing Page Dinamis
Kegunaan Metadata untuk SEO
Fitur Kegunaan
title Memengaruhi ranking Google & hasil pencarian
description Memengaruhi click-through-rate (CTR)
openGraph Membuat preview bagus saat dishare
twitter tags Optimasi share ke Twitter
canonical Menghindari duplikasi konten
metadataBase Membantu pembuatan URL absolut

SITEMAP DI NEXT.JS

Fungsi Sitemap memberi tahu mesin pencari:
  • halaman apa saja yang ada di website,
  • kapan terakhir di-update,
  • seberapa penting halaman itu.
Google menggunakan sitemap untuk: 
  • menambah halaman ke index lebih cepat
  • menemukan halaman baru/dinamis
  • memahami struktur website
Contoh Implementasi Sitemap
File: app/sitemap.js
export default function sitemap() {
  return [
    {
      url: `${process.env.NEXT_PUBLIC_APP_URL}`,
      lastModified: new Date().toISOString(),
    },
  ];
}
Contoh dinamis:
import { getProductList } from "@/services/products.service";

export default async function sitemap() {
  const res = await getProductList({ page: 1, perpage: 9999 });
  const products = res.data;

  return products.map((p) => ({
    url: `${process.env.NEXT_PUBLIC_APP_URL}/products/${p.id}`,
    lastModified: new Date().toISOString(),
  }));
}
Output XML yang dihasilkan
Next.js otomatis menghasilkan XML seperti:
<urlset>
  <url>
    <loc>https://simple-ecommerce.vercel.app/products/1</loc>
    <lastmod>2025-01-01T12:00:00.000Z</lastmod>
  </url>
</urlset>
Kegunaan Sitemap untuk SEO
Manfaat Penjelasan
Crawl Efficiency Google lebih mudah memetakan website
Fast Indexing Halaman baru (produk, artikel) cepat masuk Google
Better Ranking Google mengerti struktur website
Mendukung SEO dinamis Produk berubah → sitemap update otomatis

ROBOTS.TXT DI NEXT.JS

Fungsi Robots.txt

Robots.txt menentukan:

  • halaman mana yang boleh di-index
  • halaman mana yang tidak boleh di-index
Tujuannya:
  • Menghindari index halaman sensitif
  • Mengatur behavior search engine
  • Mengoptimalkan proses crawling
Contoh Implementasi Robots
File app/robots.js:
export default function robots() {
  return {
    rules: [
      {
        userAgent: "*",
        allow: "/",
        disallow: ["/cart", "/dashboard", "/dsc"],
      },
    ],
    sitemap: `${process.env.NEXT_PUBLIC_APP_URL}/sitemap.xml`,
  };
}
Output Robots.txt
Next.js otomatis menghasilkan:
User-agent: *
Allow: /

Disallow: /cart
Disallow: /dashboard
Disallow: /dsc

Sitemap: https://simple-ecommerce.vercel.app/sitemap.xml
Kegunaan Robots.txt
Kegunaan Penjelasan
Mencegah index halaman sensitif Cart, Dashboard, Admin, API
Mengarahkan Google ke sitemap Meningkatkan crawl efficiency
Mengontrol SEO Hanya halaman publik yang di-index

Bagaimana Semuanya Bekerja Bersama? (SEO Flow)

Bagian Tugas Dampak SEO
Metadata Memberi info tentang setiap halaman Ranking + CTR
Sitemap Memberi tahu Google daftar URL Indexing cepat
Robots Mengatur halaman mana yg boleh di-crawl Kontrol & keamanan

Ketiganya adalah fondasi SEO modern untuk framework Next.js.