Cara Membuat Anchor Text, Panduan Lengkap Dengan Contoh

Cara Membuat Anchor Text, Panduan Lengkap Dengan Contoh

Cara Membuat Anchor Text – Elemen anchor digunakan untuk membuat hyperlink antara sumber anchor dan tujuan anchor. Sumber adalah teks, gambar, atau tombol yang menautkan ke sumber daya lain dan tujuan adalah sumber daya yang ditautkan oleh anchor sumber.

Hyperlink adalah salah satu teknologi dasar yang menjadikan web sebagai jalan raya informasi, dan memahami cara menggunakan elemen anchor adalah salah satu hal pertama yang perlu Anda kuasai saat mempelajari HTML.

Berikut Panduan Cara Membuat Anchor Text Lengkap Dengan Contoh untuk pemula

Cara Membuat Anchor Text Element

Tag elemen anchor adalah huruf “a” yang dikelilingi oleh kurung sudut seperti ini: .<a> Atribut pembuka dan penutup diperlukan, dan semua konten di antara tag membentuk sumber anchor.

Jika kita ingin menggunakan hanya satu kata sebagai anchor, kita cukup membungkus <a>kata</a> itu dalam tag anchor. 

Kami juga dapat membungkus seluruh paragraf dalam tag anchor jika kami ingin seluruh paragraf ditautkan ke suatu tempat. 

<!--Kita juga bisa menggunakan gambar sebagai elemen anchor--> <a><img src="https://example.com/image-file.png" /></a>

Sementara contoh di atas akan menghasilkan elemen anchor, ini tidak banyak digunakan karena belum menyertakan instruksi tambahan apa pun. Saat ini elemen anchor ini tidak terhubung dengan apa pun. Untuk menautkan jangkar sumber ke anchor tujuan, kita perlu menerapkan beberapa atribut tambahan ke elemen anchor.

Dalam tutorial singkat Cara Membuat Anchor Text ini saya akan membahas atribut yang dapat Anda gunakan untuk menambahkan anchor tujuan ke hyperlink Anda, memberi tahu browser apa yang harus dilakukan dengan tautan tersebut, dan menambahkan makna semantik ke elemen anchor untuk digunakan oleh browser dan perayap web.

Atribut Anchor Paling Penting

Ada tiga atribut anchor yang perlu Anda ketahui untuk membuat hyperlink fungsional. Atribut tersebut adalah href, target, dan download.

Tentukan Target Hyperlink: href

Referensi hypertext, atau href, atribut digunakan untuk menentukan target atau tujuan untuk elemen anchor. Ini paling sering digunakan untuk menentukan URL tempat elemen anchor harus ditautkan.

Dalam contoh ini, <a href="http://example.com">teks berlabuh</a> tertaut ke URL <em>www.example.com</em>.

Sebuah href dapat melakukan lebih dari sekadar menautkan ke situs web lain.

• Ini dapat digunakan untuk menautkan langsung ke elemen apa pun di halaman web yang telah diberi id.
• Ini dapat digunakan untuk menautkan ke sumber daya menggunakan protokol selain http.
• Ini dapat digunakan untuk menjalankan skrip.

HTML berikut menyertakan contoh ketiga tindakan ini:

<a href="#Specify_a_Hyperlink_Target_href">Elemen anchor pertama</a> ini menautkan kembali ke judul bagian tutorial ini dengan menautkan ke <code>id</code> yang kami tetapkan ke elemen judul bagian. 

Kita dapat menggunakan protokol <code>mailto</code> untuk membuat tautan yang akan mencoba meluncurkan program email default di komputer Anda. Mari kita coba! Kami ingin Anda <a href="mailto:contact@ratingwebsite.com"> menghubungi</a> dengan kami! 

Terakhir, jika Anda mengeklik tautan di bawah, jendela peringatan JavaScript gratis akan muncul. <a> Klik tautan untuk melihat apa yang terjadi</a>.

Di kotak di bawah ini Anda akan melihat HTML itu saat dirender di browser. Coba setiap tautan untuk melihat apa yang terjadi.

Elemen href cukup mudah digunakan, tetapi kita bisa mendapatkan lebih banyak jarak tempuh dari elemen anchor kita dengan mengenal atribut target.

