Apa sebenarnya fungsi rel=noopener, noreferrer, dan nofollow

Versi singkat

Atribut rel pada tautan menjelaskan hubungan antara halaman saat ini dan halaman yang ditautkan. Itu terdengar abstrak, tetapi tiga nilai sering sekali muncul dalam pekerjaan web sehari-hari:

<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">
  External resource
</a>

Ketiga token itu sering ditempelkan bersama seolah-olah melakukan satu hal. Padahal tidak.

• noopener adalah kontrol keamanan browser.
• noreferrer adalah kontrol privasi dan analitik.
• nofollow adalah sinyal untuk mesin pencari.

Ketiganya bisa digabungkan, tetapi Anda sebaiknya tahu mengapa masing-masing ada. Menambahkan ketiganya ke setiap tautan keluar tidak selalu salah, tetapi biasanya itu praktik yang malas.

rel=noopener mencegah reverse tabnabbing

rel="noopener" memberi tahu browser agar tidak memberi halaman yang baru dibuka akses ke halaman asal melalui window.opener.

Ini terutama penting saat Anda membuka tautan di tab atau jendela baru dengan target="_blank":

<a href="https://external.example" target="_blank" rel="noopener">
  Open external site
</a>

Tanpa noopener, halaman tujuan mungkin dapat menjalankan JavaScript seperti ini:

window.opener.location = 'https://phishing.example';

Serangan itu umum disebut reverse tabnabbing. Pengguna mengeklik tautan yang sah, masuk ke situs lain, lalu tab asal diam-diam diarahkan ke halaman login palsu atau tujuan berbahaya lainnya.

Browser modern sudah membaik dalam hal ini. Dalam perilaku browser saat ini, target="_blank" umumnya diperlakukan seolah-olah rel="noopener" sudah ada. Itu baik, tetapi bukan berarti atribut eksplisit menjadi tidak berguna. noopener eksplisit tetap berguna karena:

• mendokumentasikan niat Anda;
• melindungi lingkungan browsing lama atau tidak biasa;
• menghindari ketergantungan pada setiap embedded web view agar berperilaku seperti browser desktop modern;
• membuat code review lebih mudah.

Untuk tautan eksternal yang terbuka di tab baru, rel="noopener" adalah default yang masuk akal.

Apakah noopener memengaruhi SEO?

Tidak, tidak secara berarti. noopener adalah untuk perilaku browser. Ia tidak memberi tahu mesin pencari apakah Anda mendukung suatu halaman, apakah ekuitas tautan harus diteruskan, atau apakah tautan itu berbayar.

Jika kebijakan SEO Anda memperlakukan noopener sebagai arahan peringkat, kebijakan itu perlu diedit.

rel=noreferrer menyembunyikan halaman perujuk

rel="noreferrer" memberi tahu browser agar tidak mengirim header HTTP Referer saat pengguna mengikuti tautan.

Ya, header itu secara historis salah eja sebagai Referer. Atributnya dieja noreferrer.

Biasanya, saat pengguna mengeklik tautan dari halaman Anda ke situs lain, tujuan dapat menerima nilai referrer yang menunjukkan dari mana kunjungan berasal. Bergantung pada Referrer-Policy situs Anda, itu bisa berupa URL lengkap, hanya origin, atau tidak ada sama sekali.

Misalnya, tujuan mungkin melihat:

Referer: https://www.example.com/pricing?plan=enterprise

atau hanya:

Referer: https://www.example.com/

Dengan rel="noreferrer", browser seharusnya tidak mengirim header tersebut untuk navigasi itu.

<a href="https://external.example" rel="noreferrer">
  External site
</a>

Dalam praktiknya, noreferrer juga berperilaku seperti noopener di browser modern. Jika Anda menggunakan noreferrer, umumnya Anda tidak memerlukan noopener untuk keamanan pada tautan yang sama. Banyak tim tetap menulis keduanya demi kejelasan:

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External site
</a>

Itu tidak masalah. Redundan, tetapi mudah dibaca.

Kapan noreferrer berguna

Gunakan noreferrer saat URL halaman saat ini tidak boleh terekspos ke tujuan.

Contoh umum:

• tautan dari dashboard privat;
• tautan dari lingkungan pratinjau yang belum dipublikasikan;
• tautan dari URL yang berisi parameter query sensitif;
• tautan di alat admin, antrean moderasi, layar CRM, atau sistem dukungan pelanggan;
• tautan ketika tujuan tidak perlu mengetahui halaman sumber persisnya.

Poin terakhir tidak selalu tentang kerahasiaan. Kadang ini tentang minimisasi data. Jika tujuan tidak perlu mengetahui URL perujuk, jangan kirimkan.

