Membuat Tag Metadata HTML5

Meskipun sebagian besar tag di elemen head tidak ditampilkan web browser, namun sangat memiliki fungsi yang penting. Informasi yang terkandung di elemen head ini disebut metadata. Selain akan dimanfaatkan oleh web browser, metadata juga akan digunakan program komputer lain yang akan meng-akses halaman web kita.

Meta Tag HTML5

Contohnya program pembaca feed (feed reader) dan program crawler atau robot penelusur dari berbagai mesin pencari. Untuk memahami pemakaian tag-tag metadata, berikut ini adalah contoh potongan kodenya pada elemen head:

<!DOCTYPE html>
<html>

  <head>
    <base href="http://dieveloper.blogspot.co.id/">
    <title>Membuat Metadata</title>
    <meta charset="UTF-8">
    <meta name="description" content="Deskripsi halaman ini">
    <meta name="keywords" content="latihan, html, web">
    <meta name="author" content="Krisna Reza">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.ico">
    <style>
      body {background-color:#f2f2f2;}
    </style>
  </head>

  <body>
    Isi halaman body
  </body>

</html>

Berikut penjelasan fungsi tag metadata:

Tag	Penjelasan
<head>	Elemen utama sebagai tempat mendefinisikan sejumlah metadata untuk memberikan informasi umum mengenai dokumen. Elemen head bersifat wajib dan hanya boleh dipakai 1x saja dalam sebuah dokumen html.
<base>	Untuk mendefinisikan URL dasar bagi seluruh URL relative yang ada di halaman web. Tag <base> merupakan tag tunggal, sifatnya opsional. Disarankan diletakkan setelah tag pembuka <head>. Melalui tag <base> kita tidak perlu menulis secara lengkap URL-URL internal di dalam halaman web.
<title>	Untuk mendefinisikan judul dokumen pada browser. Kita hanya boleh mengisikan teks saja. Tag ini sangat penting dari sisi SEO dan sebaiknya selalu kita pakai.
<meta>	Untuk mendefinisikan metadata tambahan yang tidak bisa diwakili oleh tag metadata lain. Misalnya tag <title> dan <base>. Ada beberapa atribut untuk tag <meta> yang bisa kita sisipkan, namun minimal kita harus mengisikan meta charset dan description.
<link>	Untuk mendefinisikan kaitan antara dokumen ini dengan file lain. Penulisannya disertai dengan rel untuk menyebutkan jenis kaitan dan atribut href untuk nilai URL file yang dirujuk. Pada contoh tag <link> digunakan untuk merujuk file CSS dan file icon website. Tag <link> juga bisa merujuk file eksternal (diluar website).
<style>	Untuk mendefinisikan pemformatan halaman web menggunakan CSS secara inline. Kode style ditulis langsung dan menjadi bagian dari dokumen. Pada contoh tag <style> dipakai untuk mengatur warna latar halaman web.

Selain tag-tag diatas, elemen utama head juga bisa disisipi tag <script> dan cara peletakannya dapat kita lihat di artikel ini; menggambar dengan canvas. Berikut daftar atribut untuk tag <meta> beserta penjelasannya.


Attribute Meta	Penjelasan
charset	Untuk mendefinisikan character encoding bagi dokumen. Nilai yang digunakan umumnya UTF-8 atau ISO-8859-1.
name & content	Atribut name untuk mendefinisikan namanya. Sedangkan atribut content untuk mendefinisikan nilainya. Nilai yang ditulis dalam bentuk teks. Adapun namanya beragam, yang sering digunakan yaitu: - Description: deskripsi halaman. - Keywords: daftar kata kunci. - Author: nama pembuat dokumen/penulis.
http-equiv & content	Untuk mendefinisikan petunjuk tertentu pada web browser terkait pemrosesan dokumen. Nilai ditulis dalam bentuk teks. Nama atribut yang sering digunakan antara lain: - Refesh: Untuk memuat ulang halaman dalam sekian detik. - X-UA-Compatible: Menetapkan batasan versi browser untuk merender dokumen. - Cache-Control: Mengatur cara browser dalam menyimpan cache dokumen.

Sebagai catatan, ada puluhan bahkan ratusan nama yang digunakan dalam atribut name dan http-equiv. Beberapa nama pada kedua atribut tersebut sebenarnya dianggap tidak baku oleh W3C. Hanya atribut terdaftar saja yang dijadikan sebagai standar oleh W3C.