# SEO Next.js #3: Monitoring

Setelah sitemap, metadata, dan structured data selesai, website perlu dipantau secara berkala. Tujuannya untuk mengetahui apakah ada halaman yang gagal diindeks, link yang bermasalah, atau performa yang menurun.

1. Memantau error di Google Search Console

Buka Google Search Console, lalu pilih properti:

erlanggaht.com

Menu yang perlu diperiksa:

Overview untuk melihat ringkasan website.
Page indexing untuk melihat halaman yang berhasil atau gagal diindeks.
Core Web Vitals untuk melihat pengalaman pengguna.
Sitemaps untuk memastikan sitemap berhasil dibaca Google.

Jika menemukan error, klik jenis error tersebut untuk melihat URL yang bermasalah. Setelah memperbaikinya, klik Validate Fix.

2. Mengecek performa dengan PageSpeed Insights

Gunakan PageSpeed Insights dan periksa halaman utama:

https://erlanggaht.com/
https://erlanggaht.com/about
https://erlanggaht.com/work
https://erlanggaht.com/blog

Perhatikan beberapa bagian berikut:

Performance — kecepatan halaman.
Accessibility — kemudahan akses pengguna.
Best Practices — praktik teknis website.
SEO — pemeriksaan dasar SEO.

Metrik penting:

LCP mengukur kecepatan konten utama muncul.
INP mengukur kecepatan website merespons interaksi.
CLS mengukur kestabilan layout saat halaman dimuat.

3. Memeriksa halaman yang belum diindeks

Di Google Search Console, buka:

Indexing → Pages

Periksa bagian:

Error
Not indexed
Valid

Untuk mengecek URL tertentu, gunakan kolom Inspect any URL. Masukkan URL lengkap, lalu klik Test live URL.

Jika halaman sudah bisa diakses Google tetapi belum masuk indeks, klik Request indexing. Proses ini hanya mengirim permintaan kepada Google dan tidak menjamin halaman langsung muncul di hasil pencarian.

4. Membandingkan mobile dan desktop

Di PageSpeed Insights, jalankan pemeriksaan menggunakan mode:

Mobile
Desktop

Mobile biasanya memiliki skor lebih rendah karena perangkat dan koneksi internet lebih terbatas. Pastikan layout tidak menyebabkan horizontal scroll, teks tetap terbaca, dan gambar tidak terlalu besar.

Contoh penerapan teknis di Next.js

Optimasi gambar dengan `next/image`

import Image from 'next/image';

export default function ProfileImage() {
  return (
    <Image
      src="/images/pf-about.webp"
      alt="Erlangga Hidayatullah"
      width={800}
      height={800}
      sizes="(max-width: 768px) 100vw, 50vw"
      priority
    />
  );
}

Gunakan priority hanya untuk gambar utama. Gambar lain dapat menggunakan lazy loading:

<Image
  src={article.coverImage}
  alt={article.title}
  width={1200}
  height={630}
  loading="lazy"
  sizes="(max-width: 768px) 100vw, 800px"
  className="object-cover"
/>

Loading state

Buat file loading.tsx di dalam folder halaman.

export default function Loading() {
  return (
    <main className="mx-auto max-w-7xl animate-pulse px-6 py-16">
      <div className="h-10 w-56 bg-neutral-200 dark:bg-neutral-800" />
      <div className="mt-8 h-64 bg-neutral-200 dark:bg-neutral-800" />
    </main>
  );
}

Halaman 404

Buat file app/not-found.tsx agar pengguna tidak berhenti di halaman error kosong.

import Link from 'next/link';

export default function NotFound() {
  return (
    <main className="grid min-h-screen place-items-center text-center">
      <div>
        <h1 className="text-4xl font-bold">Halaman tidak ditemukan</h1>
        <Link href="/" className="mt-6 inline-block underline">
          Kembali ke Home
        </Link>
      </div>
    </main>
  );
}

Mengatur crawler dengan `robots.ts`

import type { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/admin', '/xz933k-panel'],
    },
    sitemap: 'https://erlanggaht.com/sitemap.xml',
  };
}

Membuat sitemap dinamis

import type { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const articles = await getAllArticles();

  return articles.map((article) => ({
    url: `https://erlanggaht.com/blog/${article.slug}`,
    lastModified: new Date(article.createdAt),
    changeFrequency: 'monthly',
    priority: 0.7,
  }));
}

Setelah mengubah kode SEO, lakukan deploy terlebih dahulu sebelum mengecek ulang menggunakan Google Search Console atau PageSpeed Insights.

Jadwal monitoring

Setelah deploy: cek sitemap dan halaman utama.
Seminggu sekali: cek Page indexing dan Core Web Vitals.
Sebulan sekali: cek PageSpeed semua halaman utama.
Setiap membuat artikel: lakukan URL Inspection.

Kesimpulan

Monitoring membantu memastikan SEO website tetap sehat setelah dipublikasikan. Google Search Console digunakan untuk memantau indexing dan error, sedangkan PageSpeed Insights digunakan untuk memeriksa performa dan pengalaman pengguna.