Ini sejalan dengan arah yang lebih luas dalam desain web yang sadar privasi. Browser, pengguna, dan regulator semuanya bergerak ke arah pengiriman lebih sedikit data ambient secara default. Jika Anda meninjau kembali area ini, artikel kami tentang apa yang berubah untuk cookies pada 2026 dan apa yang harus dilakukan membahas pergeseran umum yang sama: lebih sedikit pelacakan tak terlihat, lebih banyak aliran data yang disengaja.

Kompromi analitik

noreferrer dapat merusak atribusi untuk situs yang Anda tautkan. Analitik mereka mungkin mengklasifikasikan kunjungan sebagai traffic langsung, bukan traffic rujukan.

Itu bukan masalah utama Anda, tetapi bisa penting dalam kemitraan, hubungan afiliasi, perjalanan pelanggan, dan ekosistem lintas-domain internal. Jika tim marketing Anda mengharapkan situs partner melihat traffic rujukan dari domain Anda, penerapan noreferrer secara menyeluruh dapat menimbulkan kebingungan.

Untuk banyak tautan editorial biasa, pendekatan yang lebih baik adalah menetapkan header Referrer-Policy di seluruh situs daripada menambahkan noreferrer di mana-mana. Misalnya:

Referrer-Policy: strict-origin-when-cross-origin

Kebijakan itu mengirim URL lengkap untuk navigasi same-origin, hanya mengirim origin ke tujuan cross-origin yang aman, dan tidak mengirim referrer saat berpindah dari HTTPS ke HTTP. Ini adalah default praktis untuk banyak situs.

Jika Anda perlu memeriksa bagaimana header berperilaku di produksi, pemeriksaan HTTP mentah sering kali lebih jelas daripada menebak dari dashboard analitik. Alur kerja dalam toolkit kecil untuk men-debug redirect dan header HTTP di produksi langsung berlaku untuk debugging referrer-policy.

rel=nofollow adalah untuk mesin pencari, bukan browser

rel="nofollow" memberi tahu mesin pencari bahwa Anda tidak ingin mengisyaratkan dukungan terhadap halaman yang ditautkan.

<a href="https://external.example" rel="nofollow">
  User-submitted link
</a>

Awalnya, nofollow diperkenalkan untuk melawan spam komentar. Idenya sederhana: jika tautan dalam komentar tidak meneruskan kredit peringkat, spammer memiliki insentif lebih kecil untuk membanjiri blog dan forum.

Saat ini, Google memperlakukan nofollow sebagai petunjuk, bukan arahan absolut. Perbedaan itu penting. Artinya mesin pencari dapat menggunakan tautan untuk discovery atau sistem peringkat dalam beberapa konteks, tetapi Anda jelas memberi sinyal bahwa tautan tersebut tidak seharusnya diperlakukan sebagai dukungan editorial normal.

Kapan menggunakan nofollow

Gunakan nofollow saat Anda menautkan tetapi tidak ingin menjamin tujuan tersebut.

Contoh yang masuk akal meliputi:

• tautan buatan pengguna yang tidak tepercaya;
• tautan di komentar atau profil publik;
• tautan ke situs yang disebut sebagai contoh perilaku buruk;
• tautan yang disertakan sebagai referensi tetapi bukan dukungan;
• tautan di area dengan moderasi terbatas.

Untuk tautan berbayar atau bersponsor, lebih baik gunakan rel="sponsored". Untuk konten buatan pengguna, lebih baik gunakan rel="ugc". Anda dapat menggabungkan nilai jika diperlukan:

<a href="https://example.com" rel="ugc nofollow">
  User profile link
</a>

Jika Anda menjalankan formulir publik, komentar, direktori, atau halaman profil, atribut tautan hanyalah satu bagian dari masalah penyalahgunaan. Spam biasanya dimulai lebih awal dalam alur pengiriman. Kami memiliki pembahasan terpisah tentang mengapa formulir kontak Anda adalah liabilitas spam terbesar Anda, dan pelajaran yang sama berlaku di sini: jangan berharap nofollow menutupi moderasi yang lemah.

Apa yang tidak dilakukan nofollow

nofollow tidak mencegah pengguna mengeklik tautan. Ia tidak memblokir browser dari mengirim referrer. Ia tidak menyembunyikan tujuan dari tampilan. Ia tidak mengamankan target="_blank".

Ia juga tidak menjamin bahwa suatu URL tidak akan pernah di-crawl. Jika mesin pencari menemukan URL tersebut di tempat lain, mereka tetap dapat meng-crawl-nya. Jika Anda perlu mencegah pengindeksan, gunakan kontrol robots yang sesuai pada halaman tujuan, seperti noindex, bukan atribut nofollow pada tautan milik orang lain.

