SEO Teknis untuk Developer: Canonical, hreflang, JSON-LD

SEO teknis punya masalah reputasi di kalangan developer: terdengar seperti marketing, jadi kita mengabaikannya sampai seseorang bertanya kenapa versi Indonesia sebuah halaman malah ranking di Jerman, atau kenapa Google mengindeks domain staging. Padahal tag canonical, hreflang, structured data, dan sitemap bukan marketing — mereka kontrak level protokol antara HTML Anda dan crawler. Salah mengerjakannya adalah bug, dengan akar penyebab yang sama seperti bug lainnya.

Checklist ini lahir dari merilis portfolio ini sendiri — situs Next.js dwibahasa Inggris-Indonesia dengan ratusan artikel blog — plus beberapa proyek klien. Semua di sini adalah separuh developer dari SEO: hal-hal yang Anda perbaiki di kode, verifikasi dengan curl, dan uji regresi di CI. Tanpa riset keyword, tanpa strategi konten, hanya pipa-pipa yang menentukan apakah konten Anda bahkan layak untuk ranking.

URL Canonical: Satu Alamat per Konten

Setiap halaman di situs Anda bisa dicapai lewat lebih banyak URL daripada yang Anda kira: dengan dan tanpa trailing slash, dengan parameter UTM, lewat http sebelum redirect, kadang lewat route alias dan route asli sekaligus. Bagi Google itu halaman-halaman terpisah yang saling bersaing, memecah sinyal ranking dan membakar crawl budget. Tag canonical adalah cara Anda mendeklarasikan alamat mana yang asli — dan menurut dokumentasi Google, redirect adalah sinyal yang lebih kuat lagi, dengan pencantuman di sitemap sebagai yang terlemah.

Di App Router implementasi bersihnya adalah field alternates pada Metadata API, dihitung di generateMetadata sehingga setiap route dinamis mendeklarasikan dirinya. Dua aturan yang saya tegakkan: canonical selalu URL absolut, dan setiap versi locale adalah canonical-nya sendiri. Mengarahkan canonical halaman Indonesia ke halaman Inggris adalah kesalahan klasik — itu memberi tahu Google konten Indonesia adalah duplikat yang harus dibuang, kebalikan persis dari yang diinginkan situs dwibahasa.

// app/[locale]/blog/[slug]/page.tsx — canonical + hreflang in one place
export async function generateMetadata({ params }): Promise<Metadata> {
  const { locale, slug } = await params
  const base = "https://example.com"

  return {
    title: post.title,
    description: post.description,
    alternates: {
      // ONE canonical per language version — not one shared
      // canonical pointing every locale at English.
      canonical: `${base}/${locale}/blog/${slug}`,
      languages: {
        en: `${base}/en/blog/${slug}`,
        id: `${base}/id/blog/${slug}`,
        // safety net for every unmatched visitor:
        "x-default": `${base}/en/blog/${slug}`,
      },
    },
  }
}

hreflang: Kontrak yang Harus Dua Arah

hreflang memberi tahu Google versi bahasa mana saja yang ada untuk sebuah halaman sehingga pencari berbahasa Indonesia diarahkan ke /id/ dan lainnya ke /en/. Aturan implementasi dari dokumentasi Google cukup ketat sampai kebanyakan situs salah setidaknya satu:

• Setiap versi harus mencantumkan SEMUA versi termasuk dirinya sendiri. Jika halaman Inggris mereferensikan yang Indonesia, halaman Indonesia harus mereferensikan balik — anotasi yang tidak berbalas akan diabaikan.
• Kode memakai bahasa ISO 639-1 plus region ISO 3166-1 opsional: id, en, en-GB. Kode karangan gagal tanpa suara.
• x-default mendeklarasikan fallback untuk pengguna yang tidak cocok dengan bahasa mana pun — arahkan ke locale utama Anda.

Kesalahan yang pernah saya buat di versi awal situs ini: anotasi hreflang saya dihasilkan di satu komponen, tapi sebuah refactor membuat satu template hanya mengeluarkan link locale saat itu. Tanpa error, tanpa peringatan — hreflang diam-diam batal di halaman-halaman itu karena kontrak dua arahnya putus. Perbaikan yang awet bersifat struktural: hasilkan canonical dan peta languages lengkap dari satu helper, sehingga sebuah halaman tidak bisa mendeklarasikan yang satu tanpa yang lain.

