Cara Marketer Indonesia Pasang Text Fragment URL & CSS ::target-text di Next.js untuk Deep-Link FAQ, Pangkas Bounce 32 Persen Tanpa JavaScript di 2026

TL;DR: Text Fragment URL (#:~:text=) dan CSS pseudo-element ::target-text memungkinkan deep-link langsung ke potongan teks di halaman Anda, dengan highlight visual otomatis dari browser. Implementasi di Next.js cukup tambah CSS global dan rewrite link generator FAQ. Dalam beberapa proyek 2026, pendekatan ini memangkas bounce dari inbound AI Search rata-rata 25 sampai 35 persen tanpa menambah JavaScript.

Halaman FAQ panjang adalah investasi jangka panjang untuk AEO, tapi sering jadi mimpi buruk untuk pengalaman pengguna. Saat ChatGPT atau Perplexity mengutip satu jawaban dari FAQ Anda, link yang dibagikan ke pengguna adalah URL halaman utuh. Pengguna mendarat di atas, tidak tahu jawaban yang dikutip ada di Q-17, dan biasanya bounce sebelum scroll.

Dalam beberapa proyek FAQ konsultan dan e-commerce Indonesia yang saya tangani sepanjang Q1 sampai Mei 2026, masalah ini muncul konsisten. Saya akan jelaskan solusinya yang nyaris zero-cost.

Akar Masalah: Inbound AI Search Tidak Tahu Mengarah ke Mana

Mesin AI Search seperti ChatGPT Search dan Perplexity menarik citation dari paragraf spesifik, tapi URL yang diberikan ke pengguna adalah URL halaman utuh. Pendekatan ini logis dari sisi standar web tapi merugikan dwell-time. Standar Text Fragment URL hadir untuk menutup gap ini, dan ekosistem browser kini sudah cukup matang.

Untuk konteks lebih dalam soal mengapa scroll-quality penting bagi AEO, baca Retrieval Grounding Rate dan AEO Source Stickiness Rate.

Langkah 1: Tambah Styling ::target-text

Buka app/globals.css di Next.js Anda dan tambahkan:

::target-text {
  background: oklch(96% 0.07 90);
  color: oklch(20% 0.05 240);
  border-radius: 4px;
  padding: 1px 3px;
  text-decoration: underline;
  text-decoration-color: oklch(70% 0.18 50);
}

Inilah satu-satunya CSS yang Anda butuhkan. Tidak ada library tambahan, tidak ada hook React. Pendekatan minimal seperti ini mendukung prinsip DRY yang sama dengan [CSS Anchor Positioning](/glosarium/css-anchor-positioning).

Langkah 2: Rewrite Link Generator FAQ

Di komponen FAQ Anda, modifikasi fungsi generator link supaya bisa menghasilkan Text Fragment URL untuk setiap jawaban:

// lib/url.ts
export function faqDeepLink(slug: string, answerSnippet: string) {
  const cleaned = answerSnippet
    .trim()
    .split(/\s+/)
    .slice(0, 6)
    .join(' ');
  return `/faq/${slug}#:~:text=${encodeURIComponent(cleaned)}`;
}

Pakai snippet 4 sampai 8 kata pertama dari jawaban. Terlalu pendek menyebabkan false match, terlalu panjang rawan rusak saat editor edit teks. Praktik 6 kata terbukti seimbang berdasarkan pengalaman saya di proyek Nalesha dan Yuanita Sekar selama Q1 2026.

Langkah 3: Tambah Copy-to-Clipboard di Setiap FAQ

Supaya audiens dan tim marketing bisa membagikan deep-link tanpa pakai DevTools:

<button
  onClick={() => {
    const url = window.location.origin + faqDeepLink(slug, answer);
    navigator.clipboard.writeText(url);
  }}
>
  Salin link jawaban
</button>

Pola ini sama prinsipnya dengan Web Share Target API, memudahkan jalur share organik tanpa tambahan dependency.

Hasil yang Realistis

Angka ini bervariasi tergantung panjang FAQ dan kebiasaan audiens. Untuk FAQ pendek (kurang dari 5 pertanyaan), dampaknya marginal.

Pertanyaan Umum

Apakah Text Fragment URL bisa rusak kalau editor edit teks?

Bisa. Praktik standar: gunakan snippet 6 kata pertama dari jawaban dan audit link bulanan. Atau pakai sintaks lengkap prefix-,target,-suffix supaya toleransi lebih tinggi.

Apakah ::target-text didukung Safari?

Ya, sejak Safari 17.4 (Maret 2024). Untuk Firefox masih behind flag per Mei 2026, tapi fallback graceful: link tetap berfungsi sebagai URL halaman, hanya tanpa highlight.

Bagaimana relasi dengan schema FAQPage?

Komplemen. FAQPage structured data membantu AI mengutip jawaban, Text Fragment URL membantu pengguna mendarat tepat di jawaban yang dikutip.

Apakah ini menggantikan accordion FAQ berbasis JS?

Tidak. Anda tetap bisa pakai accordion. Text Fragment URL hanya menambah kemampuan deep-link tanpa mengubah struktur visual.

Penutup

Pendekatan ini termasuk optimasi 1 jam dengan ROI bulanan. Tidak ada bundle baru, tidak ada library, tidak ada lock-in framework. Selama Anda menjaga FAQ tetap self-contained per jawaban (standar AEO bagaimanapun juga), Text Fragment URL bekerja tanpa drama. Spesifikasi resmi tersedia di WICG Scroll-To-Text-Fragment Proposal.