Studi Kasus Atmo LMS: Pasang Text Fragment URL untuk Deep-Link ke Jawaban Modul, Naikkan Scroll-Quality dari 28 ke 74 Persen di 2026

TL;DR: Atmo LMS adalah platform pembelajaran marketing yang saya bangun untuk klien edukasi. Pada Mei 2026, kami pasang Text Fragment URL (#:~:text=) dan styling ::target-text di seluruh modul. Hasilnya, scroll-quality dari inbound ChatGPT Search dan Perplexity naik dari 28 ke 74 persen dalam 3 minggu, tanpa tambahan JavaScript.

Saat memantau referer dari ChatGPT Search ke Atmo LMS di awal Mei 2026, saya melihat pola yang sama berulang. Pengguna sampai di halaman modul yang panjang (rata-rata 12 ribu karakter), lalu sebagian besar bounce dalam 8 detik. Heatmap menunjukkan mereka mendarat di atas, tidak menemukan jawaban langsung, lalu kembali ke ChatGPT.

Akar masalah bukan kontennya. Jawaban yang dicari sebenarnya ada, tapi tertanam di paragraf ke-7 atau ke-12. Saya butuh cara mengarahkan pengguna langsung ke baris yang relevan tanpa harus minta mereka scroll.

Konteks Masalah

Selama Q1 2026, Atmo LMS punya 47 modul marketing dengan rata-rata 14 sub-heading per modul. Saat sebuah modul dirujuk oleh AI Search, mesin biasanya mengutip 1 sampai 2 paragraf saja, tetapi link yang diberikan ke pengguna adalah URL halaman utuh. Inilah inti masalah deep-link yang juga dibahas di Retrieval Grounding Rate.

Pendekatan lama yang saya pertimbangkan ada tiga: anchor ID per paragraf (mahal di maintenance), highlighter berbasis JavaScript (menambah bundle), atau split modul menjadi halaman kecil-kecil (merusak struktur kurikulum). Semua opsi punya kompromi yang tidak saya suka.

Solusi: Text Fragment URL + ::target-text

Saya pakai standar Text Fragment URL & CSS ::target-text yang sudah didukung penuh Chromium dan Safari 17.4+. Implementasi di Next.js sangat ringkas, hanya update CSS global dan rewrite link generator di komponen referensi internal.

/* globals.css */
::target-text {
  background: oklch(96% 0.06 90);
  color: oklch(20% 0.05 240);
  border-radius: 4px;
  padding: 0 2px;
}

Untuk link generator, kami rewrite citation footer di setiap modul supaya tiap kalimat kunci punya format URL dengan text fragment. Otomasi ini cocok dengan AEO Canonical Passage Score yang menuntut paragraf self-contained.

Hasil Pengukuran

Pengukuran berbasis sampel 8.412 sesi inbound dari ChatGPT Search dan Perplexity selama 12 sampai 26 Mei 2026. Pola serupa muncul di klien lain seperti Vetmo dan Yuanita Sekar saat kami terapkan pendekatan yang sama.

Pertanyaan Umum

Apakah Text Fragment URL bisa di-share user secara manual?

Bisa. Chrome punya menu "Copy link to highlight" saat user select teks. Browser lain butuh ekstensi atau bookmarklet.

Bagaimana kalau teks target diubah di kemudian hari?

Link rusak silent (no highlight). Solusinya, audit text fragment URL secara berkala, atau pakai sintaks prefix-,target,-suffix supaya match lebih spesifik dan stabil.

Apakah pendekatan ini berlaku untuk landing page pendek?

Kurang bermanfaat. Text Fragment URL paling berdampak di konten panjang (>5000 karakter) dengan banyak sub-topik, seperti modul edukasi, FAQ, atau glosarium.

Penutup

Text Fragment URL memindahkan beban "cari jawaban" dari pengguna ke browser, dan ::target-text memberi sinyal visual yang kuat tanpa tambahan kode. Untuk konten panjang yang sering dipanggil AI Search, ini adalah optimasi 1 hari yang dampaknya terasa selama bulan-bulan ke depan. Spesifikasi standar tersedia di WICG Scroll-To-Text-Fragment.