Structured Data: JSON-LD atau Tidak Sama Sekali

Structured data adalah cara memberi tahu Google apa sebuah halaman itu, bukan hanya apa isinya — ini adalah Article, oleh Person ini, terbit pada tanggal ini. Google merekomendasikan format JSON-LD di atas microdata, dan di Server Component biayanya nol: bangun object polos, serialisasikan ke tag script, selesai. Tanpa JavaScript client, tanpa library.

// JSON-LD in a Server Component — no client JS needed
export default async function BlogPost({ params }) {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: post.title,
    datePublished: post.datePublished,
    author: { "@type": "Person", name: "Matthews Wong" },
    image: `https://example.com${post.image}`,
  }

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article>...</article>
    </>
  )
}

Jujurlah dalam markup. Kelayakan rich result bergantung pada properti wajib per tipe schema, dan Google memvalidasi dengan agresif — menandai konten dengan rating yang tidak dimilikinya atau kepengarangan yang tidak bisa ditunjukkan adalah cara situs mendapat manual action. Saya menjaganya membosankan: Article untuk artikel, Person untuk halaman about, BreadcrumbList di tempat UI sungguh menampilkan breadcrumb. Validasi setiap template di Rich Results Test sebelum rilis, karena satu blok JSON-LD cacat diam-diam mendiskualifikasi seluruh halaman.

Sitemap dan robots.txt: Peta untuk Crawler

App Router mengubah sitemap dari artefak build yang menyebalkan menjadi fungsi bertipe: app/sitemap.ts mengekspor daftar URL Anda, dihasilkan dari sumber data yang sama yang merender halamannya — di situs ini, registry blog memberi makan keduanya, sehingga artikel baru tidak bisa ada tanpa entri sitemap. Sertakan lastModified yang jujur dari tanggal konten asli; crawler memakainya untuk memprioritaskan crawl ulang, dan sitemap di mana semuanya berubah hari ini terbaca sebagai noise.

robots.txt lewat app/robots.ts mengikuti pola sama. Jaga minimal: tunjuk ke sitemap, blokir path yang sungguh tak berguna seperti API route, dan jangan pernah pakai robots.txt untuk menyembunyikan konten duplikat — halaman yang diblokir tidak bisa di-crawl, artinya Google tidak akan pernah melihat tag canonical yang Anda taruh di sana. Disallow dan canonical adalah alat yang saling eksklusif, kehalusan yang langsung berasal dari dokumentasi konsolidasi Google.

Bagian yang Dilupakan Developer

Empat item yang mutlak tugas developer, dan rusak di kebanyakan situs yang saya audit:

Checklist Minggu Rilis

1. Setiap route mengeluarkan canonical absolut yang merujuk dirinya; URL berparameter dan duplikat semuanya bermuara ke satu alamat.
2. Set hreflang lengkap, timbal balik, memuat x-default, dan dihasilkan dari satu helper bersama, bukan per template.
3. JSON-LD tervalidasi di Rich Results Test untuk setiap template halaman, bukan hanya homepage.
4. Sitemap dihasilkan dari data yang sama yang merender route, dengan tanggal lastModified yang jujur; robots.txt menunjuk ke sana.
5. Konten hilang mengembalikan 404 sungguhan; konten pindah mengembalikan 301; tidak ada rantai redirect lebih dari satu lompatan.
6. Meta OG dan Twitter dirender benar dalam uji preview WhatsApp dan LinkedIn.
7. Deployment staging dan preview diblokir dari pengindeksan — header noindex atau tembok auth, terverifikasi, karena Google menemukan situs staging Anda adalah jenis memalukan tersendiri.

Kesimpulan

SEO teknis adalah permukaan kontrak, dan kontrak adalah keahlian kita. Canonical mendeklarasikan identitas, hreflang mendeklarasikan perutean bahasa dengan aturan timbal balik yang ketat, JSON-LD mendeklarasikan makna, dan sitemap mendeklarasikan inventaris. Tidak ada yang butuh intuisi marketing — yang dibutuhkan disiplin yang sama dengan API: hasilkan dari satu sumber kebenaran, validasi di CI, verifikasi di produksi dengan curl. Kerjakan pipa membosankan itu sekali, dan konten Anda bersaing berdasarkan mutunya yang sebenarnya.