Cara Marketer Indonesia Pasang Canonical Tag di Next.js 15 Tanpa Plugin 2026

TL;DR: Canonical tag dipasang di Next.js 15 lewat property alternates.canonical di objek metadata per halaman. Tag ini memberi tahu Google halaman mana yang versi utama, sehingga URL dengan parameter UTM, locale, atau filter tidak diperlakukan sebagai duplicate content. Tanpa canonical, traffic dan backlink bisa terpecah ke beberapa URL berbeda.

Pada audit SEO satu klien personal branding kuartal lalu, saya menemukan 47 URL yang sebenarnya menampilkan konten sama tapi terindeks terpisah karena parameter UTM dari kampanye iklan. Akibatnya, signal backlink ke artikel utama tersebar dan otoritas halaman menjadi setengah dari potensi sebenarnya.

Pemasangan canonical tag yang benar menyelesaikan masalah ini dalam satu deploy. Tidak perlu plugin, tidak perlu library tambahan.

Apa yang Canonical Tag Selesaikan

Google akan menganggap dua URL sebagai halaman berbeda kalau path-nya berbeda, meskipun isinya identik. Contoh kasus umum:

• /artikel/seo-audit dan /artikel/seo-audit?utm_source=linkedin
• /produk/parfum dan /produk/parfum?warna=biru
• https://example.com/page dan https://www.example.com/page

Tanpa instruksi eksplisit, Google memilih salah satu sebagai versi kanonik. Pilihannya tidak selalu sesuai keinginan kita. Canonical tag mengeliminasi tebakan ini. Detail teknis ada di glosarium canonical tag dan dokumentasi Google Search Central.

Implementasi di Next.js 15 App Router

Next.js 15 menyediakan Metadata API yang native dukung canonical. Tidak perlu pasang react-helmet atau plugin.

Cara 1: Per halaman statis

// app/artikel/seo-audit/page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'SEO Audit 90 Menit untuk UMKM',
  alternates: {
    canonical: 'https://vitoatmo.com/artikel/seo-audit',
  },
};

Cara 2: Per halaman dinamis

// app/artikel/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const { slug } = await params;
  return {
    alternates: {
      canonical: `https://vitoatmo.com/artikel/${slug}`,
    },
  };
}

Cara 3: Pakai metadataBase untuk efisiensi

Set metadataBase di app/layout.tsx, lalu cukup tulis path relatif:

export const metadata: Metadata = {
  metadataBase: new URL('https://vitoatmo.com'),
};

Untuk konteks pemetaan SEO lebih luas, lihat keyword mapping vs topic cluster.

Studi Kasus Yuanita Sekar

Saat menangani audit personal branding Yuanita Sekar Maret 2026, halaman artikel utamanya terindeks di empat URL berbeda karena parameter tracking dari LinkedIn dan Twitter. Setelah pasang canonical tag, dalam 32 hari Google Search Console mencatat:

• 3 URL duplikat dihapus dari index, konsolidasi ke 1 URL kanonik
• Posisi rata-rata naik dari 18 ke 9 di SERP
• Klik organik naik dari 47 ke 134 per minggu

Hasil ini spesifik karena traffic Yuanita didominasi referral sosial yang menambahkan UTM. Project tanpa traffic UTM kemungkinan dampaknya lebih kecil. Untuk pelacakan UTM, baca glosarium UTM parameters.

Kapan Canonical Tidak Cukup

Canonical hanya hint, bukan perintah keras. Untuk kasus berikut, perlu solusi lain:

• Halaman benar-benar tidak boleh diindeks: pakai robots: { index: false } di metadata
• Halaman lama harus pindah permanen: pakai redirect 301 lewat next.config.ts
• Konten paginasi: Google menyarankan canonical ke halaman 1 tidak ideal, lebih baik self-canonical per halaman

Untuk konteks crawling, lihat XML sitemap dan Search Console.

Pertanyaan Umum

Apakah canonical wajib di setiap halaman?

Tidak wajib secara teknis, tapi praktik terbaik adalah memasang self-referencing canonical di setiap halaman. Ini mencegah Google memilih versi yang salah saat ada parameter URL yang tidak terduga.

Apa beda canonical dan redirect 301?

Canonical memberi tahu Google halaman mana yang utama, tapi semua versi tetap bisa diakses. Redirect 301 memaksa browser dan crawler pindah ke URL baru. Pakai redirect kalau URL lama tidak boleh diakses lagi.

Bagaimana cek canonical sudah benar?

Buka halaman di browser, view-source, cari <link rel="canonical". Atau pakai Google Search Console URL Inspection tool yang menampilkan "User-declared canonical" vs "Google-selected canonical".

Penutup

Pasang self-referencing canonical di setiap halaman publik dari awal project, jangan tunggu masalah duplicate content muncul. Lima menit di metadata sekarang menghemat audit SEO dua jam di kuartal berikutnya.