Arti Artribut rel pada HTML & Cara Buat Penomoran Halaman

Dengan menggunakan atribut rel, Anda dapat meninjau hubungan antara dokumen saat ini dengan dokumen lainnya, yang berguna dalam strategi pemberdayaan UX dan optimasi SEO. 

Mari telaah lebih lanjut mengenai arti atribut rel pada HTML serta bagaimana cara membuat penomoran halaman dengan rel di bawah ini.

Arti Atribut rel pada HTML

Dalam struktur kode HTML, terdapat atribut rel yang menjadi komponen dari tag <a> atau tautan untuk mendefinisikan relasi antara masing-masing halaman. rel sendiri adalah singkatan dari relationship yang berarti hubungan. 

Atribut rel juga valid pada <link>, <area>, dan <form>, yang mana nilai yang mendukung tergantung pada elemen dimana atribut ditemukan. Namun, beberapa nilai mungkin hanya relevan pada beberapa subset dari elemen tersebut. 

Arti atribut rel pada HTML adalah atribut yang menentukan hubungan antara dokumen yang tertaut dengan dokumen saat ini. Atribut rel sering digunakan mesin pencari untuk mendapatkan lebih banyak informasi tentang sebuah tautan. 

Atribut rel hanya digunakan ketika terdapat atribut href pada sebuah struktur. Fungsi href adalah untuk menentukan lokasi file atau dokumen yang ditautkan, sedangkan fungsi rel di HTML adalah menandai hubungan antara dokumen yang bersangkutan dengan dokumen yang ditautkan. 

Kemudian, Anda bisa menggunakan nilai atribut rel yang sesuai dengan jenis hubungan antarhalaman. Lebih lanjut, berikut adalah nilai-nilai atribut rel:

• author: Halaman yang dituju adalah halaman penulis.
• alternate: Halaman yang dituju adalah halaman alternatif yang memiliki tujuan yang sama dengan halaman yang sedang dibuka. 
• bookmark. Halaman yang dituju adalah halaman yang sering ditandai sebagai markah. 
• help: Halaman yang dituju adalah halaman bantuan. 
• external: halaman yang dituju adalah halaman di luar bagian dari halaman yang sedang dibuka. 
• next: Halaman yang dituju adalah halaman lanjutan dari yang sedang dibuka. 
• license: Halaman yang dituju adalah halaman lisensi. 
• nofollow: Halaman yang dituju adalah halaman yang tidak diikuti atribusi langsung. 
• noopener: Halaman yang dituju adalah halaman yang berjalan terpisah dan melindungi dari windows.opener. 
• noreferrer: Halaman yang dituju mencegah mesin pencari untuk mengarahkan ke halaman baru. 
• sponsored: Halaman yang dituju adalah halaman iklan. 
• ugc: Halaman yang dituju adalah halaman yang dibuat oleh pengguna (user-generated content)
• tag: tag dari halaman yang sedang dibuka. 
• search: Halaman yang dituju adalah halaman pencarian. 
• prev: Halaman yang dituju adalah konten dari halaman sebelumnya. 

Cara menulis atribut rel adalah dengan menyelipkan atribut rel pada pembuka tag a seperti contoh berikut: 

Kemudian, jika terdapat lebih dari satu nilai pada atribut rel, Anda bisa menulisnya spasi atau koma seperti berikut ini.

Dengan spasi:

Dengan koma:

Kemudian, berikut adalah contoh penggunaan atribut rel pada elemen <link>.

Fungsi atribut rel pada elemen <link> adalah untuk menunjukkan bahwa file yang ditautkan adalah file CSS atau stylesheet, sedangkan fungsi href adalah menunjukkan lokasi file tersebut. 

Anda bisa menggunakan atribut rel pada peramban yang mendukung, seperti Chrome, Edge, Firefox, Safari, dan Opera. 

Atribut rel tidak memiliki nilai default. Jadi, jika atribut dihilangkan atau jika tidak ada nilai dalam atribut yang didukung, maka dokumen tidak memiliki hubungan khusus dengan sumber daya tujuan selain adanya hyperlink di antara keduanya.

Sebagai contoh, jika atribut rel pada <link> dan <form> tidak ada, tidak memiliki kata kunci, atau tidak ada satu atau lebih kata kunci yang dipisahkan spasi di atas, maka elemen tersebut tidak membuat tautan apa pun.

Di sisi lain, <a> dan <area> akan tetap membuat tautan, tetapi tanpa hubungan yang ditentukan.

Penomoran Halaman dengan rel

Selain memahami arti atribut rel pada HTML, Anda juga perlu mengetahui cara menggunakan atribut rel untuk penomoran halaman. 

Seperti yang telah dijelaskan sebelumnya, terdapat berbagai macam nilai atribut rel pada HTML, seperti next dan prev. Dua nilai tersebut dapat Anda gunakan untuk menunjukkan hubungan antara URL komponen dalan rangkaian dengan penomoran halaman. 

Rangkaian tersebut dapat berupa artikel yang memiliki beberapa halaman komponen, karegori produk yang itemnya tersebar di berbagai halaman, atau rangkaian pesan forum yang terbagi menjadi URL berurutan. 

Memberikan markup rel=”next” dan rel=”prev” pada halaman komponen dalam rangkaian dapat menginformasikan mesin pencari untuk menggabungkan properti pengindeksan (seperti tautan) dari URL atau halaman komponen ke rangkaian sebagai satu keseluruhan. 

Artinya, tautan tidak boleh tersebar antara page-1.html, page-2.html, dan seterusnya, tetapi dikelompokkan sesuai urutan. 

Kemudian, markup rel=”next” dan rel=”prev” juga memberikan informasi kepada mesin pencari untuk mengarahkan pengunjung halaman ke URL yang paling relevan. 

Namun, perlu diperhatikan bahwa terrdapat beberapa pengecualian dalam penerapan markup rel=”next” dan rel=”prev”. 

Jika Anda ingin menawarkan halaman “lihat semua” kepada pengunjung situs, Anda perlu mengikuti panduan dari mesin pencari, misalnya Google, untuk mengetahui cara mereka menampilkan halaman “lihat semua”. 

Mesin pencari akan memunculkan halaman “lihat semua” apabila sesuai dengan hasil pencarian daripada menampilkan halaman komponen yang cenderung muncul dengan rel=”next” dan rel=”prev”.

Di sisi lain, jika Anda tidak ingin mesin pencari menampilkan halaman “lihat semua” atau situs Anda memang tidak memiliki halaman tersebut, Anda bisa menggunakan markup rel=”next” dan rel=”prev” seperti yang telah dijabarkan Google pada panduan resminya.