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:
Pada browser, tag tersebut akan ditampilkan seperti ini:<a href="http://started-blogger.blogspot.com/2014/09/backlink-builder.html">Free Backlink Builder<a/>
Free Backlink Builder
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://started-blogger.blogspot.com/2014/09/backlink-builder.html" target="_blank">Free Backlink Builder<a/>
Tampilan pada browser tetap sama:
Free Backlink Builder
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://started-blogger.blogspot.com/2013/03/perbedaan-google-pagerank-dengan-alexa.html" title="Google PageRank dan Alexa Traffic Rank">Perbedaan Google PageRank Dengan Alexa Traffic Rank</a>
berikut tampilan linknya, hover mouse anda di atas link:
Perbedaan Google PageRank Dengan Alexa Traffic Rank
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://started-blogger.blogspot.com/2013/03/perbedaan-google-pagerank-dengan-alexa.html" rel="nofollow">Perbedaan Google PageRank Dengan Alexa Traffic Rank</a>
Gambar dapat pula memiliki link apabila kita menambahkan tag link pada tag gambar.
Tag dasar HTML gambar adalah:
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/AVvXsEi3JGmk5jdjHrHWfc4ffeL8aE45nDvhDku34aDmKV_P0WtQVZhSWoix9yCiexWZcqXpADZcbTFfz57ZyFTbjpiHCcXfa6-1vYmUStYKJXjPrsj7sz_2xSTdCK8L6KBJJBwK6BwhfSewVWqa/s1600/header.png"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEPoUzY21ZDBATpo1d2LCb3-IFzkhfU-LkIhHwy0HEIgoAUPxZl6pVMGSKIL96wK8JHoqe2pKKu2EyGrKk4MzSYoy1nr0a8LqZbNVJQqBSGC5oDX0Y4t4FkoVBAnHruoNd_tgCYpsV8lo/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://started-blogger.blogspot.com/"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEPoUzY21ZDBATpo1d2LCb3-IFzkhfU-LkIhHwy0HEIgoAUPxZl6pVMGSKIL96wK8JHoqe2pKKu2EyGrKk4MzSYoy1nr0a8LqZbNVJQqBSGC5oDX0Y4t4FkoVBAnHruoNd_tgCYpsV8lo/s1600/Header.png"/></a>
Hover mouse di atas gambar di atas dan lihat perbedaan link dengan gambar sebelumnya.
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://started-blogger.blogspot.com"> <img alt="Tips-Tricks Blogger | SEO Blogspot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEPoUzY21ZDBATpo1d2LCb3-IFzkhfU-LkIhHwy0HEIgoAUPxZl6pVMGSKIL96wK8JHoqe2pKKu2EyGrKk4MzSYoy1nr0a8LqZbNVJQqBSGC5oDX0Y4t4FkoVBAnHruoNd_tgCYpsV8lo/s1600/Header.png"/></a>
Jika gambar belum/gagal termuat, dia akan muncul sebagai link dengan anchor text:
- Regards,
0 Response to "Memahami HTML Link, Link Gambar, dan Atribut-atribut Penting"
Posting Komentar