Metadata HTML: Elemen yang Disertakan dan Praktik Terbaik

Diterbitkan: 2021-01-08

Elemen dan Praktik Terbaik dalam Metadata HTML

Meta tag adalah ekstrak singkat dari kode yang menginformasikan mesin pencari tentang informasi penting tentang halaman web Anda. Mereka juga mengontrol bagaimana browser web ditampilkan kepada pengunjung. Meta tag hadir di setiap halaman web dan Anda hanya dapat melihatnya dalam kode HTML. Berikut adalah daftar contoh meta tag untuk SEO.

  • Deskripsi meta
  • robot meta
  • Judul meta
  • Meta charset
  • Pengalihan penyegaran meta
  • Area pandang meta

Judul Meta

Judul halaman yang ditampilkan oleh Google dan mesin pencari lainnya dalam hasil pencarian adalah judul meta. Judul HTML memberi pengguna wawasan cepat tentang konten hasil dan relevansinya dengan kueri. Biasanya bentuk dasar informasi yang menentukan hasil mana yang akan diklik. Menggunakan judul berkualitas tinggi di halaman web Anda sangat penting untuk SEO. Berikut adalah contoh judul meta:

Metadata HTML: Elemen yang Disertakan dan Praktik Terbaik

Praktik terbaik

  • Gunakan tag judul khusus untuk halaman Anda
  • Judul harus singkat dan deskriptif
  • Hindari menggunakan judul yang umum dan tidak jelas
  • Gunakan judul atau kasus kalimat
  • Jangan gunakan click-bait melainkan sesuatu yang layak klik
  • Cocokkan maksud pencarian
  • Gunakan 60 karakter atau kurang
  • Sertakan kata kunci target jika perlu

Menemukan dan Memperbaiki Kesalahan Tag Judul

Pastikan tag judul Anda tidak terlalu panjang atau terlalu pendek. Hindari judul yang terlalu panjang atau bertele-tele sambil tetap membuatnya ringkas dan deskriptif. Pastikan bahwa setiap halaman memiliki tag judul. Hindari beberapa tag judul HTML pada halaman karena mesin pencari mungkin menampilkan tag judul yang tidak relevan jika ada beberapa halaman web. Judul duplikat di beberapa halaman. Sangat penting bahwa setiap halaman situs Anda memiliki judul yang unik dan deskriptif.

Uji SEO dan kinerja situs Anda dalam 60 detik!

Desain situs web yang baik sangat penting untuk keterlibatan dan konversi pengunjung, tetapi situs web yang lambat atau kesalahan kinerja dapat membuat situs web yang dirancang terbaik pun berkinerja buruk. Diib adalah salah satu kinerja situs web dan alat pemantauan SEO terbaik di dunia. Diib menggunakan kekuatan data besar untuk membantu Anda meningkatkan lalu lintas dan peringkat Anda dengan cepat dan mudah. Seperti yang terlihat di Pengusaha!

  • Alat SEO otomatis yang mudah digunakan
  • Pemantauan + ide kata kunci dan backlink
  • Memastikan kecepatan, keamanan, + pelacakan Core Vitals
  • Secara cerdas menyarankan ide untuk meningkatkan SEO
  • Lebih dari 250.000 ribu anggota global
  • Pembandingan dan analisis pesaing bawaan

Misalnya “www.diib.com”

Digunakan oleh lebih dari 250k perusahaan dan organisasi:

  • logo
  • logo
  • logo
  • logo

Sinkronkan dengan Google Analytics

Membangun Tautan

Deskripsi meta

Deskripsi meta memberikan deskripsi singkat tentang halaman web. Mesin pencari menggunakannya untuk menampilkan halaman web dalam hasil pencarian. Ini menginformasikan dan mendapatkan minat pengguna menggunakan ringkasan singkat dan akurat dari isi halaman tertentu. Deskripsi meta meyakinkan pengguna bahwa mereka berada di halaman yang tepat dan persis apa yang mereka cari. Namun, mereka tidak digunakan oleh Google sebagai faktor peringkat langsung. Gambar di bawah ini menunjukkan deskripsi meta:

Metadata HTML: Elemen yang Disertakan dan Praktik Terbaik

