SEO Next.js: Rendering, Metadata, Sitemap, dan Blog yang Masuk Peringkat

SEO Next.js pada dasarnya adalah membuat pilihan yang tepat untuk setiap rute: apa yang dirender di server, apa yang di-cache, dan apa yang sudah ada di HTML sebelum skrip apa pun berjalan. Google menjelaskan dalam dasar-dasar SEO JavaScript bahwa aplikasi JavaScript diproses dalam tiga fase (crawling, rendering, pengindeksan) dan bahwa rendering sisi server atau pre-rendering "tetap merupakan ide yang bagus". Next.js melakukannya secara default. Panduan ini membahas App Router (Next.js 13 ke atas), dengan catatan untuk Pages Router yang lebih lama.

Apakah Next.js bagus untuk SEO?

Ya. Aplikasi React biasa yang dirender di sisi klien mengirim file HTML yang hampir kosong dan membangun halaman di browser; mesin pencari harus merendernya, dan banyak bot tidak pernah melakukannya. Next.js merender React di server, sehingga respons HTML sudah berisi judul, teks, tautan, dan metadata. Panduan kami tentang SEO JavaScript menjelaskan mengapa perbedaan ini penting untuk pengindeksan.

Di App Router, komponen adalah Server Components secara default. Bahkan komponen yang ditandai 'use client' tetap di-pre-render menjadi HTML di server. Titik lemahnya ada pada data: apa pun yang Anda ambil di dalam useEffect, atau baru dimuat setelah klik, tidak ada di HTML awal. Ambil konten di Server Components dan gunakan komponen klien hanya untuk interaktivitas.

SSG, SSR, ISR, atau CSR: mode rendering mana yang harus dipilih?

Next.js memungkinkan Anda mencampur mode per rute. Pilihan ini memengaruhi kebaruan, kecepatan, dan apa yang diterima crawler.

Dokumentasi Next.js tentang ISR menyebutkan manfaatnya: memperbarui konten statis "tanpa membangun ulang seluruh situs" dan menangani banyak halaman tanpa waktu build yang lama. Rute dengan export const revalidate = 3600 dibuat ulang paling banyak sekali per jam; untuk kontrol yang tepat, panggil revalidatePath atau revalidateTag saat konten berubah. ISR tidak berfungsi dengan ekspor statis (output: 'export'). Untuk aplikasi yang harus tetap dirender di sisi klien, panduan kami tentang SEO aplikasi satu halaman membahas solusinya.

Bagaimana mengatur judul, deskripsi, dan canonical dengan Metadata API?

Metadata API menggantikan next/head di App Router. Menurut dokumentasi Next.js tentang metadata, Anda mengekspor objek metadata statis dari layout atau halaman, atau fungsi generateMetadata jika nilainya bergantung pada data, lalu Next.js membuat tag head. Keduanya hanya didukung di Server Components.

export async function generateMetadata({ params }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `/blog/${slug}` },
    openGraph: { images: [post.cover] },
  }
}

Lima aturan yang mencegah sebagian besar masalah:

• Atur metadataBase di root layout (domain produksi Anda), agar canonical relatif dan URL Open Graph menjadi absolut.
• Gunakan template judul di root layout, misalnya '%s | Merek', agar setiap halaman memiliki judul unik dengan nama merek sekali saja.
• Beri setiap halaman yang dapat diindeks canonical yang merujuk ke dirinya sendiri melalui alternates.canonical; ini melindungi dari duplikat akibat parameter URL dan garis miring di akhir. Entri glosarium kami tentang tag canonical merangkum aturannya.
• Tulis deskripsi untuk setiap halaman, dibuat dari konten di generateMetadata, bukan satu nilai default untuk seluruh situs.
• Tambahkan gambar Open Graph dengan file opengraph-image di folder rute, lalu periksa hasilnya dengan alat pratinjau Open Graph.

Pada halaman dinamis, Next.js mengalirkan metadata setelah byte pertama untuk mempercepat rendering. Dokumentasi menyebutkan bahwa streaming dinonaktifkan untuk bot yang mengharapkan metadata di head, yang dikenali dari user agent (Bingbot, Twitterbot, dan Slackbot termasuk contohnya), dan opsi htmlLimitedBots dapat menyesuaikan daftarnya. Jika crawler yang penting bagi Anda tidak tercantum, tambahkan. Di Pages Router, padanannya adalah komponen Head dari next/head, dengan atribut key untuk menghindari tag ganda.

Bagaimana membuat sitemap.xml dan robots.txt di Next.js?

Keduanya adalah file khusus di folder app. File sitemap.ts yang mengekspor fungsi pengembali daftar URL menjadi /sitemap.xml; file robots.ts menjadi /robots.txt. Referensi sitemap mencatat bahwa file ini di-cache secara default dan batas Google adalah 50.000 URL per sitemap; di atas itu, generateSitemaps membaginya menjadi beberapa file.

import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPosts()
  return posts.map((p) => ({
    url: `https://example.com/blog/${p.slug}`,
    lastModified: p.updatedAt,
  }))
}

Masukkan hanya URL canonical yang dapat diindeks dan mengembalikan 200, dengan tanggal pembaruan sebenarnya di lastModified. Sitemap juga menerima alternates.languages untuk situs multibahasa. Di robots.ts, arahkan ke sitemap dan tentukan bot AI mana yang boleh merayapi situs; artikel kami tentang robots.txt untuk crawler AI mencantumkan daftarnya. Detail format ada di entri glosarium kami tentang sitemap XML.

