HTML link atau hyperlink, adalah kata, sekumpulan kata,
ataupun gambar yang apabila di-klik akan menuju ke dokumen/halaman lain atau
bagian lain dari dokumen/halaman yang sama. Link di dalam dunia web tentu
saja selalu kita jumpai dan sering kita fungsikan. Dalam dunia blog dan para
blogger, sangat penting untuk mengetahui hal mendasar mengenai HTML link
berserta atribut-atribut pentingnya agar dapat membuat navigasi link yang
sesuai dengan yang diinginkan dan dibutuhkan, baik oleh pemilik blog itu
sendiri maupun bagi pengunjung.
Tag dasar HTML link
(hyperlink) adalah <a>, yang bisa digunakan dengan atribut href yang
mengacu ke dokumen lain dan juga untuk membuat bookmark dengan menggunakan
atribut name.
Kode HTML untuk sebuah link
adalah:
<a href="url">anchor text<a/>
Kita lihat disitu digunakan
atribut inti href yang mengacu ke url dari halaman yang dituju, sedangkan
anchor text berada di antara dua tag a pembuka: <a>, dan
penutup: </a>.
Contoh:
<a
href="http://buka-rahasia.blogspot.com/p/free-backlink-builder-get-quality.html">Free
Backlink Builder<a/>
Pada browser, tag tersebut
akan ditampilkan seperti ini:
Selain atribut inti href,
terdapat pula beberapa atribut penting lain yang dapat ditambahkan pada tag
<a>, misalnya target, name, rel, title, dan masih banyak lagi lainnya.
Pada kesempatan kali ini saya akan membahas beberapa atribut yang lazim dan
fungsional saja untuk blog/website:
1. Target
Atribut target digunakan
sebagai perintah pada browser untuk menampilkan dokumen dengan cara yang lebih
spesifik. Secara default tanpa atribut target, browser akan membuka halaman
tertentu pada window/tab yang sama. Dengan atribut traget, kita bisa menampilkan
suatu halaman di tab/window lain yang lebih baru atau bagian frame lain pada
suatu halaman web (bagi halaman web yang memiliki elemen frame).
contoh:
<a
href="http://buka-rahasia.blogspot.com/p/free-backlink-builder-get-quality.html" target="_blank">Free
Backlink Builder<a/>
Tampilan pada browser tetap
sama:
Silahkan klik link tersebut
untuk melihat perbedaanya dengan link yang di atasnya.
Target memiliki
perintah bermacam-macam, misalnya self, parent, top, new, dan lain-lain. untuk
melihat tutorial mengenai atribut target, membuat link terbuka di window/tab
baru, dan membuat seluruh link blog secara otomatis terbuka di window/tab baru,
silahkan buka: Cara Membuat Link Terbuka di Window/Tab Baru dan Variasinya.
2.Title
Title adalah bagian dari
link yang berfungsi memberikan penjelasan yang lebih detil ataupun sama
mengenai sebuah link. Title muncul sebagai tooltip ketika mouse berada di atas
link.
Contoh penggunaan atribut
title:
<a href="http://buka-rahasia.blogspot.com/2011/05/cara-membuat-menu-breadcrumbs-blogger.html" title="tutorial
lengkap membuat menu breadcrumbs di blogger">Cara Membuat
Menu/Navigasi Breadcrumbs di Blogger/Blogspot</a>
berikut tampilan linknya,
hover mouse anda di atas link:
3. Rel (relationship)
Atibut rel menunjukkan
keterkaitan dengan dokumen/halaman yang sama atau dokumen/halaman lain yang
dituju. Atribut ini bersifat invisible bagi browser dan difungsikan sebagai
informasi tentang sebuah link bagi search engine. Ada begitu banyak perintah
pada atribut rel, yang paling kita kenal adalah rel="nofollow", yang
merupakan perintah bagi search engine untuk mengabaikan suatu link pada sebuah
halaman website/blog. atribut rel="nofollow" utamanya digunakan untuk
menghindari spam. Dalam dunia SEO, atribut ini digunakan oleh blogger atau
webmaster pada link-link yang tidak ingin di-indeks oleh Google, biasanya untuk
menghindari link farm dan meyeimbangkan persentase jumlah inbound dan outbound
links, karena jumlah outbound link yang melebihi jumlah inbound link dapat
berakibat buruk pada SEO blog/website.
Contoh penggunaan
atributnya:
<a
href="http://buka-rahasia.blogspot.com/2011/05/cara-membuat-menu-breadcrumbs-blogger.html" rel="nofollow">Cara
Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot</a>
Gambar dapat pula memiliki
link apabila kita menambahkan tag link pada tag gambar.
Tag dasar HTML gambar
adalah:
<img src="url gambar"/>
Kita dapat membuat gambar
mengandung link dengan memasukkannya diantara tag link, sebagaimana memasukkan
anchor text:
<a href=url yang dituju"><img src="url gambar"/><a/>
Secara default, ketika kita
mengupload dan menghosting gambar di situs-situs tertentu dan juga di
Blogger/Blogspot, gambar yang diupload secara otomatis telah ditanami link.
Link tersebut menuju ke url gambar itu sendiri. Sebagai contoh adalah gambar
berikut (hover mouse ke atas gambar dan lihat link pada footer browser):
Ketika mengupload ke
Blogger (i.e Picasa Web Album), secara otomatis gambar dan link akan memiliki
url yang sama:
(contoh tanpa CSS Styling)
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNFKUhONCDs_lTRhVde6gQXRifP1jboevM3pkQ8iYDL0st__XKh8AC6ZvS0X2c5G6Sd64kFsmp8Vd08P-bPjYBU0mvCkUz3rRmkZuaQQTI3ehWoh02rL02Gv28204FBLGfIU56c9cjujf-/s1600/header.png">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNFKUhONCDs_lTRhVde6gQXRifP1jboevM3pkQ8iYDL0st__XKh8AC6ZvS0X2c5G6Sd64kFsmp8Vd08P-bPjYBU0mvCkUz3rRmkZuaQQTI3ehWoh02rL02Gv28204FBLGfIU56c9cjujf-/s1600/header.png"/></a>
Untuk membuat gambar
memiliki link ke halaman blog/website yang diinginkan, maka harus mengganti
link default pada tag <a>:
<a href="http://buka-rahasia.blogspot.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNFKUhONCDs_lTRhVde6gQXRifP1jboevM3pkQ8iYDL0st__XKh8AC6ZvS0X2c5G6Sd64kFsmp8Vd08P-bPjYBU0mvCkUz3rRmkZuaQQTI3ehWoh02rL02Gv28204FBLGfIU56c9cjujf-/s1600/header.png"/></a>
Bagi dunia SEO, link
tersebut menjadi tidak sia-sia karena tidak menuju ke url gambar, padahal bukan
gambar itu yang sedang dioptimasi, kecuali bagi yang memang ingin gambarnya
di-SEO-kan. Untuk memperkuat lagi dan agar search engine dapat membacanya,
tambahkan atribut alt. Atribut ini akan dibaca
sebagai anchor text oleh search engine. Alt berfungsi
menjadi anchor text yang muncul di browser ketika gambar gagal dimuat, sehingga
pengunjung tetap dapat melihat ada link di bagian tertentu halaman
blog/website.
Contoh penggunaan
atribut alt:
<a href="http://buka-rahasia.blogspot.com">
<img alt="Tips-Tricks Blogger | SEO Blogspot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNFKUhONCDs_lTRhVde6gQXRifP1jboevM3pkQ8iYDL0st__XKh8AC6ZvS0X2c5G6Sd64kFsmp8Vd08P-bPjYBU0mvCkUz3rRmkZuaQQTI3ehWoh02rL02Gv28204FBLGfIU56c9cjujf-/s1600/header.png"/></a>
Jika gambar belum/gagal
termuat, dia akan muncul sebagai link dengan anchor text:
Okay, itu tadi sekilas
mengenai HTML link & Image link,
silahkan bereksperimen dengan anchor text, atribut link, dan juga link gambar.
Thanks
.
Tidak ada komentar:
Posting Komentar