Referensi Untuk Artikel Panduan Cara Membuat Anchor Text Lengkap, Baca Juga:

6 Langkah Mudah Cara Membuat Blog Yang Menghasilkan Uang, Work!

Tentukan Lokasi untuk Membuka Tautan: target

Mari kita lihat kembali link mailto yang kita buat pada contoh sebelumnya. Ini kode itu lagi:

Kami ingin Anda <a href="mailto:contact@html.com"> menghubungi</a> dengan kami!

Meskipun tautan itu berguna, cara membukanya tidak ideal. Bergantung pada bagaimana komputer dan browser Anda dikonfigurasi, mungkin saja mengklik tautan yang dibuat oleh teks itu akan mengalihkan jendela browser Anda dari situs web ini ke aplikasi email berbasis web seperti Gmail atau Yahoo! Surat.

Meskipun kami tentu ingin mendorong pengunjung untuk menghubungi kami, kami tidak ingin melakukannya dengan mengorbankan pengunjung dari situs web kami.

Jawaban dari teka-teki ini adalah atribut target yang dipasangkan dengan nilai _blank.

Kami ingin Anda <a href="mailto:contact@ratingwebsite.com" target="_blank" rel="noopener">menghubungi</a> dengan kami!

Ketika kami menambahkan atribut target dan atribut _blank ke tautan kami, kami memberi tahu browser pengunjung untuk membuka tautan di tab atau jendela browser baru (kosong). Jika kita merender kode itu di browser, ketika pengunjung mengklik tautan, itu akan terbuka di tab baru.

Tentukan Sumber Daya untuk Diunduh: Download

Tautan juga digunakan untuk memberi tahu browser agar mulai mengunduh file. Atribut unduhan digunakan untuk mengidentifikasi tautan yang harus memulai unduhan dan nilai yang ditetapkan untuk atribut unduhan adalah nama file yang akan diunduh.

Atribut href juga berperan saat menyiapkan elemen anchor yang memulai unduhan. Sementara atribut unduhan menamai file, atribut href menunjuk ke lokasi tempat file dihosting.

Berikut adalah contoh bagaimana elemen anchor yang memulai unduhan akan terlihat:

Untuk membuat tautan yang memberi tahu browser untuk <a href="http://example.com/file.ext" download="Example_File">mengunduh file</a>, gunakan <code>href</code> atribut untuk mengidentifikasi file yang akan diunduh, dan atribut <code>download</code> untuk memberikan nama untuk file yang diunduh.

Jika href dalam contoh di atas menunjuk ke file asli, ketika unduhan selesai, file yang diunduh akan disebut Example_File.ext di mana .ext akan menjadi format file yang diunduh. Tidak perlu menyertakan ekstensi jenis file dalam nilai yang ditetapkan ke atribut unduhan.

Ekstensi file akan secara otomatis diidentifikasi ketika browser mengunduh file, dan secara otomatis ditambahkan ke nama file yang diunduh.

Referensi Untuk Artikel Panduan Cara Membuat Anchor Text Lengkap, Baca Juga:

Apa Yang Dimaksud Dengan Search Engine?

Internal dan External Links

Ada dua jenis sumber daya yang dapat kita tautkan menggunakan elemen a: internal dan eksternal. Tautan internal adalah tautan yang mengarah ke halaman lain di situs web kami. Tautan eksternal mengarah ke halaman web yang bukan bagian dari situs web kami.

Membangun tautan internal penting karena beberapa alasan berbeda:

• Tautan internal digunakan untuk membuat menu navigasi yang membantu pengunjung situs web menavigasi situs web kami.
• Tautan internal digunakan dalam teks konten situs web untuk membantu pengunjung situs web menemukan konten terkait.
• Tautan internal juga digunakan oleh perayap web mesin pencari untuk menemukan halaman situs web dan untuk berbagi otoritas (juga dikenal sebagai link juice) dengan halaman lain dari sebuah situs web.

Saat menulis tautan internal pastikan Anda tidak berlebihan. Jus tautan dari halaman web mana pun dibagikan di antara tautan di halaman. Jadi semakin banyak tautan yang Anda letakkan di halaman, semakin encer jus yang diteruskan ke setiap tautan.

