10 Coding HTML Dasar Yang Wajib Diketahui – Untuk menjadi blogger yang baik, keterampilan ngeblog saja tidak cukup. Anda perlu mengoptimalkan SEO untuk memaksimalkan kinerja blog. Salah satu caranya adalah dengan memahami coding HTML dasar blog.

10 Coding HTML Dasar Yang Wajib Diketahui
Source : bacacoding.blogspot.com

Dengan memahami tag HTML blog Anda, Anda dapat dengan bebas mengatur informasi di dalam konten. Dengan cara ini, pengunjung dan robot dapat lebih mudah menemukan informasi di konten Anda.

Alhasil, konten blog Anda berpeluang masuk ke halaman pertama Google. Faktanya, cuplikan konten Anda mungkin saja tampil dengan tampilan yang lebih menarik. Tentunya hal ini dapat mengundang lebih banyak klik untuk masuk ke blog.

Tapi jangan khawatir dulu, karena menurut Anda coding itu sulit. Di sini, Anda akan belajar coding HTML dasar yang mudah digunakan. apa ini? Yuk, simak penjelasannya!

Kode HTML Dasar

Berikut adalah 9 kode HTML dasar untuk blog.

1. Title Tag

Tag HTML pertama adalah tag judul. Tag judul adalah judul halaman atau situs web. Elemen ini merepresentasikan konten konten sehingga calon pengunjung dapat menemukan informasi inti konten tersebut.

Biasanya, Anda dapat menemukan tag judul sebagai judul dalam daftar hasil pencarian.

Title Tag
Source : havoc.digital

Selain itu, tag judul halaman website juga ditampilkan pada tab yang dibuka oleh pengunjung.

Bagi blogger, tag judul merupakan elemen penting. Mengapa? Pasalnya, tag judul merupakan salah satu daya tarik yang membuat website mendapatkan banyak klik. Faktanya, tag judul dapat meningkatkan rasio klik-tayang (RKT) Anda sebesar 20-100%. Siegemedia telah membuktikan hal ini kepada salah satu kliennya, David’s Bridal.

Baca Juga : 7 Tips PHP Security yang Wajib Kalian Ketahui

Awalnya, David’s Bridal menambahkan kata kunci “Resepsionis Nikmat” ke tag judul. Sayangnya, kata kunci tersebut hanya dapat menghasilkan 500 volume per bulan. Melihat celah tersebut, Siegemedia mengganti kata kunci tersebut dengan “Pernikahan Nikmat”. Pasalnya, kata kunci ini memiliki volume pencarian 50.000, sehingga berpotensi lebih besar. Akibatnya, rasio klik-tayang pengantin wanita David hanya melonjak 20%. Bukankah itu luar biasa?

Nah, kini Anda mulai merasa penasaran. Bagaimana cara membuat tag judul dalam dokumen HTML? sederhana. Di editor teks, Anda hanya perlu memberikan kode HTML berikut:

<title> Masukkan judul </title>

2. Meta Description

Selanjutnya, ada deskripsi meta. Deskripsi meta adalah tag HTML yang berisi ringkasan singkat dari konten situs web.

Meta Description

Melalui meta description, calon pengunjung akan mengetahui deskripsi konten. Jika menurut mereka konten dapat menjawab pertanyaan mereka, maka mereka akan mengkliknya.

Mungkin Anda tidak berpikir bahwa deskripsi meta dapat meningkatkan rasio konversi Anda sebesar 215%. Benang SweetGeorgia telah membuktikan hal ini. Mereka meningkatkan kinerja SEO dengan mengoptimalkan deskripsi meta.

Hasilnya, lebih mudah menemukan halaman produk mereka. Hasilnya, pendapatan SweetGeorgia meningkat sebanyak 24% setiap tahun.

Oleh karena itu, tulis saja markup berikut untuk membuat deskripsi meta dalam dokumen HTML:

