5 May 2013,
 13

Salah satu tag yang cukup terkenal beberapa saat lalu, terutama untuk blogger adalah meta tag. Namun sekarang meta tag tidak sepenting beberapa tahun yang lalu. Namun apa sebenarnya meta tag ini? Kita akan membahasnya pada tutorial Belajar HTML Lanjutan: Pengertian Meta Tags ini.


Pengertian meta tag

Meta tag tidak dimaksudkan untuk menambah atau mempengaruhi isi dari konten halaman web kita, namun lebih kepada keterangan tambahan tentang halaman itu sendiri.

Meta tag biasanya di tempatkan pada bagian head dari HTML, dan biasanya terdiri dari beberapa meta tag dengan atribut yang berbeda-beda. Beberapa atribut yang biasanya di tampilkan adalah charset, name, http-equiv, dan content.

Penulisan meta tag adalah sebagai berikut: <meta … />. Meta tag merupakan tag yang berdiri sendiri, atau disebut juga self-closing tag.


Mengenal atribut name pada meta tag

Atribut pertama yang akan kita pelajari adalah name. Kita bisa menamakan isi dari atribut name ini dengan apa saja. Biasanya tag ini dipakai sebagai keterangan tentang kode HTML di dalamnya, seperti pembuat kode, tanggal, dan keterangan tentang isi halaman tersebut.

Untuk web asing biasanya atribut name akan berisi author, description, dan keywords. Author dimaksudkan untuk menambahkan nama pembuat kode kedalam HTML, description untuk keterangan tentang kode yang ada di dalam halaman itu, dan keyword berfungsi untuk kata kunci yang mewakili isi keseluruhan halaman.

Khusus untuk atribut keyword, beberapa tahun yang lalu, atribut ini sering digunakan sebagai kata kunci bagi mesin pencari dalam meng-index halaman website. Namun karena seringnya meta tag keyword ini di manipulasi supaya mempengaruhi hasil pencarian, belakangan ini mesin pencari seperti google tidak lagi menggunakannya.


Mengenal atribut charset pada meta tag

Atribut charset pada meta tag digunakan untuk memberi tahu web browser dengan karakter set apa halaman web akan ditampilkan. Biasanya atribut charset ini akan berisi nilai seperti utf-8, atau ISO-8859-1.

Jika kita tidak memasukkan charset ke dalam meta tag, tampilan halaman seakan tidak berubah, namun akan menjadi masalah jika halaman web kita dibuka oleh browser dari negara yang tidak menggunakan huruf latin seperti jepang, cina dan arab. Mendeklarasikan uft-8 sebagai atribut charset pada meta tag merupakan langkah untuk mengantisipasinya.


Mengenal atribut HTTP equivalents pada meta tag

Atribut HTTP Equivalents berkaitan dengan HTTP header. Dimana ini merupakan mekanisme web browser mengirimkan halaman ke browser kita. Nilai dari atribut HTTP Equivalents ini dapat berupa content-type, default-style dan refresh. Yang cukup menarik adalah jika nilai HTTP Equivalents kita isi dengan refresh, maka kita dapat mengontrol secara otomatis seberapa sering halaman akan di refresh.

Contoh penggunaan meta tag adalah sebagai berikut, save kode berikut sebagai meta.html

<!DOCTYPE html>
<html>
<head>
<title>Belajar Meta Tag HTML</title>
    <meta charset="utf-8" />
    <meta http-equiv="refresh" content="3" />
    <meta name="keywords" content="belajar meta tag html, 
    meta tag, belajar html dasar" />
    <meta name="description" content="dahulu 
    google akan menampilkan kalimat ini" />
</head>
<body>
   <p>
     Halaman ini akan otomatis di refresh setiap <em>3 detik</em>
   </p>
</body>
</html>

Pengertian Meta Tags

Dari contoh meta.html diatas, halaman tersebut akan direfresh secara otomatis setiap 3 detik, hal ini kita cantumkan pada <meta http-equiv=”refresh” content=”3″ /> dimana konten adalah penentu berapa detik halaman tersebut harus menunggu diantara tiap refresh. Atribut keyword dan description lebih ditujukan kepada mesin pencari seperti google, walaupun efektifitasnya sudah jauh berkurang saat ini.

13 responses on “Tutorial HTML Lanjutan: Pengertian Meta Tags dalam HTML

  1. Dimaz says:

    Thank gan info nya bisa aga ngerti dari meta tags

  2. Thnaks mas. Singkat, jelas dan padat. Akhirnya mengerti funsi charset pada HTML

  3. Andi Ikbal says:

    Thanks Infonya Gan (y)

  4. bagus DKN says:

    terima kasih banyak atas panduannya
    sudah tidak takut lagi dengan kode2(mark up buat html)

    • Andre says:

      Hehe.. kalau sudah mengerti cara penggunaannya, saya yakin bagus akan menyukainya.. mudah2an tutorial di duniailkom ini bisa mengubah dari ‘takut’ menjadi ‘senang’, atau malah ‘addicted’ dengan pemograman web seperti saya.. :)

  5. apakah saat ini meta yag sangat penting tuk seo

    • Andre says:

      Beberapa sumber mengatakan bahwa meta tag ini tidak terlalu berpengaruh lagi untuk SEO seperti halnya beberapa tahun yang lalu. Hal ini terjadi karena meta-tag banyak disalah gunakan untuk membuat keyword sebanyak-banyaknya (spam).

      Saya tetap menambahkan meta-tag keywords dan description sebagai pelengkap, namun hanya seperlunya saja.

  6. Lukman says:

    maaf mau tanya, ini kalau di isi dengan “content-type atau default-style” jadinya n fungsinya untuk apa ya,,?

    • Andre says:

      Meta-tag dengan nilai http-equiv=”Content-Type” biasanya digunakan sebagai kesatuan dalam contoh berikut:

      <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″/>

      Fungsinya adalah untuk memberitahukan kepada web browser bahwa isi dari teks yang ada berupa “text/html”. Meta-tag ini umum digunakan di dalam halaman web.

      Sedangkan default-style digunakan untuk menentukan style dari halaman HTML. Style yang dimaksud contohnya adalah inline-style CSS, seperti: <div style=”color: red;”>, sehingga di bagian header dapat ditambahkan perintah : <meta http-equiv=”Content-Style-Type” content=”text/css”/>. Namun karena secara default web browser menggunakan CSS sebagai style utama, hal ini tidak perlu ditulis.

      Contoh lain untuk default-style adalah menentukan jenis bahasa pada perintah: <div onclick=’alert(“hello”)’>, agar web browser menjalankan perintah tersebut dengan JavaScript, tambahkan kode berikut di bagian header: <meta http-equiv=”Content-Style-Type” content=”text/javascript”/>. Tetapi karena JavaScript adalah bahasa script default pada hampir semua web browser, meta tag ini juga tidak perlu ditambahkan.

      Sebagian besar meta-tag bersifat opsional, dimana kita tidak perlu menuliskannya. Untuk referensi lebih lanjut mengenai meta-tag http-equiv bisa mengunjungi http://reference.sitepoint.com/html/meta/http-equiv

  7. Lukman says:

    Ok trims berat mas Andre untuk jawabannya

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>