Aturan praktis yang baik adalah memiliki tidak lebih dari 100 tautan per halaman meskipun ada pengecualian dalam kasus situs web yang sangat besar dan kompleks.

Tautan eksternal juga penting karena beberapa alasan berbeda:

• Tautan eksternal mungkin direkomendasikan, diperlukan, atau hanya praktik terbaik untuk memberikan atribusi yang tepat ke sumber ide atau sumber daya.
• Tautan eksternal memungkinkan kami untuk merujuk pengunjung situs web ke konten terkait yang bermanfaat.
• Ketika situs web lain memposting tautan eksternal yang mengarah ke situs web kami, tautan ini yang dikenal sebagai link backlink memungkinkan link juice mengalir ke situs web kami dan meningkatkan posisi situs web kami di halaman hasil mesin pencari (SERP).

Saat menulis tautan eksternal, cobalah untuk menghindari tautan ke pesaing langsung. Anda tidak ingin membantu peringkat SERP mereka untuk istilah pencarian yang Anda targetkan untuk situs web Anda sendiri.

Sebaiknya gunakan atribut target=”_blank” saat menulis tautan eksternal. Dengan membuka tautan eksternal di tab baru, Anda membuat pengunjung tetap berada di situs Anda lebih lama.

Jangan Pernah Mengatakan “Klik Di Sini”

Pasti Anda pernah melihat dan bahkan mungkin membuat tautan yang terlihat seperti ini:

Untuk mempelajari lebih lanjut <a href="http://example.com">klik di sini</a>!

Setidaknya ada tiga alasan bagus mengapa menggunakan teks elemen jangkar generik seperti “Klik Di Sini” adalah praktik yang buruk.

Pengunjung situs web yang bergantung pada teknologi bantu seperti pembaca layar akan kesulitan memahami arti tautan yang menggunakan teks tautan umum seperti “Klik Di Sini”.

Pengunjung situs web yang memindai halaman harus mengambil beberapa detik tambahan untuk menyelidiki teks di sekitar tautan untuk mengetahui apa yang ditautkan oleh anchor.

Perayap web mesin telusur mengaitkan teks elemen anchor dengan URL tautan. Teks elemen anchor yang dipilih dengan benar membantu mesin pencari menentukan relevansi halaman web dengan kata kunci tertentu. Teks generik tidak memberi tahu mesin pencari apa pun tentang halaman web yang ditautkan.

Teks elemen anhor yang ideal adalah ringkas dan mengidentifikasi kata kunci atau kata kunci yang relevan dengan halaman web. Berikut adalah kalimat yang menyertakan dua contoh teks tautan yang dipilih dengan benar:

Jika Anda ingin situs web Anda mendapatkan lebih banyak lalu lintas dari <a href="http://www.google.com/" target="_blank" rel="noopener">mesin telusur</a>, lihat <a href ="/seo/">Tutorial SEO</a> untuk tips meningkatkan peringkat SERP situs web Anda.

Tautan pertama memberi tahu perayap web dan pengunjung situs web bahwa situs web http://www.google.com ada hubungannya dengan kata kunci “mesin pencari”. Yang kedua memberi tahu pengunjung dan mesin pencari bahwa halaman yang ditemukan di URL relatif /seo/ terkait dengan kata kunci “tutorial SEO“.

Referensi Untuk Artikel Panduan Cara Membuat Anchor Text Lengkap, Baca Juga:

100+ Contoh Web html Yang Sudah Jadi Download Gratis

Absolute vs. Relative URLs

Ada dua tautan dalam contoh terakhir kami: http://www.google.com dan /seo/. Yang pertama adalah contoh URL absolut. URL absolut adalah URL yang menyertakan deskripsi lengkap (absolut) dari tujuan tautan. URL absolut mencakup protokol (http) dan nama domain lengkap serta jalur file yang diperlukan untuk mencapai jangkar tujuan.

Yang kedua adalah contoh URL relatif. URL relatif menautkan ke halaman web dengan menjelaskan posisi halaman relatif terhadap posisi halaman saat ini. Saat menulis tautan internal yang mengarah ke halaman lain dari situs web yang sama, kami memiliki opsi untuk menulis URL relatif daripada URL absolut.

