Bab 5: Optimasi SEO - Agar Blogmu Ditemukan Google

Kita sudah punya blog yang fungsional, cepat, dan indah. Tapi, apa gunanya jika tidak ada yang membacanya? Di bab ini, kita akan fokus pada SEO (Search Engine Optimization), yaitu seni membuat website kita mudah ditemukan dan dipahami oleh mesin pencari seperti Google.

Dengan SEO yang baik, saat seseorang mencari topik yang kamu tulis, ada kemungkinan artikelmu muncul di halaman pertama hasil pencarian. Ini adalah cara paling efektif untuk mendapatkan pengunjung secara organik.

1. Apa Itu SEO & Kenapa Ini Krusial?

Bayangkan Google adalah seorang pustakawan super pintar yang mencoba mengkatalogkan setiap buku (halaman web) di internet. Tugas kita sebagai developer adalah memberikan "label" yang jelas dan akurat pada setiap halaman kita.

Dua "label" terpenting adalah:

• <title>: Judul halaman yang muncul di tab browser dan sebagai judul utama di hasil pencarian Google.
• <meta name="description">: Deskripsi singkat (sekitar 155-160 karakter) yang muncul di bawah judul di hasil pencarian. Ini adalah "iklan mini" untuk halamanmu.

Next.js App Router menyediakan cara yang sangat elegan untuk mengelola metadata ini secara dinamis untuk setiap halaman.

2. Metadata Dinamis untuk Setiap Artikel

Setiap artikel kita harus memiliki judul dan deskripsi uniknya sendiri. Kita akan menggunakan fungsi generateMetadata yang diekspor dari halaman dinamis kita.

Buka file src/app/blog/[slug]/page.tsx dan tambahkan fungsi generateMetadata di dalamnya.

tsx

// src/app/blog/[slug]/page.tsx
import { getPostBySlug, getAllPosts } from "@/lib/post-utils";
import { MDXRemote } from "next-mdx-remote/rsc";
import rehypePrettyCode from "rehype-pretty-code";
// ... (impor lainnya)
 
type BlogPostPageProps = {
  params: {
    slug: string;
  };
};
 
// Fungsi ini akan generate metadata untuk setiap halaman artikel
export async function

Bagaimana cara kerjanya?

1. Saat Next.js hendak merender halaman untuk sebuah slug, ia akan terlebih dahulu memanggil generateMetadata.
2. Fungsi ini menerima params yang sama dengan komponen halaman, jadi kita bisa mendapatkan slug artikel saat ini.
3. Kita memanggil getPostBySlug untuk mengambil frontmatter (judul dan deskripsi) dari file MDX yang bersangkutan.
4. Kita mengembalikan objek metadata dengan title dan description yang dinamis, diambil langsung dari konten kita.

Sekarang, coba buka salah satu halaman artikelmu dan lihat tab browser. Judulnya pasti sudah berubah sesuai dengan judul artikel! Jika kamu melihat source code halaman (klik kanan > View Page Source), kamu juga akan menemukan tag <meta name="description"> dengan deskripsi yang benar.

3. Membuat Peta Situs (Sitemap)

Sitemap adalah sebuah file XML yang berisi daftar semua URL di website-mu yang ingin kamu indeks oleh mesin pencari. Ini seperti memberikan "peta" kepada Google agar ia tidak tersesat dan bisa menemukan semua halaman artikel kita dengan mudah.

Next.js memungkinkan kita untuk membuat sitemap ini secara dinamis.

Buat file baru di src/app/sitemap.ts:

typescript

// src/app/sitemap.ts
import { MetadataRoute } from "next";
import { getAllPosts } from "@/lib/post-utils";
 
export default function sitemap(): MetadataRoute.Sitemap {
  const

Mari kita bedah:

1. baseUrl: Kamu perlu mengganti ini dengan nama domain aslimu nanti saat sudah di-deploy.
2. postUrls: Kita memanggil getAllPosts untuk mendapatkan daftar semua artikel, lalu kita memetakannya menjadi format yang dibutuhkan sitemap, lengkap dengan URL dan tanggal modifikasi terakhir (yang kita ambil dari frontmatter).
3. staticUrls: Kita juga menambahkan URL halaman statis kita (Home dan halaman daftar Blog).
4. Return: Kita menggabungkan URL statis dan dinamis menjadi satu array.

Sekarang, jalankan npm run dev dan buka http://localhost:3000/sitemap.xml. Kamu akan melihat file XML yang dihasilkan secara otomatis, berisi semua URL di blog-mu! Nanti, saat sudah deploy, kamu bisa mendaftarkan URL sitemap ini ke Google Search Console.

Rangkuman & Langkah Selanjutnya

Kamu baru saja melakukan pekerjaan yang sangat penting. Dengan mengimplementasikan SEO dasar, kamu telah memberikan blog-mu kesempatan terbaik untuk ditemukan oleh audiens yang tepat.

Di bab ini, kita telah: ✅ Memahami pentingnya SEO untuk visibilitas online. ✅ Menggunakan generateMetadata untuk membuat judul dan deskripsi yang unik untuk setiap artikel. ✅ Membuat sitemap.xml dinamis agar mesin pencari mudah mengindeks seluruh situs kita.

Blog kita sudah lengkap. Cepat, indah, fungsional, dan ramah SEO. Hanya ada satu langkah terakhir yang tersisa: mempublikasikannya ke seluruh dunia.

Di bab terakhir, kita akan belajar cara men-deploy aplikasi Next.js kita ke Vercel dengan mudah dan gratis. Siap untuk Go Live?