Elemen Web Digunakan dengan Benar untuk SEO

Terakhir Diperbarui pada 16 Januari 2019

Sebagian besar halaman web terbuat dari 3 elemen dasar, HTML, CSS, dan JavaScript. Blok penyusun ini membentuk semua halaman web, apa pun yang mereka gunakan untuk merendernya. Setiap elemen web memiliki tempat yang tepat. Meskipun mungkin ada beberapa tumpang tindih, menggunakannya dengan sengaja membantu membuat halaman yang dioptimalkan untuk SEO. Jadi bagaimana elemen-elemen ini harus digunakan dan apa saja cara mereka dapat disalahgunakan?

Fungsi elemen web dasar

Mari kita bandingkan halaman web dengan rumah. Sebuah rumah memiliki beberapa bagian, masing-masing di tempatnya dan melayani tujuannya. Di rumah halaman web kami, HTML menyerupai elemen web struktural, rangka, dinding, fondasi. HTML menyediakan tata letak konten halaman yang penting, menguraikan urutannya dan elemen apa yang muncul di mana.

CSS harus digunakan untuk penataan. Jika kita tetap menggunakan ilustrasi rumah, ini akan menjadi warna dinding Anda, lemari Anda, jenis lantai apa yang Anda miliki, dll. Warna halaman Anda, ukuran font, tata letak halaman yang sebenarnya juga dapat ditentukan dalam CSS. Tapi tunggu, bukankah seharusnya tata letak dalam HTML? Pertanyaan bagus. Sementara HTML harus mengatur elemen-elemen yang akan ada di halaman Anda, CSS harus mengontrol bagaimana elemen-elemen itu akan ditampilkan di halaman itu. CSS bertanggung jawab atas sebagian besar daya tanggap web.

Sekarang setelah rumah Anda dibangun, saatnya untuk beberapa utilitas, seperti listrik dan air mengalir. JavaScript harus digunakan untuk elemen interaktif halaman Anda, seperti mengubah elemen saat diklik, menampilkan data, dan sebagainya. JavaScript dapat digunakan untuk mengubah seluruh tampilan dan nuansa halaman Anda yang berfungsi dengan baik jika Anda menyesuaikannya dengan audiens atau kasus penggunaan tertentu.

Mengapa memisahkan mereka?

Jadi, jika Anda dapat menggunakan HTML dan CSS untuk tata letak, dan JavaScript dan CSS untuk penataan, mengapa memisahkannya? Saat Google mengindeks halaman Anda, Google mencari indikator utama tentang halaman Anda dan bagaimana fungsinya. Jika Anda menggunakan salah satu elemen secara tidak tepat, Anda dapat mengirim sinyal yang salah dan merusak peringkat Anda. Ini sering terjadi ketika bekerja dengan editor CMS yang bergaya menggunakan preset untuk elemen, atau yang menjalankan JavaScript yang tidak perlu yang memperlambat halaman untuk melakukan hal-hal yang dapat dilakukan di CSS.

Jadi, mari kita tinjau beberapa penyalahgunaan yang biasa terjadi.

Menyalahgunakan tag heading

Salah satu penyalahgunaan yang paling umum adalah menggunakan tag heading untuk menata elemen web. Tag judul menguraikan topik utama pada halaman, dari tag H1 yang paling penting (setiap halaman harus memiliki) hingga H6. Saat digunakan untuk menata elemen, Anda memberi tahu Google bahwa kata-kata itu adalah tentang halaman Anda. Atau, Anda bisa menggunakan tag heading yang salah (seperti menggunakan h3 daripada h2 karena Anda lebih menyukai ukuran font). Dalam kedua kasus, Anda mengirim pesan yang salah. Sebagai gantinya, Anda harus menggunakan CSS untuk menata elemen ke ukuran atau font yang sesuai yang Anda inginkan.

Tag H1 ganda

Masalah umum lainnya adalah memiliki 2 atau lebih tag H1 pada halaman. Tag H1 Anda harus menjadi ide utama halaman; itu harus memberi tahu semua orang (dan setiap bot perayapan) yang mengunjungi halaman tentang apa itu, dan karena itu, Anda hanya boleh memiliki satu. Memiliki dua tag H1 seperti mengirim dua sinyal berbeda pada halaman. Beberapa orang dan bahkan tema profesional cenderung menempatkan logo mereka dalam tag H1. Jadi waspadalah untuk memastikan hanya ada satu per halaman.

