Lighthouse - Cara Memperbaiki Atribut Link Situs
Link tujuan lintas asal yang tidak aman (Links to Cross Origin Destinations are Unsafe) adalah ketika sebuah halaman situs Anda menautkan link ke tujuan halaman yang lain dengan hanya menggunakan atribut target="_blank", maka tautan tersebut akan dianggap tak aman oleh Google. Alasannya apa? Karena ketika sebuah halaman dirayapi oleh google bot maka juga menyertakan tautan-tautan yang ada pada halaman tersebut.
Tautan bermasalah oleh Google Lighthouse
Pada aplikasi audit Lighthouse ini akan menampilkan seberapa layak situs Anda di mata Google, khususnya penyematan link yang ada pada situs Anda akan diindikasikan sebagai berikut:
Tautan tersebut misalnya adalah sambungan topik pembahasan pada sebuah halaman dengan link yang mengarah pada halaman baru (new tab) namun berbeda situs, agar perayapan (crawl) google bot tidak ikut merayapi URL tersebut maka diperlukan atribut seperti rel="nofollow" sebagai URL tanpa mengikut sertakan perayapan (no follow), rel="noopener" sebagai tautan tanpa membuka jendela baru (new window) dan rel="noreferrer" sebagai perintah URL tanpa rujukan (no referral) kepada bot.
Apa fungsi atribut pada Tautan bagi keamanan situs Anda? Mari kita bahas satu persatu secara lebih detilMenggunakan Atribut Target Blank Saja
Target Blank berfungsi untuk membuat halaman baru (new tab) ketika link tersebut diklik oleh pengunjung situs. Ini akan membawa pengunjung situs Anda pada tab baru tanpa berpindah dalam satu tampilan. URL bisa dalam satu situs yang sama (link internal) atau membuka halaman situs lain (link external). Dengan menggunakan atribut ini tanpa atribut lain (noopener, noreferrer) maka situs Anda akan dianggap sebagai situs asal (origin) sedangkan tautan baru yang terbuka sebagai situs tujuan (destination) yang "tak aman" karena juga dianggap saling berkaitan (sinkron) antara situs A dan situs B. Untuk atribut keamanan pada penjelasan berikut:
Contoh Penggunaan
<a href="https://www.contoh.com/judul.html" target="_blank">Judul Terkait</a>
Biasanya digunakan untuk memuat halaman baru dari situs pribadi milik anda sendiri tanpa menutup halaman utama pada peramban dengan memunculkan new tab secara otomatis, ketika pengunjung situs mengklik link tersebut. Selama masih bagian situs yang sama (internal link) maka cara ini dianggap aman oleh google, meski tanpa menggunakan atribut tambahan.
Menggunakan Atribut No-follow
Ketika sebuah URL menggunakan atribut target Blank dan rel nofollow tanpa atribut lain (noopener, noreferrer) maka google tak akan merayapi link tersebut namun dengan catatan bahwa masih "tak aman" karena bot lain (algoritma google) masih bisa menelusuri antara situs asal dengan tujuan sebagai tautan yang rentan terhadap keamanan. Ada yang menyebutkan fungsinya sebagai pencegah afiliasi konteks antara situs A dan B dengan alasan komersial.
Contoh Penggunaan
<a href="https://www.contoh.com/judul.html" target="_blank" rel="nofollow">Judul Terkait</a>Misal situs Anda memiliki kesamaan konten dengan situs B, situs tersebut sebagai perujuk bahwasanya ada pembahasan lain yang lebih pada situs B tanpa menyertakan perayapan google ke situs yang dimaksud, dengan demikian lalulintas (hasil trafik) tersebut tetap milik Anda. Ini berlawanan dengan istilah dofollow pada backlink (situs A tertaut ke B dan situs B tertaut ke A).
Menggunakan Atribut No-opener
Ketika sebuah URL menggunakan atribut target Blank dan rel noopener tanpa atribut lain (noreferrer) maka link tersebut mencegah halaman baru mengakses peoperti window.opener dan diidentifikasikan sebagai halaman lain (bukan satu situs sama) yang diproses secara terpisah. Dengan demikian sumber daya halaman utama situs A bukanlah bagian dari halaman baru tujuan (situs B), namun di situs B masih dapat mengakses sumber daya (konten) dari situs A untuk diproses.
Contoh Penggunaan
<a aria-label="DMCA" href="https://www.dmca.com/Protection/Status.aspx?ID=3bac34a6-7fdd-4846-95c4-15e6bfec3cd7" target="_blank" rel="noopener" title="Check blog Protection Status" class="dmca-badge">
Menggunakan Atribut No-referrer
Ketika sebuah URL menggunakan atribut target Blank dan rel noreferrer tanpa atribut lain (noopener) maka link tersebut akan membuka halaman baru sama fungsinya seperti noopener, bedanya adalah tajuk (sumber daya) situs A tak bisa diakses situs B. Tujuannya agar informasi perujuk dari halaman situs A tidak menyertakan afiliasi (mewakili bagian) konteks situs B, sama halnya atribut nofollow.
Contoh Penggunaan
<a href="https://booking.kai.id" target="_blank" rel="noreferrer">Pesan Tiket Disini</a>Noreferrer digunakan saat halaman landas (situs B) yang dituju dari sebuah URL bukanlah konten (sumber daya) bisa jadi berupa form (pembelian, pemesanan, pendaftaran, voting, jendela PHP, program JavaScript, dll.), sedangkan atribut target blank tetap berfungsi sebagaimana membuka tab baru. No Referrence menandakan bahwa tautan itu bukanlah bagian dari referral (rujukan) dari situs milik Anda, misal Anda tidak bertindak sebagai profit komersial bisnis situs tersebut, sehingga menyembunyikan jejak informasi situs Anda dari situs tersebut.
Menggunakan Atribut Noopener & Noreferrer Saja
Penggunaan atribut rel noopener noreferrer eksekusi dan fungsinya sama dengan target Blank disertai rel noreferrer.
Contoh Penggunaan<a href="https://www.contoh.com/judul.html" rel="noopener noreferrer">Judul Terkait</a>
Kesimpulan
Sebenarnya masih ada banyak lagi tentang jenis-jenis tautan atau link beserta atributnya mungkin penulis akan bahas di kesempatan lain. Sementara yang umum digunakan oleh sebagian besar pengelola situs telah dibahas diatas. Apabila ingin mempelajari lebih mendalam bisa Anda simak pada situs Referensi Berikut
Semoga dengan tutorial ini dapat mengatasi audit permasalahan link yang terdeteksi oleh Google Lighthouse situs Anda. Selamat mencoba & Berkarya