Praktik terbaik

  • Tulis deskripsi yang unik dan mudah dipahami untuk setiap halaman
  • Berikan ringkasan yang akurat
  • Jangan gunakan deskripsi umum
  • Gunakan kata kunci utama dengan tepat dalam kalimat yang bermakna
  • Gunakan kasus kalimat
  • Jangan gunakan umpan klik tetapi tulis sesuatu yang layak klik
  • Cocokkan dengan tujuan pencarian
  • Gunakan 160 karakter atau kurang

Kesalahan Deskripsi Meta Umum

Kesalahan paling umum dalam menulis deskripsi meta hampir mirip dengan tag judul. Deskripsi meta yang terlalu panjang atau terlalu pendek. Biasanya tidak ada batasan panjang deskripsi meta. Agar sesuai dengan lebar perangkat, hasil pencarian yang diekstraksi biasanya dipersingkat. Kesalahan lain adalah di mana halaman web sama sekali tidak memiliki deskripsi meta.

Pastikan Anda menulisnya di situs Anda. Anda juga dapat memiliki halaman dengan lebih dari satu deskripsi meta, namun ini dapat membingungkan mesin pencari. Memiliki deskripsi meta serupa di beberapa halaman juga merupakan kesalahan umum. Pastikan bahwa setiap halaman memiliki deskripsi uniknya sendiri.

Robot Meta

Meta robot memungkinkan mesin pencari untuk merayapi halaman web dan juga menawarkan instruksi tentang cara melakukannya. Kehadiran situs Anda di hasil pencarian dapat berdampak negatif jika Anda tidak menggunakan atribut yang benar dalam tag meta robot. Memahami tag ini dan menggunakannya secara efektif akan sangat memengaruhi SEO Anda.

Nilai indeks memberitahu bot untuk melakukan pengindeksan halaman, sedangkan nilai noindex menginstruksikan bot untuk tidak melakukan pengindeksan halaman. Bot diinstruksikan oleh nilai berikut untuk merayapi tautan di halaman untuk menjaminnya, sedangkan nilai nofollow menginstruksikan mereka untuk tidak merayapi tautan di halaman untuk menghindari pengesahan.

Praktik terbaik

Hanya gunakan tag meta robot saat membatasi perayapan Google di halaman dan hindari memblokir halaman dengan tag meta robot di robots.

Kesalahan Umum Meta Robot

Beberapa kesalahan tipikal robot meta termasuk robot yang tidak memblokir halaman indeks. Ini mempersulit Google untuk melihat tag robots noindex dan dapat terus mengindeks URL. Meta noindex jahat mengurangi lalu lintas organik halaman dengan membatasi Google untuk mengindeksnya. Meta nofollow nakal akan mencegah Google merayapi tautan halaman dan mengurangi kemungkinan menemukan dan mengindeks konten penting. Ini juga dapat mencegah aliran PageRank ke halaman penting.

Area Pandang Meta

Area pandang meta mengatur area halaman web yang terlihat dan memberikan instruksi tentang bagaimana halaman akan ditampilkan oleh browser pada ukuran layar yang berbeda. Ini penting karena halaman web yang ramah seluler memiliki peringkat lebih tinggi dalam hasil pencarian seluler Google.

Praktik terbaik

Sangat penting bahwa Anda menggunakan meta viewport di semua halaman web dan dengan tag standar.

Meta Charset

Tag ini menentukan pengkodean karakter untuk halaman Anda atau hanya menginstruksikan browser cara menampilkan karakter dan teks pada halaman. Ada dua set karakter umum termasuk UTF-8 yang digunakan untuk pengkodean Unicode dan ISO-8859-1 yang digunakan untuk pengkodean abjad Latin. Encoding dengan karakter yang salah akan menyebabkan tampilan browser salah.

Metadata HTML: Elemen yang Disertakan dan Praktik Terbaik

Anda akan tertarik

(Kredit Gambar: Pelajari Tutorial Web)

Masalah pemformatan karakter menghasilkan pengalaman pengguna yang negatif dan halaman Anda dapat terlihat rusak. Masalah lain yang dapat ditimbulkannya termasuk lebih sedikit orang yang menautkan ke halaman Anda, waktu tunggu yang rendah, waktu yang sedikit di halaman, rasio pentalan yang tinggi, dan mesin pencari mungkin tidak memahami konten Anda.

