Membuat metadata pada website dan penjelasan nya

Walaupun sebahagian besar tag-tag di elemen head tidak ditampilkan di tampilan website browser, namun peranya sangat penting. Informasi yan...

Walaupun sebahagian besar tag-tag di elemen head tidak ditampilkan di tampilan website browser, namun peranya sangat penting. Informasi yang terkandung di elemen head ini disebut metadata.

metadata pada web
Nah selain akan dimanfaatkan oleh website browser, Metadata juga akan digunakan program komputer lain yang akan mengakses halaman website kita.

Contohnya program pembaca feed dan program crawler atau robot penelusur dari berbagai mesin pencari.

Nah untuk memahami pemakaian tag-tag metadata, berikut contoh potongan kodenya di elemen Head :
<!DOCTYPE html>
<html>
   <head>
      <base href="http://www.wavker.xyz/">
      <title>Contoh Metadata</title>
      <meta charset="UTF-8">
      <meta name="description"" content="deskripsi halaman kita">
      <meta name="keywords" content="latihan, html, web">
      <meta name="author" content="belajar metadata">
      <link rel="stylesheet" href=""bentuk.css">
      <limk rel="icon" href="favicon.ico">
      <style>
        body {background-color:#f2f2f2;}
      </style>
   </head>
 
   <body>
     isi halaman kita
   </body>
</html>

Dan berikut penjelasan dari tag-tag meta nya adalah :

  • <head>
Elemen utama kita sebagai tempat mendefinisikan sejumlah metadata untuk memberikan informasi umum mengenai dokumen ini.
Elemen head bersifat wajib dan hanya boleh dipakai sekali saja dalam sebuah dokumen.

  • <base>
Untuk mendifinisikan URL dasar bagi seluruh URL relative yang ada di halaman website. Tag <base> merupakan tag tunggal, sifatnya opsional. Disarankan diletakkan setelah tag pembuka <head>
Melalui tag <base>, Kita tidak perlu menulis secara lengkap URL internal di halaman website, Contoh URL htttp://www.wavker.xyz/ ditetapkan sebagai URL dasar, maka pada tag lain (misalnya <link>) kita hanya cukup menuliskan lokasi file css dan file favicon.ico.
sebagai informasi kebalikan dari URL relatifve adalah URL absolute (lengkap). tanpa tag <base> maka kita harus menuliskan semua URL secara lengkap.

  • <title>
Untuk mendefinisikan judul dokumen di browser, Kita hanya boleh mengisikan teks saja. dan Tag ini sangat penting dari sisi SEO dan wajib kita selalu pakai.

  • <meta>
Untuk mendefinisikan metadata tambahan yang tidak bisa diwakili oleh tag metadata lain, Misalnya tag <title> dan <base>.
Ada mungkin beberapa atribut untuk tag <meta> yang bisa anda sisipkan, namun minimal anda mengisikan meta charset dan description. Daftar atribut untuk meta dapat dilihat dilabel berikutnya.

  • <link>
Untuk mendifinisikan kaitan antara dokumen ini dengan file lain, penulisan nya disertai dengan rel untuk menyebutkan jenis kaitan dan atribut href untuk nilai URL file yang dirujuk.
Pada contoh, tag <link> kita gunakan untuk merujuk file CSS dan file gambar ikon website. Tag <link> juga bisa merujuk file ekternal (diluar website)

  • <style>
Untuk mendefinisikan pemformatan halaman website menggunakan CSS secara inline. Kode style ditulis langsung dan menjadi bagian dari dokumen.
Pada contoh, tag <style> dipakai untuk mengatur warna latar halaman website.

Selain Tag diatas elemen utama head juga bisa disisipi tag <script> , Berikut daftar atribut untuk tag <meta> beserta penjelasan nya :

Charset :  Untuk mendefinisikan character encoding bagi dokumen, Nilai yang digunakan umum nya UTF-8 atau ISO-8859-1.

Name & content : Atribut name yang untuk mendefinisikan namanya, sedangkan atribut content untuk mendefinisikan nilainya. Dan Nilai ditulis dalam bentuk teks, namanya pun beragagm, yang biasanya lazim dipakai :
- Description : Deskripsi Halaman
- keywords : daftar kata kunci.
- author : nama pembuat dokumen.

http-equiv&content : Untuk mendefinisikan petunjuk tertentu pada website browser terkait pemrosesan dokumen. Nilai pun ditulis dalam bentuk teks.
Adapun nama atributnya beragam, yang biasanya dipakai antara lain :
Refresh : Membuat ulan halaman setiap sekian detik.
X-UA-Compatible : Menetapkan batasan versi browser untuk merender dokumen.
Chace-Control : Yang mengatur cara browser dalama menyimpan chace dokumen.
metadata pada website

Sebagai catatan ada banyak puluhan bahkan ratusan nama yang akan digunakan dalam atribut name dan http-equiv, Beberapa nama pada kedua atribut tersebut adalah tidak dianggap tidak baku oleh W3C, Hal ini dikarenakan secara teknis orang dapat membuat nama sendiri untuk atribut name http-equiv. Dan hanya atribut terdafta saja yang akan dijadikan sebagai standart oleh WC3.
Kita pun tidak terlalu wajib menggunakan atribut name dan http-equiv pada semuanya, Hanya bebarapa atribut yang dipelukan dan penting saja untuk digunakan.

Postingan Terkait

0 komentar