Kombinasi umum

Tautan eksternal yang terbuka di tab baru

<a href="https://external.example" target="_blank" rel="noopener">
  External resource
</a>

Ini adalah baseline. Ini menangani masalah keamanan yang muncul karena membuka konteks browsing baru.

Jika Anda juga tidak ingin mengirim data referrer:

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External resource
</a>

Penempatan berbayar

<a href="https://sponsor.example" rel="sponsored">
  Sponsor site
</a>

Anda dapat menambahkan noopener jika tautan terbuka di tab baru:

<a href="https://sponsor.example" target="_blank" rel="sponsored noopener">
  Sponsor site
</a>

Jangan gunakan nofollow sebagai pengganti samar untuk mengungkapkan tautan berbayar. Mesin pencari kini memiliki nilai yang lebih spesifik untuk itu: sponsored.

Tautan buatan pengguna

<a href="https://user-submitted.example" rel="ugc nofollow">
  User-submitted site
</a>

Ini memberi tahu mesin pencari bahwa tautan tersebut dikontribusikan oleh pengguna dan tidak seharusnya diperlakukan sebagai suara editorial normal.

Tautan internal

Sebagian besar tautan internal tidak memerlukan nilai-nilai ini.

Jangan menambahkan nofollow ke tautan internal sebagai taktik sculpting rutin. Biasanya itu menciptakan lebih banyak kebingungan daripada manfaat. Jika suatu halaman tidak seharusnya diindeks, tangani secara langsung. Jika suatu halaman tidak seharusnya di-crawl, pikirkan dengan cermat tentang aturan robots, autentikasi, canonicalization, dan arsitektur situs.

Untuk tautan internal yang terbuka di tab baru, noopener tetap tidak berbahaya dan mungkin sesuai. Tetapi pertanyaan yang lebih baik adalah mengapa tautan internal itu perlu tab baru sama sekali.

Kebijakan praktis untuk tim

Gaya penulisan internal yang sederhana mencegah sebagian besar kesalahan:

1. Tambahkan rel="noopener" ke tautan dengan target="_blank", terutama tautan eksternal.
2. Tambahkan noreferrer hanya saat menyembunyikan URL sumber memang disengaja.
3. Tambahkan nofollow hanya saat Anda tidak mendukung tujuan tersebut.
4. Gunakan sponsored untuk tautan berbayar dan ugc untuk tautan buatan pengguna.
5. Jangan gunakan atribut tautan sebagai pengganti kontrol akses, moderasi, atau aturan pengindeksan.

Bagian pentingnya adalah niat. Setiap token dalam rel harus menjawab pertanyaan spesifik:

• Keamanan: apakah halaman baru harus diisolasi dari opener?
• Privasi: apakah tujuan harus menerima informasi referrer?
• SEO: apakah kita mendukung tautan ini sebagai referensi editorial?

Jika tidak ada orang di tim yang dapat menjawab pertanyaan tersebut, atribut itu kemungkinan besar adalah cargo cult HTML.

Cara menguji apa yang terjadi

Untuk noopener, buka tautan dan periksa apakah tujuan dapat mengakses window.opener. Pada halaman uji terkontrol, window.opener seharusnya bernilai null saat noopener aktif.

Untuk noreferrer, periksa request jaringan di sisi tujuan atau gunakan request logger di lingkungan uji. Browser DevTools dapat menampilkan header request keluar, tetapi log sisi server sering kali lebih andal.

Untuk nofollow, pengujian tidak langsung karena ini adalah interpretasi mesin pencari, bukan perilaku browser. Pemeriksaan terbaik Anda adalah inspeksi sumber: pastikan HTML yang dirender berisi nilai rel yang diharapkan. Jika framework frontend Anda menulis ulang tautan, periksa DOM final, bukan hanya template.

Intinya

Atribut-atribut ini kecil, tetapi berada di persimpangan keamanan, privasi, dan SEO. Memperlakukan semuanya seolah dapat saling menggantikan menciptakan kebiasaan buruk.

Gunakan noopener secara luas pada tautan tab baru. Gunakan noreferrer secara sengaja saat privasi referrer penting. Gunakan nofollow saat Anda membuat pernyataan yang menghadap mesin pencari tentang dukungan. Dan saat tautan berbayar atau dibuat pengguna, gunakan nilai modern yang lebih spesifik: sponsored dan ugc.

Itu sudah cukup untuk sebagian besar situs. Tujuannya bukan menghias setiap tautan. Tujuannya adalah membuat setiap tautan memberi tahu browser dan mesin pencari persis apa yang perlu mereka ketahui.