Praktik terbaik

  • Selalu gunakan tag meta charset di semua halaman web Anda
  • Gunakan Unicode/UTF-8 jika memungkinkan

Penting untuk memeriksa semua halaman web Anda untuk memastikan bahwa mereka menggunakan pengkodean UTF-8.

Pengalihan Penyegaran Meta

Tag ini mengarahkan pengguna ke URL lain setelah jangka waktu tertentu. Google memahami dan menghormati tag pengalihan meta refresh, tetapi yang terbaik adalah tidak menggunakannya dalam SEO. Ini karena sebagian besar browser tidak mendukungnya dan dapat menyebabkan kebingungan bagi pengguna sambil meningkatkan masalah keamanan. Ini juga membutuhkan waktu karena halaman memerlukan penguraian sebelum URL tujuan terlihat. Seperti inilah tampilan tag tersebut:

Metadata HTML: Elemen yang Disertakan dan Praktik Terbaik

(Kredit Gambar: HostPapa)

Praktik terbaik

  • Hanya gunakan tag pengalihan meta refresh bila perlu

Sebaiknya hindari menggunakan pengalihan meta refresh jika memungkinkan karena itu adalah praktik yang buruk. Jika Anda memilikinya di halaman web Anda, Anda dapat menggunakan pengalihan 301 atau 302, jika memungkinkan.

Kata Kunci Meta

Kata kunci meta adalah contoh tag meta yang bagus yang sering digunakan akhir-akhir ini. Tidak disarankan untuk menambahkan tag kata kunci meta dengan daftar kata kunci target karena Google berhenti menggunakan kata kunci untuk peringkat. Ini karena banyak orang memasukkan kata kunci yang tidak relevan tanpa pengguna pernah melihat kata kunci tersebut. Google mengabaikan meta tag kata kunci karena sering disalahgunakan.

Bing sekarang menggunakan tag meta kata kunci untuk memberi sinyal spam, jadi ini bisa merugikan Anda. Yang terbaik adalah Anda menghapus tag dari situs Anda.

Metadata adalah data yang memberikan informasi tentang data lain. Meta data HTML merangkum informasi dasar tentang data sehingga lebih mudah untuk menemukan dan bekerja dengan data tertentu. Itu dapat dibuat secara manual untuk akurasi lebih atau secara otomatis untuk menawarkan lebih banyak informasi dasar. Data mata digunakan untuk file dokumen, gambar, video, spreadsheet, dan halaman web.

Apa itu Meta Tag Generator?

Generator meta tag memungkinkan Anda mengembangkan tag meta HTML yang diperlukan dan paling berguna untuk SEO.

Praktik Terbaik Saat Menggunakan Metadata HTML

Deklarasikan Doctype Selalu

Deklarasi doctype harus menjadi hal pertama dalam tag meta HTML Anda untuk SEO. Ini memberi tahu browser tentang standar XHTML yang digunakan. Dianjurkan untuk menggunakan doctype ketat XHTML 1.0, meskipun dianggap sebagai pilihan yang sulit oleh beberapa pengembang. Itu memastikan bahwa kode Anda benar-benar sesuai dengan standar terbaru.

Gunakan Tag Judul yang Bermakna

Tag judul memungkinkan halaman web menjadi lebih bermakna dan ramah pencarian.

Gunakan Daftar Deskriptif Meta Tag

Daftar tag meta menambahkan lebih banyak arti ke halaman web Anda untuk agen pengguna seperti spider mesin pencari. Penting agar deskripsi tidak memiliki kata dan frasa yang berulang karena mesin pencari akan mendeteksinya. Gunakan deskripsi sederhana dan lugas saat menjelaskan tujuan halaman web Anda.

Bagilah Tata Letak Anda menjadi Bagian Utama Menggunakan Divs

Saat membuat desain situs web, pertimbangkan untuk membagi halaman web menjadi beberapa bagian pada langkah pertama. Ini akan mempromosikan kode yang bersih dan dimaksudkan dengan baik sambil membantu Anda mencegah kebingungan dan menggunakan div secara berlebihan saat menulis markup yang rumit dan panjang.

