Perbaikan: Google Search Console "Tidak Dapat Mengambil Sitemap" pada Next.js (App Router)

Jika Anda merasa frustrasi melihat kesalahan “Tidak dapat mengambil sitemap” di Google Search Console untuk proyek Next.js Anda, Anda tidak sendirian. Kesalahan sitemap Google Search Console yang menjengkelkan ini dapat mencegah Google mengindeks situs Anda dengan benar, menyakiti visibilitas Anda. Banyak pengembang yang menggunakan Next.js App Router telah menghadapi tantangan pemecahan masalah sitemap Next.js ini, di mana GSC gagal membaca sitemap, bahkan ketika tampaknya dapat diakses dengan sempurna di browser.

Untungnya, komunitas pengembang telah melacak solusi yang andal. Panduan ini memandu Anda melalui langkah-langkah pasti untuk memperbaiki kesalahan “Tidak dapat mengambil”, berdasarkan temuan berguna yang dibagikan dalam isu GitHub Next.js.

Mari kita kembalikan sitemap Anda terindeks dan situs Anda kembali ke jalur yang benar. Untuk wawasan lebih lanjut dan diskusi tambahan, Anda juga dapat melihat balasan saya di isu GitHub di sini.

Masalah: Mengapa Google Tidak Bisa Mengambil Sitemap?

Inti masalahnya tampaknya merupakan kombinasi dari cara Next.js menangani rute dan middleware, serta cara Google Search Console menyimpan upaya pengambilannya. Ketika GSC mencoba mengakses sitemap.xml Anda, ia mungkin mengalami gangguan—seringkali dari middleware—yang menyebabkan permintaan gagal. Setelah gagal, GSC tampaknya menyimpan hasil gagal itu untuk URL spesifik tersebut. Bahkan setelah Anda memperbaiki masalah yang mendasarinya, hanya mengirim ulang URL sitemap.xml yang sama mungkin tidak memicu upaya baru.

Cara Memperbaiki Kesalahan “Tidak Dapat Mengambil”

Solusi ini berasal dari pengguna GitHub @segabrielcarvalho, yang membagikan pendekatan praktis yang menangani caching, routing, dan konflik middleware dengan empat langkah utama.

Langkah 1: Paksa Pengambilan Sitemap Segar dengan Trailing Slash

Ini adalah langkah termudah namun paling penting. Google Search Console tampaknya menyimpan upaya pengambilan yang gagal secara agresif. Untuk memaksanya mencoba lagi dengan keadaan bersih, Anda dapat menggunakan teknik sederhana untuk menghancurkan cache.

Alih-alih mengirimkan https://your-site.com/sitemap.xml, tambahkan trailing slash:

https://your-site.com/sitemap.xml/

Mengirimkan URL yang sedikit berbeda ini akan melewati cache GSC dan memicu pengambilan baru. Trik sederhana ini seringkali cukup untuk membuat sitemap dibaca dengan sukses setelah Anda menerapkan perbaikan lainnya.

Langkah 2: Layani Sitemap Anda dari Rute Bersarang

Alih-alih menempatkan file sitemap.ts Anda di root direktori app, pindahkan ke folder bersarang. Ini membantu mengisolasinya dan memastikannya dilayani dengan benar tanpa konflik.

1. Buat folder sitemap baru di dalam direktori app Anda.
2. Pindahkan file sitemap.ts (atau sitemap.js) Anda ke dalamnya.

Jalur file baru Anda akan menjadi: app/sitemap/sitemap.ts

Ini mengubah URL publik sitemap Anda. URL baru akan menjadi:

https://your-site.com/sitemap/sitemap.xml

Ingat untuk menggunakan URL baru ini saat Anda mengirimkannya ke Google Search Console (dengan trik trailing slash!).

Langkah 3: Kecualikan File SEO dari Middleware Anda

Middleware sangat kuat, tetapi juga dapat secara tidak sengaja memblokir Googlebot mengakses file penting seperti sitemap dan robots.txt. Untuk mencegah ini, Anda perlu memperbarui middleware.ts Anda untuk secara eksplisit mengecualikan file-file ini.

Konfigurasi matcher dalam file middleware Anda memberi tahu Next.js di jalur mana middleware harus berjalan. Dengan menggunakan negative lookahead, Anda dapat menginstruksikannya untuk berjalan di semua jalur kecuali untuk aset statis dan file SEO.

Berikut adalah contoh middleware yang tidak melakukan apa pun selain mengecualikan file yang diperlukan. Anda dapat menyesuaikan ini untuk middleware yang sudah ada.

import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export default function middleware(req: NextRequest) {
  // Logika middleware Anda bisa masuk di sini.
  // Jika Anda tidak memiliki logika lain, cukup kembalikan next().
  void req;
  return NextResponse.next();
}

export const config = {
  matcher: [
    /*
     * Cocokkan semua jalur permintaan kecuali yang dimulai dengan:
     * - _next/static (file statis)
     * - _next/image (file optimisasi gambar)
     * - favicon.ico (file favicon)
     * - robots.txt (file robots)
     * - sitemap.xml (file sitemap)
     * - sitemap/ (file sitemap bersarang)
     * - site.webmanifest (file web manifest)
     */
    "/((?!_next/static|_next/image|favicon\\.ico|robots\\.txt|sitemap\\.xml|sitemap/.*|site\\.webmanifest).*)",
  ],
};

Konfigurasi ini memastikan file robots.txt Anda dan kedua jalur sitemap potensial (/sitemap.xml dan /sitemap/sitemap.xml) tidak pernah diproses oleh middleware, menghindari potensi blokir atau pengalihan yang dapat membingungkan Googlebot.

Langkah 4: Buat File robots.txt yang Benar

Terakhir, pastikan Anda memiliki file robots.txt yang bersih dan benar di direktori app Anda. File ini harus secara eksplisit mengizinkan semua agen pengguna dan menunjuk ke URL sitemap baru Anda. Jika Anda memiliki robots.txt di folder public, sebaiknya hapus untuk menghindari konflik dan hanya mengandalkan yang dibuat dari direktori app Anda.

Buat file bernama robots.ts atau robots.txt di direktori app Anda dengan konten berikut:

import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
    },
    sitemap: 'https://your-site.com/sitemap/sitemap.xml',
  }
}

Atau, jika Anda lebih suka file statis:

User-agent: *
Allow: /

Sitemap: https://your-site.com/sitemap/sitemap.xml

Pastikan untuk mengganti https://your-site.com dengan domain asli Anda. File ini mengarahkan perayap ke lokasi baru sitemap Anda.

Poin Penting

Untuk merangkum perbaikannya:

1. Gunakan trailing slash (/) pada URL sitemap Anda saat mengirimkan ke GSC untuk menghancurkan cache.
2. Pindahkan file sitemap Anda ke rute bersarang seperti app/sitemap/sitemap.ts.
3. Perbarui middleware Anda untuk mengecualikan file SEO seperti robots.txt dan sitemap.xml.
4. Arahkan robots.txt Anda ke URL sitemap baru.

Selain itu, penting untuk memastikan Anda hanya memiliki satu sumber untuk sitemap Anda. Jika Anda memiliki sitemap.xml di folder public dan juga menghasilkan satu dari direktori app, konflik dapat terjadi. Hapus file sitemap lama dan tetap gunakan satu sitemap yang dibuat secara dinamis.

Dengan mengikuti langkah-langkah ini, Anda seharusnya dapat menyelesaikan kesalahan “Tidak dapat mengambil sitemap” dan membuat situs Next.js Anda diindeks dengan benar oleh Google. Selamat mencoba