Detail teknis apa yang paling sering merusak SEO situs Next.js?

Semua masalah ini menurunkan kemampuan perayapan: crawler harus bisa menemukan setiap URL melalui tautan dan mendapatkan kode status yang bersih.

Bagaimana menambahkan data terstruktur di Next.js?

Dokumentasi Next.js menyarankan merender JSON-LD sebagai tag script bertipe application/ld+json langsung di komponen halaman atau layout, dari data yang sama dengan halaman, serta meng-escape karakter < di JSON yang diserialisasi untuk mencegah injeksi. Karena dirender di server, Google dan crawler AI melihatnya di HTML mentah. Gunakan Article (atau BlogPosting) untuk artikel, Organization di root layout, BreadcrumbList untuk halaman yang dalam, dan Product untuk e-commerce. Generator schema memberi Anda blok awal yang valid; setelah itu validasi halaman dengan Uji Hasil Kaya dari Google.

Bagaimana membuat situs Next.js cukup cepat untuk Core Web Vitals?

Next.js menyediakan komponen yang mengatasi penyebab umum Core Web Vitals yang buruk:

• next/image: mengubah ukuran gambar, menyajikan format modern, memuat secara lazy secara default, dan mewajibkan dimensi sehingga mencegah pergeseran tata letak. Tandai gambar utama di layar pertama sebagai prioritas agar tidak dimuat lazy (biasanya itulah elemen Largest Contentful Paint).
• next/font: meng-host font di domain Anda sendiri dan mencegah pergeseran akibat pergantian font yang terlambat.
• next/script: memuat skrip pihak ketiga dengan strategi (afterInteractive, lazyOnload) alih-alih memblokir halaman.
• Lebih sedikit JavaScript di klien: setiap batas 'use client' menambah kode yang harus diunduh dan dihidrasi, yang membebani Interaction to Next Paint di perangkat seluler.

Ukur data lapangan, bukan hanya skor lab: panduan kami tentang PageSpeed Insights menunjukkan cara membaca keduanya.

Bagaimana menjalankan blog Next.js yang masuk peringkat?

Blog Next.js biasanya berbentuk salah satu dari tiga: file MDX atau Markdown di repositori (sederhana, tetapi setiap artikel memerlukan commit dan deploy), headless CMS (Sanity, Contentful, Strapi, Payload) yang di-query di Server Components, atau webhook publikasi yang menerima artikel dari alat eksternal. Dalam ketiga kasus, pola SEO-nya sama: rute dinamis app/blog/[slug] dengan generateStaticParams, generateMetadata, ISR, sitemap yang diisi dari sumber yang sama, dan halaman indeks yang menautkan setiap artikel.

Webhook memisahkan publikasi dari siklus deploy. Route Handler menerima artikel, menyimpannya, lalu memvalidasi ulang halaman yang terkait:

// app/api/publish/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request) {
  if (request.headers.get('authorization') !== `Bearer ${process.env.PUBLISH_SECRET}`) {
    return new Response('Unauthorized', { status: 401 })
  }
  const article = await request.json()
  await savePost(article)
  revalidatePath('/blog')
  revalidatePath(`/blog/${article.slug}`)
  return Response.json({ ok: true })
}

Bagaimana SEO Next.js membantu Anda dikutip oleh asisten AI?

Rendering di server adalah syarat pertama GEO (generative engine optimization). Analisis Vercel pada Desember 2024, The rise of the AI crawler, menemukan bahwa "tidak satu pun crawler AI besar saat ini merender JavaScript", menyebut GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot, dan PerplexityBot, serta mencatat 569 juta permintaan GPTBot dan 370 juta permintaan Claude di jaringannya dalam satu bulan. Halaman Next.js yang mem-pre-render teks, judul, dan JSON-LD dapat dibaca oleh semuanya; halaman yang dirender di sisi klien tidak.

Syarat kedua adalah konten yang layak dikutip: artikel yang menjawab satu pertanyaan per bagian, dengan sumber, angka, dan definisi yang jelas, diterbitkan secara rutin. Bagian inilah yang diotomatiskan oleh Sorank, produk kami. Sorank adalah software SEO dan GEO yang berjalan secara autopilot: menemukan kata kunci Anda, dan Generator Artikel Blog menulis 20, 60, atau 120 artikel per bulan lengkap dengan sumber, tautan internal, dan gambar. Di situs Next.js, Sorank terhubung melalui webhook kustom yang dijelaskan di halaman instalasi: Route Handler Anda menerima setiap artikel, menyimpannya, dan memvalidasi ulang blog. Pelacakan Sebutan AI lalu memeriksa setiap minggu apakah ChatGPT, Claude, dan Gemini mengutip merek Anda.

Intinya: pre-render setiap halaman yang ingin ditemukan, tetapkan metadata di server, dan isi sitemap dari sumber yang sama dengan konten. Next.js menyediakan alatnya; peringkat dan kutipan AI berasal dari apa yang Anda terbitkan dengannya. Untuk terus mengisi blog Next.js dengan artikel, lihat paket Sorank, mulai dari 49 dolar per bulan dengan uji coba gratis 3 hari.