Заміни тег на семантичний тег для покращення SEO сайту

Coba bayangkan jika kamu membuat proyek besar, namun penulisan kodenya seperti gambar berikut:

Terlihat rumit dan penuh banget, kan?🤯

Yaps, penulisan kode HTML seperti gambar di atas akan terkesan rumit dan susah dibaca, apalagi jika proyek website kamu semakin kompleks.👾

Penulisan kode tag
yang berlebihan seperti gambar di atas dalam dunia SEO (Search Engine Optimization), akan menyebabkan peluang website kamu di halaman pertama Google berkurang. Hal ini disebabkan karena penulisan kode seperti itu nggak akan memberi informasi semantik tambahan terhadap konten website kamu. Nah! Solusi dari permasalahan tersebut, kamu perlu mengganti tag
ke tag semantik lainnya untuk membantu meningkatkan SEO website kamu.😇☝🏻

Kenapa Harus Ganti Tag `

` ke Tag Semantik?🧐

Selain membantu meningkatkan SEO website agar mudah tampil di halaman pertama Google, terdapat beberapa keuntungan lain jika kamu menggatu tag
ke tag semantik, antara lain:

1. Lebih Mudah Dalam Pemeliharaan Kode

Kalau kamu selalu menggunajan tag
untuk menggabungkan semua elemen, nantinya kode kamu akan lebih susah dipahami dan dikelola. Hal ini akan berimbas saat memperbaiki atau memperbarui elemen tertentu.

Dengan mengganti ke tag semantik, kamu nggak perlu takut atau kesusahan saat merawat proyek websitemu. Apalagi kalau website kamu semakin berkembang, dalam penulisan kode CSS, JavaScript, dan bahasa lainnya juga akan lebih mudah kalau pakai tag semantik.

2. Mengurangi Ukuran DOM HTML

Penggunaan tag
yang berlebihan akan meningkatkan ukuran DOM HTML. Dengan mengganti tag
akan ukuran DOM HTML akan berkurang, sehingga website kamu akan lebih cepat dalam proses load dan mengurangi penggunaan memori.

Lalu, tag semantik apa saja yang bisa digunakan untuk mengganti tag
_?

Tag Semantik yang Bisa Gantiin Tag

Berikut ini beberapa tag semantik yang bisa kamu pakai untuk mengganti tag
agar penulisan kode jauh lebih efisien dan ramah terhadap SEO, antara lain:

1.

Tag
dapat kamu gunakan untuk mempermudah dalam pemberian konteks dengan jelas untuk bagian atas halaman. Daripada menggunakan tag
,kamu bisa langsung ganti pakai
. Penulisan tersebut nggak hanya simpel, tapi lebih mudah dipahami oleh search engine.

Contoh Sebelum:

Web

Contoh Sesudah

Web


**2. `dan

`**

Saat menuliskan kode untuk bagian utama halaman web, alih-alih menggunakan
, kamu bisa menuliskan tag . Dengan menuliskan tag akan mempermudah dikenali oleh search engine sebagai bagian inti sebuah halaman web. Tag ini bantu ngasih tanda untuk lebih memperhatikan bagian halaman tersebut.

Selain itu, daripada pakai
untuk mendeskripsikan bagian tambahan halaman, kamu bisa ganti ke tag
yang lebih simpel.

Contoh Sebelum:

Layanan
Artikel Terbaru
Artikel 1

Contoh Sesudah:

Layanan
Artikel Terkait
Artikel 1


3. `

`

Dengan mengganti ke tag
, kamu dapat dengan mudah memisahkan bagian konten lebih terstruktur dan rapi. Penggunaan tag semantik ini bikin penataan konten lebih cepat tanpa harus menuliskan class
untuk setiap bagiannya.

Contoh Sebelum:

Layanan Utama
...

Contoh Sesudah:

Layanan Utama
...


4.

`

Penggunaan tag dapat mempermudah kamu saat kamu ingin menambahkan elemen navigasi dengan tautan ke halaman lain pada website, daripada menuliskan `
`. Dengan mengganti tag `
` ke tag, search engine akan mudah dalam mengidentifikasi navigasi website kamu.

Contoh Sebelum:

Home
Contact

Contoh Sesudah:

Home
Contact


5. `

`

Kamu juga bisa menampilkan kutipan dengan mudah tanpa harus menuliskan kode
, yakni cukup pakai tag
. Dengan menggunakan tag tersebut, kode kamu akan jauh lebih sistematis.

Contoh Sebelum:

“Kutipan … ”

Contoh Sesudah:

“Kutipan … ”


6. ``

Dalam menuliskan informasi tanggal, waktu maupun durasi, kamu juga bisa dengan mudah menuliskan tag . So, kamu nggak perlu repot-repot pakai tag `
` dan menuliskan class-nya. Jangan lupa, tulis atribut `datetime` saat menggunakan tag untuk menambah detail tentang waktu atau tanggal yang kamu tulis.

Contoh Sebelum:

Tanggal: 04 Agustus 2025

Contoh Sesudah:

04 Agustus 2025


6. `

`

Untuk menandai bagian akhir halaman, kamu hanya perlu menuliskan tag
agar lebih semantik. Seperti penggunaan tag semantik lain, penggunaan tag
juga mempermudah search engine dalam mengenali bagian akhir atau bagian penting pada halaman website.

Contoh Sebelum:

© 2025 Website Saya

Contoh Sesudah:

© 2025 Website Saya

Gimana? Lebih mudah dan simpel pakai tag semantik di atas, bukan?

Menurut kamu dengan mengganti tag
ke tag semantik di atas pilihan tepat atau nggak?

Jangan ragu untuk terus menggali pengetahuan lebih dalam tentang HTML, agar proyek kamu jadi lebih efisien dan terstruktur. Untuk mempelajari lebih lanjut, ikuti kursus HTML secara mendalam di Sekolah Koding.

Dapatkan akses ke kursus lengkap tentang HTML dan materi lainnya di platform Sekolah Koding dan tingkatkan kemampuan coding kamu mulai sekarang 👩🏼‍💻✔️🚀

Перекладено з: Ganti Tag