Misalnya, jika kita berada di alamat ini: http://example.com/products/red-product/, dan kita ingin menautkan ke halaman produk biru, kita dapat menggunakan salah satu elemen jangkar berikut:

<a href="/products/product-baru/">lihat produk baru!</a> <a href="../product-baru/">Periksa produk biru!</a>

Apa yang dikatakan sintaks pertama adalah: “lihat di tingkat terendah direktori file untuk produk file, dan cari produk baru di dalam file itu”. Apa yang dikatakan sintaks kedua adalah: “lihat di folder induk dari direktori produk merah untuk direktori dengan nama produk baru. Kedua elemen anchor text ini mengarah ke URL: http://example.com/products/product-baru/.

Katakanlah kita ingin menautkan ke Tentang Kami – halaman yang ada sebagai turunan langsung dari beranda. Inilah cara kami melakukannya:

<a href="/about-us/">Learn more about us.</a>

Sintaks itu mengatakan “kembali ke level terendah dari pohon direktori file dan kemudian cari direktori berjudul about-us“.

Sebagai contoh terakhir, katakanlah kita berada di alamat ini sekali lagi: http://example.com/products/red-product/, dan kita ingin menautkan ke halaman subkategori yang ada dalam kategori /red-products/ .

<a href="large.php">See all Red Products available in Large!</a>

Apa yang akan dilakukan URL relatif itu adalah memberi tahu browser untuk mencari di folder saat ini untuk file bernama large.php dan akan menyelesaikan ke URL ini: http://example.com/products/red-product/large.php.

Untuk meringkas, ketika kami menulis URL relatif, kami memiliki tiga opsi:

• Ketika kita memulai URL relatif dengan “/” kita memberitahu browser untuk mencari file atau folder tertentu di tingkat terendah dari direktori file.
• Jika kita memulai URL relatif dengan “../” kita memberi tahu browser cadangan di pohon direktori satu tingkat.
• Jika kami memulai URL relatif dengan nama file atau folder, kami memberi tahu browser untuk mencari sumber daya yang ditentukan dalam file saat ini.

Mengapa URL Relatif Digunakan?

URL relatif sangat populer di kalangan pengembang web. Adalah umum bagi situs web untuk dikembangkan di server pementasan dengan nama domain yang tidak sama dengan nama domain permanen yang akhirnya.

Jika URL relatif digunakan, saat situs ditransfer dari server pementasan untuk ditayangkan di web, semua URL relatif akan terus berfungsi dengan baik. Namun, jika URL absolut digunakan, tim pengembangan harus melalui situs untuk memperbaiki semua URL.

Meskipun manfaat menggunakan URL relatif selama pengembangan situs di server pementasan tidak terlalu besar, itu membutuhkan biaya.

Meskipun Anda harus tahu cara kerja URL relatif, banyak pengembang berpengalaman dan pakar SEO merekomendasikan untuk tetap menggunakan URL absolut sebanyak mungkin.

Referensi Untuk Artikel Panduan Cara Membuat Anchor Text Lengkap, Baca Juga:

9 Contoh Desain Web html Keren Untuk Inspirasi Blog Kamu Sob!

Atribut Anchor Yang Berguna Lainnya

Hanya dengan tiga atribut yang telah kami bahas sejauh ini, Anda dapat menyelesaikan setiap tugas hyperlink yang akan Anda temui di web. Namun, ada atribut tambahan yang dapat digunakan untuk memberi tahu browser web pengunjung dan mesin telusur yang mengindeks situs web kita tentang arti hyperlink.

Tentukan Bahasa Tujuan Anchor : hreflang

Ini adalah tag opsional yang dapat digunakan untuk memberi tahu browser web bahasa dokumen yang dikaitkan dengan anchor text. Misalnya, jika kami menautkan ke URL dan ingin memberi tahu browser bahwa anchor texrt tujuan dalam bahasa Spanyol, kami akan menggunakan kode bahasa yang sesuai dalam format ISO 639-1 sebagai nilai atribut hreflang.

Untuk memberi tahu browser bahwa <a href="http://example.com" hreflang="es">tautan</a> menunjuk ke sumber daya dalam bahasa yang berbeda, kita dapat menggunakan <code>hreflang </code> atribut.

