Jika kamu seorang pengguna WordPress atau aktif mengelola situs web, mungkin kamu pernah melihat atribut rel=”noopener noreferrer” saat menyisipkan tautan di kontenmu. Bagi sebagian orang, istilah ini terdengar teknis dan membingungkan. Namun, memahami fungsinya justru bisa membantumu meningkatkan keamanan situs dan privasi pengguna.
Secara sederhana, atribut ini adalah bagian dari HTML yang digunakan ketika kita ingin membuka tautan di tab baru, khususnya dengan target=”_blank”. Tapi jangan salah, membuka tautan di tab baru tanpa pengaman bisa membuka celah bagi pelaku kejahatan siber. Di sinilah noopener dan noreferrer hadir untuk memberikan lapisan perlindungan tambahan.
Apa Itu Noopener dan Noreferrer?
Noopener dan Noreferrer adalah dua atribut HTML yang biasa ditambahkan pada tautan eksternal yang dibuka di tab baru untuk meningkatkan keamanan dan privasi pengguna. Noopener berfungsi mencegah halaman yang dibuka lewat tautan tersebut mendapatkan akses ke jendela asal melalui JavaScript, sehingga melindungi pengguna dari risiko serangan seperti phising atau pengambilalihan sesi.
Sementara itu, Noreferrer tidak hanya memberikan perlindungan serupa dengan Noopener, tetapi juga mencegah browser mengirimkan informasi perujuk (referrer) ke situs tujuan, sehingga privasi pengguna lebih terjaga dan data asal kunjungan tidak diteruskan ke website target.
Keduanya tidak berdampak langsung pada SEO, namun sangat direkomendasikan untuk menjaga keamanan dan privasi saat menautkan ke situs eksternal.
Noopener: Pengaman Tambahan Utama
Atribut noopener berfungsi sebagai pengaman tambahan yang menghalangi halaman tujuan (yang dibuka di tab baru) untuk mengakses atau memanipulasi halaman asal. Tanpa noopener, ada potensi serangan yang dikenal sebagai tabnabbing. Ini adalah teknik di mana halaman baru bisa mengubah konten atau bahkan mencuri data dari halaman sebelumnya—tanpa kamu sadari.
Sebagai ilustrasi, bayangkan kamu mengklik sebuah tautan dari artikel blog, lalu tab baru terbuka memuat situs berbahaya. Tanpa noopener, situs tersebut bisa menyusup kembali ke tab sebelumnya, misalnya mengubah halaman login atau mencuri kredensialmu. Mengerikan, bukan?
Dengan menambahkan rel=”noopener” di tautan yang memakai target=”_blank”, kita memutus hubungan kontrol antara dua halaman tersebut. Contoh penulisan yang aman:
<a href=”https://namadomainwebsite.com” target=”_blank” rel=”noopener noreferrer”>Kunjungi Situs</a>
Noreferrer: Menjaga Privasi Pengunjung
Sementara itu, noreferrer bekerja di sisi yang berbeda—lebih pada perlindungan privasi. Saat seseorang mengklik sebuah tautan, informasi tentang dari mana mereka berasal (disebut “referrer”) biasanya dikirim ke situs tujuan. Referrer ini bisa berupa URL halaman yang sedang dikunjungi, termasuk parameter yang bisa saja mengandung data sensitif.
Nah, dengan rel=”noreferrer”, informasi asal tersebut tidak ikut dikirim. Ini sangat berguna bila kamu tidak ingin situs eksternal mengetahui dari halaman mana pengunjung datang, atau jika kamu ingin menjaga data pengguna agar tetap anonim.
Namun perlu dicatat, penggunaan noreferrer membuat data di Google Analytics menjadi tidak lengkap, trafik dari tautan semacam ini tidak akan tercatat sebagai referral, melainkan sebagai direct traffic. Artinya, kamu tidak bisa melacak asal klik secara detail melalui alat analitik biasa.
Berikut contoh penggunaannya:
<a href=”https://www.example.com” rel=”noreferrer”>Menuju Example.com</a>
Kombinasi rel=”noopener noreferrer” idealnya digunakan bersama target=”_blank” untuk dua alasan utama:
- Keamanan: noopener melindungi pengguna dari potensi kendali atau manipulasi halaman oleh tab berbahaya.
- Privasi: noreferrer menjaga agar informasi asal tidak dibocorkan ke pihak ketiga.
Jadi, saat kamu ingin membuka tautan di tab baru dan menjaga keamanan serta privasi pengunjung, atribut ini adalah senjata ampuh yang sebaiknya tidak kamu abaikan.
5 Pengaruh Baik dari Atribut Noopener dan Noreferrer
Berikut adalah 5 pengaruh baik dari penggunaan atribut Noopener dan Noreferrer beserta penjelasannya:
1. Meningkatkan Keamanan Pengguna
Noopener mencegah halaman baru yang dibuka dari tautan eksternal mendapatkan akses ke jendela asal melalui JavaScript, sehingga menghindari risiko serangan seperti tabnabbing atau pengambilalihan sesi yang dapat merugikan pengguna.
2. Melindungi Privasi Pengunjung
Noreferrer mencegah browser mengirimkan informasi referer (asal tautan) ke situs tujuan, sehingga data sensitif seperti URL asal kunjungan tidak bocor dan privasi pengguna lebih terjaga.
3. Mengurangi Risiko Penyusupan dan Serangan XSS
Dengan mengisolasi proses antara halaman asal dan halaman tujuan, Noopener membantu mencegah serangan Cross-Site Scripting (XSS) yang bisa memanipulasi konten atau mencuri data pengguna.
4. Meningkatkan Kepercayaan dan Kenyamanan Pengguna
Penggunaan kedua atribut ini menunjukkan bahwa pemilik situs peduli dengan keamanan dan privasi pengunjung, sehingga pengunjung merasa lebih aman dan nyaman saat menjelajah website Anda.
5. Tidak Mengganggu SEO dan Link Juice
Meskipun Noreferrer mencegah pengiriman data referer, atribut ini tidak menghalangi mesin pencari untuk merayapi tautan dan meneruskan nilai SEO (link juice), sehingga tidak merugikan peringkat situs Anda.
Baca Juga: Cara Membuat Meta Tag SEO Friendly, Cari Tahu Sekarang
Kapan Waktu yang Tepat Menggunakan noopener noreferrer?
Sekarang setelah tahu fungsi dan keunggulan dari noopener noreferrer, pertanyaan berikutnya adalah: haruskah semua tautan menggunakan atribut ini?
Jawabannya: tidak selalu. Pemakaian atribut ini harus disesuaikan dengan konteks dan jenis tautan.
1. Perlu: Saat Menyisipkan Tautan Eksternal Berisiko
Penggunaan rel=”noopener noreferrer” sangat disarankan ketika kamu menyisipkan tautan ke situs eksternal, terutama jika:
- Situs tujuan tidak sepenuhnya kamu kenal atau percaya.
- Kamu ingin menjaga agar halamanmu tidak bisa dikendalikan oleh pihak luar.
- Kamu ingin melindungi data pengguna dari pelacakan yang tidak diinginkan.
Dengan menerapkan atribut ini, kamu menunjukkan bahwa kamu peduli terhadap keamanan pengunjung, dan Google pun menganggap itu sebagai sinyal positif dari sisi teknis situs.
2. Tidak Perlu untuk Tautan Internal
Berbeda halnya dengan tautan internal, yakni tautan yang menuju ke halaman lain di dalam situs kamu sendiri. Dalam konteks ini, penggunaan noopener noreferrer tidak hanya tidak perlu, tapi bisa jadi kontraproduktif, terutama untuk keperluan SEO.
Mengapa? Karena:
- Tautan internal tidak menimbulkan risiko kontrol tab yang sama seperti tautan eksternal.
- Kamu ingin Google bisa melacak hubungan antar halaman dalam situs untuk memahami struktur dan relevansinya.
- Penggunaan noreferrer akan mengaburkan data rujukan internal, sehingga menyulitkan analisis perilaku pengguna melalui alat seperti Google Analytics.
Jadi, jika kamu sedang membangun strategi internal linking untuk memperkuat struktur SEO on-page, sebaiknya atribut ini tidak digunakan.
3. Perlu Saat: Menjaga Keseimbangan antara Keamanan SEO
Intinya, gunakan rel=”noopener noreferrer” dengan bijak. Jangan asal tempel di semua tautan, tapi gunakan saat memang dibutuhkan—terutama untuk tautan yang dibuka di tab baru dan menuju ke situs luar.
Dengan pendekatan yang seimbang, kamu bisa menjaga keamanan pengunjung sekaligus tetap optimal dari sisi SEO dan analitik.
Baca Juga: Google Tag Manager: Manfaat, Fungsi dan Cara Menggunakannya
Optimasi website bukan hanya soal konten, tapi juga tentang bagaimana Anda menjaga keamanan dan performa link yang digunakan. Agar setiap aspek SEO di website Anda lebih tertata dengan baik, serahkan pada SEO Agency terpercaya seperti Toprank Indonesia. Melalui layanan Jasa SEO yang menyeluruh, Toprank Indonesia siap mendampingi Anda mewujudkan website yang tidak hanya aman, tapi juga powerful untuk mendukung bisnis online Anda.
Referensi:
https://linkbuilder.io/rel-noopener-noreferrer/
https://help.ahrefs.com/en/articles/4684931-noreferrer-noopener-nofollow-attributes
