Pemeriksa SEO Next.js

Audit situs Next.js Anda untuk mengetahui masalah SSR, rendering, metadata, dan kemampuan perayapan. 20+ pemeriksaan di 7 kategori.

Masalah SEO Next.js #1

Penggunaan arahan "gunakan klien" yang berlebihan menyebabkan konten hanya dirender di browser. Mesin telusur dan perayap AI (ChatGPT, Claude, Perplexity) mungkin melihat shell HTML kosong, bukan konten Anda.

  • Deteksi masalah SSR vs CSR
  • Periksa ketersediaan metadata
  • Analisis Data Web Inti

Berfungsi paling baik dengan situs Next.js, tetapi dapat menganalisis situs web apa pun

Pertanyaan yang Sering Diajukan

Apa yang diperiksa alat ini?

Alat ini melakukan 20+ pemeriksaan SEO di 7 kategori:

  • Render & RSK: Mendeteksi shell HTML kosong, rendering khusus klien, masalah hidrasi
  • Metadata & Kepala: Judul, deskripsi, Grafik Terbuka, kanonik, area pandang
  • Performa: Core Web Vitals (FCP, LCP, TTFB), sumber daya yang memblokir render
  • Gambar: Teks alternatif, penggunaan berikutnya/gambar, pemuatan lambat
  • Data Terstruktur: Validasi markup skema JSON-LD
  • Kemampuan Perayapan: Meta robot, tautan internal, hreflang
  • HTML semantik: Judul, landmark, atribut ARIA

Mengapa SSR/SSG penting untuk SEO?

Mesin telusur dan perayap AI pada awalnya hanya melihat HTML mentah dari server Anda. Jika konten Anda dirender hanya melalui JavaScript (sisi klien), crawler mungkin melihat halaman kosong. Rendering Sisi Server (SSR) atau Pembuatan Situs Statis (SSG) memastikan konten Anda berada dalam respons HTML awal.

Apa yang dimaksud dengan masalah "Kosongkan HTML Shell"?

Hal ini terjadi ketika aplikasi Next.js Anda menampilkan HTML minimal dengan konten yang dimuat seluruhnya melalui JavaScript. Penyebab umum:

  • Penggunaan arahan "gunakan klien" secara berlebihan
  • Tidak menggunakan getServerSideProps atau getStaticProps
  • Mengambil data hanya di kait useEffect

Bagaimana cara memperbaiki masalah rendering?

Untuk memastikan konten tersedia untuk crawler:

  • Router Halaman: Gunakan getServerSideProps atau getStaticProps
  • Router Aplikasi: Pertahankan komponen sebagai Komponen Server secara default, hanya tambahkan "gunakan klien" bila diperlukan
  • Pengambilan Data: Ambil data penting di sisi server, bukan di useEffect
  • Metadata: Gunakan next/head atau API metadata