noopener dan noreferrer

Di dunia web modern, tampilan antarmuka dan pengalaman pengguna bukanlah satu-satunya hal penting. Di balik setiap tautan yang Anda klik, ada kode HTML yang bisa berdampak besar pada keamanan situs, privasi pengguna, hingga efektivitas SEO. 

Dua atribut HTML yang kerap dibicarakan di kalangan developer dan SEO specialist adalah rel=”noopener” dan rel=”noreferrer”. Meskipun sederhana secara tampilan, keduanya memiliki fungsi krusial yang wajib dipahami siapapun yang berkecimpung di dunia web.

Apa itu noopener dan noreferrer

Secara teknis, noopener dan noreferrer adalah nilai dari atribut rel pada elemen <a> dalam HTML. noopener dan noreferrer sering digunakan bersamaan saat membuat tautan yang dibuka di tab baru, yaitu menggunakan target=”_blank”. Tanpa disadari, penggunaan target=”_blank” memiliki celah keamanan yang bisa dimanfaatkan pihak jahat. Oleh karena itu, noopener dan noreferrer hadir untuk menutup celah tersebut.

Fungsi utama noopener adalah mencegah tab baru (yang dibuka dari klik link) untuk memiliki akses terhadap objek window.opener. Sedangkan noreferrer tidak hanya menutup akses window.opener, tapi juga menyembunyikan informasi referrer dari situs tujuan. Walau terdengar teknis, hal ini memiliki dampak nyata pada keamanan dan SEO.

Mengapa noopener Penting untuk Keamanan

Ketika menggunakan target=”_blank” tanpa rel=”noopener”, browser akan secara otomatis menghubungkan halaman baru dengan halaman asal melalui objek JavaScript window.opener. Masalahnya, halaman baru bisa memanipulasi atau bahkan mengalihkan halaman asal dengan skrip tertentu.

Inilah yang dikenal sebagai tabnabbing, serangan di mana tab baru mengganti tab lama dengan halaman palsu untuk mencuri data pengguna. Misalnya, seseorang membuka tautan eksternal dari situs Anda, dan tab baru tersebut kemudian mengganti halaman asal Anda menjadi halaman login palsu untuk mengambil data akun. Hal ini tentu sangat berbahaya.

Penggunaan rel=”noopener” adalah langkah sederhana namun efektif untuk mencegah tabnabbing. Hal ini menjadikan setiap tab benar-benar independen satu sama lain dan meningkatkan perlindungan bagi pengguna situs.

Fungsi noreferrer dalam Melindungi Privasi

Berbeda dengan noopener, atribut noreferrer bekerja lebih pada sisi privasi. Saat pengguna mengklik link menuju situs lain, browser secara default akan mengirimkan informasi asal kunjungan (referrer), biasanya berupa URL lengkap dari halaman. Hal ini bisa menjadi masalah jika URL tersebut mengandung informasi sensitif seperti parameter query yang menyimpan ID pengguna, kata kunci pencarian, atau token otentikasi.

rel=”noreferrer” mencegah browser mengirimkan informasi tersebut ke situs tujuan. Artinya, situs tujuan tidak akan tahu dari mana pengunjung berasal. Ini sangat berguna jika Anda ingin menjaga privasi pengunjung atau mencegah penyalahgunaan data URL oleh situs pihak ketiga.

Kapan Harus Menggunakan noopener dan noreferrer

Dalam praktik terbaik pengembangan web, setiap link eksternal yang dibuka di tab baru harus menyertakan setidaknya rel=”noopener”. Ini penting demi keamanan situs dan kenyamanan pengguna.

Sementara itu, rel=”noreferrer” bisa digunakan secara selektif. Jika Anda tidak ingin situs tujuan mengetahui sumber trafik Anda, atau jika URL Anda mengandung data sensitif, maka sebaiknya gunakan noreferrer. Sebagai catatan, noreferrer juga secara otomatis mencakup fungsi noopener.

Namun perlu diingat, ada beberapa kasus di mana Anda ingin situs tujuan mengetahui sumber trafik, misalnya saat membangun backlink untuk keperluan SEO. Nah, di sinilah Anda harus berhati-hati, karena penggunaan noreferrer bisa menonaktifkan jejak referensi yang berguna untuk SEO tracking.

Apakah noreferrer Berdampak pada SEO?

Salah satu pertanyaan umum dari praktisi SEO adalah, apakah penggunaan rel=”noreferrer” memengaruhi SEO? Jawabannya: secara langsung tidak, namun secara tidak langsung bisa memengaruhi pelacakan trafik.

Jika Anda mengelola situs dan berharap mendapatkan kredit referensi dari backlink (misalnya dalam kampanye digital atau SEO), maka noreferrer akan menghalangi situs tujuan untuk mengetahui bahwa kunjungan berasal dari Anda. 

Google memang mengandalkan berbagai sinyal, termasuk tautan dan referrer, untuk menilai kredibilitas sebuah halaman. Jadi dalam konteks backlink building, Anda harus bijak dalam menggunakan atribut ini.

Haruskah Menggunakan noopener dan noreferrer Sekaligus?

Dalam banyak kasus, jawaban terbaik adalah ya. Kombinasi noopener dan noreferrer adalah solusi paling aman dan universal untuk semua jenis browser. Beberapa browser lama belum sepenuhnya mendukung pemisahan fungsi kedua atribut ini, sehingga kombinasi keduanya memberikan perlindungan maksimal dari sisi keamanan dan privasi.

Namun, jika sedang membuat link dalam konteks SEO dan ingin memastikan situs tetap mendapatkan kredit dari backlink, maka cukup gunakan rel=”noopener” saja dan hindari noreferrer.

Dalam dunia pengembangan web dan SEO, detail kecil seperti atribut HTML bisa berdampak besar. noopener dan noreferrer bukan sekadar atribut tambahan, melainkan lapisan perlindungan penting bagi keamanan pengguna dan strategi optimasi situs. 

Bagi yang serius membangun SEO dan ingin menggunakan jasa SEO dan jasa backlink berkualitas tanpa risiko, seedbacklink hadir sebagai solusi terpercaya. seedbacklink menyediakan jasa backlink media dari situs-situs terpercaya serta jasa backlink blog.

Tidak hanya itu, tersedia pula jasa press release untuk meningkatkan eksposur dan kredibilitas situs secara organik. Melalui pendekatan yang mematuhi pedoman Google dan memperhatikan keamanan link, seedbacklink membantu untuk membangun tautan yang aman, kuat, dan berdampak nyata bagi pertumbuhan digital.