Hindari Mencampur Konten Dari Presentasi

Jangan mencampur konten HTML Anda dengan presentasi visual konten yang disediakan oleh CSS. Membuat file CSS terpisah untuk gaya Anda daripada menggunakan gaya sebaris dalam HTML Anda sangat penting. Ini akan memungkinkan Anda dan pengembang lain yang mengerjakan kode untuk membuat perubahan cepat dan memastikan bahwa konten Anda lebih mudah dipahami oleh agen pengguna.

Perkecil dan Satukan CSS

Situs web biasa memiliki satu file CSS utama dan mungkin hal-hal lain seperti perbaikan khusus browser dan pengaturan ulang CSS. Ketika setiap file C membuat permintaan HTTP, itu memperlambat waktu pemuatan situs web. Keluarkan karakter yang tidak diperlukan seperti baris baru, spasi, dan tab dari semua kode Anda dan satukan file yang dapat diintegrasikan bersama. Ini dapat membantu memecahkan masalah itu dan meningkatkan waktu muat situs web Anda.

Perkecil, Satukan, dan Pindahkan JavaScript ke Bawah

Hindari menggunakan JavaScript sebaris tetapi sebagai gantinya, coba perkecil dan satukan pustaka JavaScript Anda untuk menurunkan jumlah permintaan HTTP yang diperlukan untuk membuat salah satu halaman Anda. Namun, Anda tidak dapat memiliki unduhan paralel di sebagian besar peramban yang berarti peramban tidak akan mengunduh apa pun saat mengunduh JavaScript, membuat halaman tampak seolah-olah memuat dengan lambat.

Untuk menghindari hal ini, Anda dapat memuat JavaScript Anda setelah memuat CSS Anda dengan menempatkan JavaScript di akhir dokumen HTML Anda jika ada, sebaiknya sebelum menutup tag body.

Gunakan Elemen Judul dengan Bijak

Menggunakan elemen h1 hingga h6 untuk menunjukkan urutan konten HTML Anda membuat konten Anda lebih ramah pengguna untuk, agen pengguna, mesin telusur, dan perangkat lunak pembaca layar. Saat menggunakan blog, yang terbaik adalah Anda menggunakan elemen h1 untuk judul posting blog dibandingkan dengan nama situs karena sangat ideal untuk mesin pencari.

Gunakan tag HTML yang Tepat di Tempat yang Tepat

Penting bagi Anda untuk mengetahui tag HTML yang tersedia dan cara menggunakannya secara akurat untuk menghindari kebingungan dan membuat struktur konten yang relevan.

Kami harap Anda menemukan artikel ini bermanfaat.

Jika Anda ingin mengetahui lebih banyak hal menarik tentang kesehatan situs Anda, dapatkan rekomendasi dan peringatan pribadi, pindai situs web Anda dengan Diib. Hanya membutuhkan waktu 60 detik.

Masukkan Situs Web Anda

Misalnya “www.diib.com”

Saya tidak bisa mendapatkan cukup dari DIIB!! Alat terbaik dan saya sangat bersyukur telah menemukannya. Saya sangat menyukainya!! Semoga Anda tidak menaikkan harga karena ini sangat sempurna.
Testimonial
Katarina Gage
Direktur Operasi di ahoymatey.com.au

Hindari Menggunakan Div Secara Berlebihan

Beberapa pengembang membungkus tag div pada tag div lain yang memiliki lebih banyak tag div yang membuat banyak div. Div dianggap sebagai elemen tidak berarti yang hanya boleh digunakan ketika tidak ada elemen lain yang sesuai yang tersedia sesuai dengan spesifikasi HTML W3C. Hindari memiliki banyak div dengan menggunakannya secara bertanggung jawab dan hanya jika diperlukan.

Gunakan Daftar Tidak Terurut untuk Navigasi

Elemen navigasi adalah faktor yang sangat penting dalam desain situs web jika dikombinasikan dengan CSS. Ini membantu menu navigasi Anda menjadi semantik dan indah. Berikut adalah dua cara untuk melakukannya:

Metadata HTML: Elemen yang Disertakan dan Praktik Terbaik