<meta name="description" content="Masukkan deskripsi">

3. Heading Tag

Tag judul adalah judul dan subjudul yang ditemukan di halaman situs web. Label ini digunakan untuk struktur konten. Dan dengan struktur konten yang baik, informasi akan lebih mudah dibaca.

Keterbacaan informasi tersebut tentunya akan mempengaruhi kinerja SEO. Pertama, mesin pencari akan lebih mudah memahami konteks artikel, sehingga situs akan mendapatkan peringkat tertinggi. Kedua, judul yang benar juga memungkinkan konten yang dipilih menjadi cuplikan pilihan.

Nyatanya, gelar tersebut memiliki enam tingkatan. Namun blogger sering menggunakan H1 hingga H3. Sekarang, kita akan membahasnya satu per satu.

  • <h1> </ h1> digunakan sebagai judul utama konten. Ini ada di bagian atas halaman blog
  • <h2> </ h2> adalah subtitle yang berisi deskripsi dari topik utama
  • <h3> </ h3> hingga <h6> </ h6> adalah poin-poin yang berisi informasi pendukung dari judul sebelumnya

Oleh karena itu, sekarang Anda memiliki pemahaman yang lebih baik tentang penerapan tag judul. Namun, Anda mungkin tetap ingin mengetahuinya. Lantas, apa perbedaan antara H1 dan tag judul?

Jika tag judul adalah judul halaman, H1 adalah judul konten. Anda dapat menemukan tag judul di tag judul dan daftar hasil halaman mesin pencari. Di sisi lain, Anda dapat menemukan H1 di judul halaman situs web.

Anda dapat memiliki dua versi tag judul di sebuah konten. Kami akan membahas cara melanjutkan di akhir artikel ini.

Anchor text adalah penggalan kata yang mengandung link tertentu. Fungsi anchor text dan link adalah mengarahkan pengunjung ke halaman yang diinginkan. Misalnya: halaman referensi, halaman login, halaman blog, dll.

Ingatlah bahwa teks tautan dan tautan harus relevan dengan konteks konten. Itu karena mesin pencari menggunakannya untuk mengetahui pentingnya dan keandalan konten.

Secara lebih rinci, mesin pencari akan mengukur kredibilitas sumber referensi dan relevansi informasinya. Semakin penting jaminan konten, semakin besar kemungkinan untuk mendapatkan peringkat tertinggi dalam hasil pencarian.

Ini adalah pengkodean dasar yang digunakan untuk membuat teks tautan dan tautan:

<a href="link website"> anchor text </a>

Sekalipun Anda hanya membutuhkan markup HTML sederhana, Anda tetap perlu mengetahui teknik pembuatan anchor text. Tujuannya adalah untuk memaksimalkan kinerja SEO blog Anda dan mendatangkan lebih banyak lalu lintas ke konten Anda yang lain.

5. Nofollow

Dari luar, nofollow biasanya terlihat mirip dengan teks tautan dan tautan. Anda akan melihat teks biru bergaris bawah. Namun, keduanya sebenarnya sangat berbeda.

Anda dapat mengatakan bahwa tag nofollow memiliki fungsi kebalikan dari teks tautan dan tautan biasa. Kode HTML nofollow justru membuat mesin pencari mengabaikan link di website tersebut. Akibatnya, tautan ini tidak berpengaruh pada peringkat SEO.

Baca Juga : 5 Tools Cek Backlink Blog Rival Terbaik 2021

Lho, terus gunanya apa?

Faktanya, tag HTML nofollow digunakan untuk menjaga kinerja SEO. Dengan menggunakan tag ini, jika halaman yang Anda tautkan dianggap spam, menyebarkan virus, atau memiliki performa SEO yang buruk, blog Anda akan terhindar dari efek negatif. Sangat berguna bukan?

berikut tips membuat tag HTML nofollow, hanya cukup gunakan kode berikut:

