Belajar Next.js - SEO & Content Strategy

#Pendahuluan

Aplikasi terbaik tidak ada artinya jika tidak ditemukan. SEO (Search Engine Optimization) menentukan seberapa mudah mesin pencari menemukan, memahami, dan menampilkan konten kalian — dan Next.js memberi keunggulan besar karena HTML dirender di server.

Episode 17 membahas dasar SEO untuk Next.js, meta tags dan Open Graph dengan structured data, pembuatan sitemap dan konfigurasi robots, serta strategi halaman berbasis konten yang mengutamakan performa.

#SEO Fundamentals untuk Next.js

#Keunggulan HTML Server-Rendered

Karena Next.js mengirim HTML lengkap dari server, mesin pencari langsung membaca konten tanpa mengeksekusi JavaScript. Ini berbeda dengan SPA murni yang sering gagal di-render crawler. Keunggulan ini harus dijaga: hindari menaruh konten penting di komponen yang hanya dirender di klien.

Fondasi SEO juga mencakup struktur judul yang hierarkis, konten berkualitas, internal linking antar halaman, dan kecepatan — faktor yang saling menguatkan.

#Meta Tags, Open Graph, dan Structured Data

#Metadata Statis dan Dinamis

Metadata API dari episode 4 menangani judul, deskripsi, dan Open Graph. Untuk halaman konten, metadata sebaiknya dihasilkan dari data, bukan ditulis tangan:

import type { Metadata } from "next"
 
export async function generateMetadata({ params }): Promise<Metadata> {
  const { slug } = await params
  const article = await getArticle(slug)
 
  return {
    title: article.title,
    description: article.excerpt,
    openGraph: {
      title: article.title,
      description: article.excerpt,
      type: "article",
      images: [article.thumbnail],
    },
  }
}

generateMetadata di atas menghasilkan judul dan Open Graph dari data artikel. Halaman yang dimuat dari Google akan menampilkan judul, deskripsi, dan gambar yang relevan — meningkatkan click-through rate.

#Structured Data dengan JSON-LD

Structured data memakai format JSON-LD agar mesin pencari memahami jenis konten: artikel, produk, resep, FAQ. Ini berpotensi memunculkan rich results:

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify({
      "@context": "https://schema.org",
      "@type": "Article",
      headline: article.title,
      author: { "@type": "Person", name: "Arman Dwi Pangestu" },
    }),
  }}
/>

Skrip JSON-LD di atas memberi tahu Google bahwa halaman ini adalah artikel. Validasi hasilnya memakai Google Rich Results Test sebelum release.

#Sitemap Generation dan Robots Configuration

#sitemap.ts dan robots.ts

App Router mendukung pembuatan sitemap dan robots secara terprogram. File app/sitemap.ts mengekspor daftar URL:

import type { MetadataRoute } from "next"
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: "https://aplikasi-ku.dev",
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 1,
    },
  ]
}

File app/sitemap.ts di atas menghasilkan sitemap di /sitemap.xml. Untuk aplikasi konten, perbarui sitemap dengan semua slug artikel agar crawler menemukan halaman baru dengan cepat. Fungsi sitemap(): MetadataRoute.Sitemap menjaga daftar URL selalu sinkron dengan data.

#Konfigurasi robots.ts

File app/robots.ts mengontrol akses crawler:

import type { MetadataRoute } from "next"
 
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: ["/dashboard", "/admin"],
    },
    sitemap: "https://aplikasi-ku.dev/sitemap.xml",
  }
}

Konfigurasi robots di atas mengizinkan semua crawler kecuali ke /dashboard dan /admin, sekaligus menunjuk lokasi sitemap.

#Content-Driven Pages dan Performance-First SEO

#Halaman Konten yang SEO-Friendly

Halaman konten ideal memiliki: judul unik per halaman, deskripsi yang menggambarkan isi, URL deskriptif, hierarki heading yang rapi, dan internal linking antar artikel terkait. Konten adalah bagian dari strategi, tapi struktur teknis yang mendukungnya sama pentingnya.

#Performa Sebagai Faktor Ranking

SEO yang mengutamakan performa berarti memastikan Core Web Vitals memenuhi target — LCP, INP, dan CLS adalah sinyal ranking resmi Google. Kombinasikan teknik episode 15: gambar dioptimasi, konten dirender di server, dan JavaScript diminimalkan. Halaman yang cepat dan lengkap akan menang di SERP.

#Penutup

Inti yang harus dibawa pulang:

• HTML server-rendered memberi keunggulan SEO dibanding SPA murni.
• generateMetadata menghasilkan tag meta dari data konten.
• Open Graph mengontrol tampilan saat dibagikan ke media sosial.
• JSON-LD memungkinkan rich results dengan structured data.
• sitemap.ts dan robots.ts dikelola secara terprogram.
• Performa Web Vitals adalah sinyal ranking resmi Google.

Di episode 18 selanjutnya kita akan membahas architecture dan patterns — arsitektur aplikasi dan struktur berbasis fitur, desain komponen modular dengan pola atomik, organisasi domain-driven, serta design system dan library komponen UI. Fondasi kode aplikasi kalian akan tersusun rapi untuk skala besar.