Semua gambar adalah gambar latar belakang.

Tidak ada yang salah dengan memiliki latar belakang gambar. Gambar menarik dan dapat menambahkan banyak nilai ke situs Anda dan membuat pengguna membeli produk atau layanan. Tetapi semua gambar Anda tidak boleh menjadi gambar latar belakang. Bekerja di situs baru-baru ini, saya menemukan CMS mengubah semua gambar menjadi gambar latar belakang. Tujuannya di sini adalah untuk menata dan mengubah ukurannya dengan lebih mudah. Meskipun mungkin membuatnya terlihat lebih baik, Anda kehilangan bagian penting dari manfaat gambar di halaman Anda: teks alternatif. Teks alternatif menjelaskan apa yang ada dalam gambar dan digunakan oleh pembaca layar untuk mengidentifikasi apa yang ada di dalam gambar. Dengan membuat semua gambar latar belakang Anda, Anda mengurangi aksesibilitas halaman sehingga mempersulit penyandang disabilitas dan dapat menerima pukulan dari Google di peringkat Anda.

Merender CSS dengan JavaScript

Menyajikan CSS melalui JavaScript yang tidak perlu menambah waktu pemuatan di halaman. Jauh lebih baik untuk menautkan file CSS di header daripada memasukkannya melalui langkah ekstra itu. Juga, menggunakan JavaScript untuk animasi sederhana atau efek hover menambah waktu buka ketika itu dapat dilakukan lebih cepat melalui CSS. Bahkan menambahkan kerangka kerja JavaScript saat tidak diperlukan dapat menambah waktu pemuatan. Seperti memuat jQuery untuk menghidupkan tombol. Alih-alih menulis JavaScript vanilla, atau bahkan lebih baik, menggunakan elemen animasi dalam CSS atau bahkan lembar gaya animasi CSS, memuat lebih cepat.

Menata elemen web dalam HTML

Styling elemen langsung dalam file HTML adalah topik yang kontroversial. Banyak tema dan plugin di WordPress dan CMS lainnya terus-menerus mengandalkan lembar gaya yang ditimpa dan plugin lainnya. Ini biasanya dipandang sebagai praktik yang buruk. Beberapa pembuat konten menulis gaya langsung ke konten mereka karena mereka ingin mengubah gaya tema mereka. Apa masalahnya dengan ini? Ini sering menyebabkan masalah CSS ketika gaya yang ditulis langsung ke dalam elemen HTML menimpa gaya dalam file CSS. Untuk menghindari hal ini, alih-alih menulisnya langsung ke HTML, tetapkan elemen web sebuah kelas dan tambahkan lembar gaya baru tempat Anda menambahkan gaya. Ini dapat menghindari masalah dengan lembar yang bentrok yang dapat merusak atau menata gaya situs Anda dengan tidak benar.

Menggunakan HTML untuk menata tata letak

Yang ini agak rumit karena tema sering memasangkan Pemilih CSS dengan Struktur HTML. Ini mempersulit seseorang untuk membuat perubahan pada struktur HTML tanpa merusak gaya vital yang membuat halaman dapat dibaca dan berfungsi. Contohnya:

Dalam contoh, jika Anda mengubah struktur HTML sebelumnya, Anda akan kehilangan semua gaya untuk elemen tersebut karena bergantung pada strukturnya. Sebagai gantinya, memisahkan gaya dari struktur, seperti di kelas melalui nanti, akan memungkinkan Anda untuk menggunakan kembali CSS Anda bahkan jika Anda mengubah struktur HTML.

Halaman yang diformat dengan benar adalah halaman yang dioptimalkan dengan baik.

Konten halaman Anda merupakan faktor besar dalam peringkat. Begitu juga dengan memanfaatkan elemen halaman web dengan benar. Secara khusus, HTML, CSS, dan JavaScript, memainkan peran yang sama besarnya dalam membuat halaman Anda dioptimalkan SEO. Dengan mengetahui peran setiap elemen web dan menggunakannya dengan cara yang tepat, Anda dapat meningkatkan peringkat Anda. Cukup buat halaman yang fungsional dan menarik. Jika Anda berpikir untuk mengganti tema untuk CMS atau menambahkan CSS atau JavaScript khusus ke halaman Anda, lihat lagi dan pastikan Anda menggunakan elemen web dengan benar.