Tentukan Hubungan Antara Sumber dan Tujuan: rel

Atribut hubungan, atau rel, digunakan untuk menggambarkan hubungan antara achor text sumber dan anchor text tujuan. Misalnya, kita dapat menggunakan kode berikut untuk mengidentifikasi tujuan sebagai sumber daya tentang pembuat dokumen.

Artikel ini ditulis oleh <a href="https://plus.google.com/+AuthorName" rel="author">Penulis Ganteng</a>.

Ada beberapa nilai berbeda yang dapat digunakan untuk menggambarkan hubungan antara tautan sumber dan tautan tujuan. Berikut adalah beberapa yang paling umum:

• rel=”nofollow”: Gunakan atribut ini jika Anda menautkan ke sumber daya yang tidak ingin Anda beri reputasi situs Anda. Misalnya, jika Anda menautkan ke situs berisi spam sebagai contoh apa yang tidak boleh dilakukan, Anda ingin menggunakan nilai ini agar tidak berkontribusi pada visibilitas mesin telusur situs.
• rel=”alternate”: Jika situs Anda memiliki lebih dari satu versi – seperti terjemahan ke dalam bahasa yang berbeda – gunakan nilai ini untuk mengidentifikasi sumber daya yang ditautkan sebagai versi alternatif dari halaman saat ini.
• rel=”bookmark”: Nilai ini digunakan untuk mengidentifikasi formulasi URL yang permanen dan dapat digunakan untuk bookmark.
• rel=”help”: Identifikasi sumber daya yang ditautkan sebagai file bantuan untuk halaman saat ini dengan nilai ini.
• rel=”license”: Gunakan atribut ini saat menautkan ke lisensi hak cipta yang diakui.
• rel=”berikutnya”: Jika dokumen saat ini ada dalam serangkaian dokumen, gunakan nilai ini saat menautkan ke dokumen berikutnya dalam rangkaian tersebut.
• rel=”prev”: Jika dokumen saat ini ada dalam serangkaian dokumen, gunakan nilai ini saat menautkan ke dokumen sebelumnya dalam rangkaian.
• rel=”noreferrer”: Jika Anda ingin menautkan ke situs web eksternal tetapi menghindari memberi tahu situs web tujuan siapa perujuknya, gunakan nilai ini.

Referensi Untuk Artikel Panduan Cara Membuat Anchor Text Lengkap, Baca Juga:

Apa Yang Dimaksud Firewall dan Sebutkan Jenis-Jenis Firewall

Tentukan Type Media Internet: Type

Atribut type adalah atribut opsional yang dapat digunakan untuk mengidentifikasi jenis media Internet, atau jenis MIME, dari dokumen tujuan. Misalnya, jika menautkan ke situs web yang dirender dalam HTML, Anda dapat menambahkan atribut type=”text/html” untuk memberi tahu browser pengunjung bahwa tautan tersebut mengarah ke dokumen HTML.

Saat ini atribut ini tidak melakukan banyak hal, tetapi pemikirannya adalah bahwa di masa depan informasi yang terkandung dalam atribut ini dapat digunakan untuk berkomunikasi dengan pengunjung situs web jenis konten yang akan mereka tautkan sebelum mengklik link.

Nilai jenis harus merupakan jenis media IANA yang valid. Beberapa nilai yang paling umum digunakan adalah: teks/html, teks/css, aplikasi/javascript, dan multipart/form-data.

Web Tautan

World Wide Web paling tepat digambarkan sebagai perpustakaan besar dokumen hyperlink di mana elemen anchor text digunakan untuk membuat jembatan antara dokumen terkait. Dalam definisi ini, elemen anchor text menempati tempat yang semestinya sebagai perekat yang mengikat web bersama-sama dan jembatan yang memungkinkan pengguna web berpindah dari satu dokumen ke dokumen terkait.

Salah satu cara umum untuk menggunakan tautan adalah dengan membuat menu navigasi yang memaparkan struktur logis dan hierarki situs web.

Sealamt Mencoba Sob! semoga Panduan Cara Membuat Anchor Text Lengkap Dengan Contoh ini membantu anda.

Salam Blogger