<a href="link Anda" rel="nofollow">Keyword Anda</a>

6. Image Alt Text

Tag HTML selanjutnya adalah teks pengganti gambar. Pengkodean dasar adalah elemen yang memberikan informasi pengganti pada gambar.

Teks alternatif gambar dapat membantu mesin pencari memahami arti gambar. Ini karena robot tidak bisa benar-benar melihat gambar seperti manusia.

Selain membantu proses crawl, teks ini juga yang dilihat pengunjung saat gambar tidak bisa ditampilkan.

Untuk membuat teks alternatif gambar, Anda memerlukan tag HTML berikut.

<img alt="text">

7. Tag Kanonikal

Pengkodean HTML dasar berikutnya adalah tag kanonik. Tag kanonis digunakan untuk memprioritaskan halaman situs web di atas halaman lain yang memiliki konten serupa atau menggunakan URL yang sama. Akibatnya, halaman dengan tag kanonis lebih cenderung muncul di hasil penelusuran Google.

Mungkin Anda bertanya-tanya, seberapa besar dampak duplikat konten dan konten dengan URL yang sama? Tentu saja, konsekuensi buruknya cukup besar. Karena akan sulit bagi Google untuk memilih versi mana yang akan ditampilkan. Mungkin konten Anda kewalahan. Sayang sekali, bukan?

Oleh karena itu, setiap blogger harus menggunakan tag kanonik untuk konten serupa. Oleh karena itu, meskipun konten atau halaman duplikat dengan URL yang sama, blog dengan tag kanonik akan muncul atau dapat diakses terlebih dahulu.

Berikut ini adalah kode HTML dari tag kanonik:

<link href=”link website” rel=”canonical”>

8. Tag Paragraf

kali ini Tag paragraf juga merupakan elemen yang berisi paragraf didalam blog. Yang kita tahu setiap paragraf selalu berawalan dengan tag <p> dan ditutup dengan tag </p>.

Tag Paragraf

Ini adalah kode dasar untuk membuat tag paragraf.

<p>Paragraf pertama</p>
<p>Paragraf kedua</p>

9. Tag Huruf Tebal (Bold)

Selanjutnya, ada tag HTML tebal. Fungsinya untuk menandai teks menjadi tebal.

Kode HTML yang memberikan efek tebal sangat sederhana yaitu:

<b>bold text</b>

10. Tag Huruf Miring (Italic)

Tag miring digunakan untuk membuat teks miring. Untuk membuatnya, Anda hanya membutuhkan kode HTML berikut.

<i>italic text</i>

Sekarang saatnya menjelajahi penggunaan HTML di blog!

Selama ini Anda sudah memahami penjelasan masing-masing kode HTML. Oleh karena itu, untuk mempermudah kalian, berikut kami akan berikan rangkuman kode HTML dasar blog.

Tag Kode HTML
Title tag <title></title>
Meta description <meta name=”description” content=””>
Heading tag <h1></h1><h2></h2><h3></h3>
Anchor text dan link <a href=”link website”> anchor text </a>
Nofollow <a href=”link website” rel=”nofollow”> anchor text</a>
Image Alt Text <img alt=””>
Tag kanonical <link href=”link website” rel=”canonical”>
Tag paragraf <p></p>
Tag huruf tebal (bold) <b></b>
Tag huruf miring (italic) <i></i>

Jadi, ternyata penggunaan basic coding di blog itu mudah bukan? Namun, jangan berpuas diri untuk saat ini. Anda masih bisa membuatnya lebih mudah menggunakan pengkodean dasar!

Triknya adalah dengan menggunakan Yoast. Yoast adalah plugin untuk memaksimalkan kinerja SEO. Dengan menggunakan plugin ini, Anda dapat mengelola kode HTML dengan lebih mudah.

Seperti yang javascriptoo katakan di awal: buat dua versi tag judul dalam satu konten. Menarik?