(Kredit Gambar: Studytonight)

Tutup Tag Anda

Spesifikasi W3C mengharuskan Anda menutup semua tag. Browser lain mungkin menampilkan halaman Anda dengan benar meskipun kegagalan untuk menutup tag Anda tidak valid menurut standar normal.

Gunakan Markup Huruf Kecil

Menjaga markup Anda dengan huruf kecil adalah praktik standar di industri ini. Memanfaatkan markup Anda memengaruhi keterbacaan kode Anda tetapi tidak mengubah tampilan halaman web Anda.

Gunakan Perbaikan IE Modular

Jika Anda mengalami masalah dengan halaman Anda, Anda dapat menggunakan komentar bersyarat untuk fokus pada penjelajah internet. Pastikan Anda membuat perbaikan modular untuk memastikan bahwa pekerjaan Anda tahan terhadap masa depan sehingga versi IE yang lebih lama tidak memerlukan dukungan apa pun.

Validasi Kode Anda

Anda tidak boleh melihat validasi sebagai evaluasi akhir dari pekerjaan yang baik terhadap pekerjaan yang buruk. Sebuah karya yang memvalidasi belum tentu kode yang baik dan sebagai alternatif, sebuah karya yang tidak sepenuhnya memvalidasi belum tentu kode yang buruk.

Anda dapat menggunakan layanan validasi otomatis sebagai debugger yang berguna untuk mengidentifikasi kesalahan rendering. Validasi pekerjaan Anda sesering mungkin saat menulis HTML untuk menghindari masalah yang mungkin sulit diidentifikasi setelah Anda menyelesaikan pekerjaan Anda.

Tulis Kode yang Diformat Secara Konsisten

Menulis basis kode yang bersih dan dimaksudkan dengan baik memunculkan profesionalisme Anda dan memudahkan pengembang yang mungkin mengerjakan kode Anda. Anda juga akan meningkatkan keterbacaan pekerjaan Anda saat Anda menulis markup dengan indentasi yang benar dari awal. Sebagai contoh:

Metadata HTML: Elemen yang Disertakan dan Praktik Terbaik

(Kredit Gambar: html.com)

Hindari Komentar Berlebihan

Tujuan mendokumentasikan kode Anda adalah untuk membuatnya dapat dimengerti dan mengomentari kode Anda masuk akal dan logis untuk bahasa pemrograman seperti Java, PHP, dan C#. Namun, markup sangat jelas dan Anda tidak perlu mengomentari setiap baris dalam XHTML/HTML. Meninjau pekerjaan Anda untuk semantik akan membantu Anda jika Anda banyak berkomentar di HTML Anda untuk menjelaskan prosesnya.

Diib: Dapatkan Statistik Metadata HTML Anda Di Sini!

Menggunakan elemen-elemen ini dan mengikuti panduan akan membantu Anda dalam upaya SEO Anda.

Elemen seperti deskripsi meta yang baik akan meningkatkan rasio klik-tayang Anda dari pencarian meskipun itu tidak meningkatkan peringkat Anda. Meta tag sekarang digunakan di platform media sosial seperti Twitter dan Facebook. Anda dapat menggunakan tag untuk memeriksa bagaimana data Anda dibagikan di Facebook. Bermitra dengan Diib Digital akan memberi Anda metrik penting terkait metadata Anda sehingga Anda dapat membuat keputusan yang efektif tentang kesehatan situs web Anda.

Berikut adalah beberapa fitur Dasbor Pengguna kami, kami yakin Anda akan menyukainya:

  • Tujuan Khusus yang dirancang untuk meningkatkan kinerja situs web
  • Lansiran yang memberi tahu Anda tentang Otoritas Domain Anda, masalah SEO teknis lainnya
  • Halaman rusak di mana Anda memiliki backlink (404 checker)
  • Kata kunci, backlink, dan alat pemantauan dan pelacakan pengindeksan
  • Pengalaman pengguna dan pengoptimalan kecepatan seluler
  • Pengoptimalan judul gambar

Klik di sini untuk pemindaian gratis Anda atau cukup hubungi 800-303-3510 untuk berbicara dengan salah satu pakar pertumbuhan kami.