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 utf-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>
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.
Thank gan info nya bisa aga ngerti dari meta tags
Terimakasih atas kunjungannya agan Dimaz..
Thnaks mas. Singkat, jelas dan padat. Akhirnya mengerti funsi charset pada HTML
Terimakasih atas kunjungannya…
Thanks Infonya Gan (y)
Sama2 gan, semoga bisa bermanfaat…
terima kasih banyak atas panduannya
sudah tidak takut lagi dengan kode2(mark up buat html)
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.. :)
apakah saat ini meta yag sangat penting tuk seo
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.
maaf mau tanya, ini kalau di isi dengan "content-type atau default-style" jadinya n fungsinya untuk apa ya,,?
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
Ok trims berat mas Andre untuk jawabannya
gan mau request.. kalo bisa dibuat ebook nya hehehe.. thx bwt ilmunya (y)
Thx gan,sangat bermanfaat .mudah mudahan blog agan maju terus
Terimakasih juga atas kunjungannya gan :)
bermanfaat sekali mas, thanks untuk infonya ..
newbie patut bersyukur
Terimakasih juga atas kunjungannya… Selamat belajar :)
biar tidak Refresh bagaimana? bantuan please…………..
Terimakasih gan akhirnya bisa dimengerti
Siip, semoga bisa bermanfaat gan :)
maksih gan ilmunya. kalo naruh link dari facebook fanspage ke web gmn ya?
Bisa lanjut kesini gan: https://developers.facebook.com/docs/plugins/page-plugin
Nanti tinggal copy paste saja kode yang diberikan ke blog kita
Gan biar angka 3 nya hitungan bisa mundur, scrip apa yang harus ditambahin ya?
Kalau seperti itu harus menggunakan JavaScript gan. Walaupun terkesan sederhana, scriptnya lumatan ribet, apalagi jika belum belajar JavaScript :)
biasa nya cuma contek-contek aja sekarang setelah baca artikel agan ini jadi lebih paham sama meta tag.
mau tanya om….
saya punya blog setelah saya cek untuk validasi html 5 ada satu yg error
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
saya mau hapus tetapi masih takut berpengaruh sama seo nya.
jawaban om atas pertanyaan om lukman diatas sedikit membuat saya paham tetapi saya masih ragu…
Itu penulisan meta tag versi lama gan, kalau untuk HTML5 udah lebih ringkas:
<meta charset="UTF-8">
Tp menurut saya g harus lolos validasi kok, situs duniailkom juga banyak errornya. Atau silahkan cek situs2 besar seperti google.com, yahoo.com, kompas.com, bakal lebih banyak lagi error. Jadi g perlu "harus" lolos validasi html5.
om andre, ada tulisan yang salah tertulis "UFT-8" seharusnya "UTF-8" :-D
Terimakasih koreksinya gan… kayaknya saya terlalu semangat nih, sampe kebalik nulisnya :)
Segera diperbaiki…
Trimakasih pengetahuanya gan saya pendatang baru mau gabung juga
Mas Andre mau tanya, mungkin sedikit OOT.
Cara agar browser selalu load file yang baru saat dibuka bagaimana ya Mas?
Sebagai contoh: kita membuat sebuah page, lalu membukanya pada browser. Setelah itu kita ingin mengganti content page tsb. Namun setelah disave + diupload ulang, page yang dimunculkan pada browser adalah page yg pertama (belum berubah). Mungkin ini disebabkan cache browser yg ckup merepotkan.
Untuk file CSS/Javascript kita bisa menambahkan sperti style.css?v=1.1. Namun untuk 'konten' page nya sendiri bagaimana ya Mas?
Terima kasih sebelumnya :)
Mungkin bisa pakai tag <meta> berikut:
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
Penjelasannya cukup panjang, silahkan kesini mas:
http://stackoverflow.com/questions/49547/how-to-control-web-page-caching-across-all-browsers
http://stackoverflow.com/questions/1341089/using-meta-tags-to-turn-off-caching-in-all-browsers
Dari komentar yang ada, ada yang bilang berhasil, ada yang g berhasil, hehe…
Tapi biasanya untuk konten relatif jarang kena cache, umumnya yang di cache hanya file css dan javascript external.
Bolehkah ditambahkan penjelasan tentang attribut content untuk meta tag ini?
terutama di bagian description. Terimakasih..
Terimakasih tutorialnya
Gan, apa ( meta name: description ) dengan ( meta 0g:description ) yang dipasang bersamaan dalam satu laman/artikel dapat menyebabkan duplikasi tag meta? atau itu adalah meta yang berbeda?
Atribut tag <meta> dengan awalan og, seperti property="og:description", property="og:title", property="og:image" itu termasuk kedalam "Open Graph".
Open Graph ini merupakan tag <meta> khusus untuk aplikasi social media seperti facebook. Misalnya ketika kita posting sebuah link di facebook, akan keluar gambar kecil, judul, dan deskripsi singkat dari link tersebut, ini semua diambil dari isi Open Graph.
terima kasih.
sangat bermanfaat untuk informasi mengenai meta tag nya mas. Kalau bikin meta tag untuk masukkan ke heading gimana caranya mas?
Meta tag harus di tempatkan ke dalam tag <head> di HTML, jadi tidak bisa diinput ke tag lain seperti <h1> atau heading.
Selamat Malam Admin, Mau tanya nih.
masalah Atribut charset pada meta tag, kan sebelumnya dijelaskan bahwa "Atribut charset pada meta tag digunakan untuk memberi tahu web browser dengan karakter set apa halaman web akan ditampilkan. 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. "
mau tanya:
1. Masalah seperti apa yang akan terjadi apabila web yang saya buat tidak memakai atribut charset=utf-8 lalu di akses di negara2 yang tidak menggunakan huruf latin (jepang, arab, dll)? apakah tulisan di web saya tidak akan terlihat di negara tersebut atau bagaimana?
Terima Kasih sebelumnya
Penjelasan saya diatas memang ada yang kurang nih (akan segera dikoreksi..)
Sebenarnya nanti yang akan jadi masalah adalah jika di web tersebut terdapat karakter non-latin seperti huruf jepang, china atau arab. Seandainya di halaman web kita tidak ada karakter khusus ini (hanya terdiri dari alphabet latin saja), tidak menjadi masalah meskipun diakses dari negara2 tersebut.
Misalnya teks ini: 一二三四五. Jika meta-tag charset halaman web duniailkom tidak di set ke utf-8, teks ini tidak akan tampil atau digantikan karakter kotak-kotak.
Tapi bisa jadi juga meskipun tanpa meta-tag charset utf-8, karakter itu bisa dibaca. Karena web server / web browser kadang otomatis mengubah charset agar tampilannya tidak bermasalah.
min klau meta geo placename & geo country apa wajib d pasang?
Tidak wajib. Untuk meta tag, yang wajib hanya charset, yang jika tidak ditulis dianggap error oleh validasi W3C.
Hallo pak andre, boleh saya minta fb, whatapp, atau emailnya ? Saya mau belajar html, css, javascript, dan saya kurang jelas saat membaca web bapak, kalo bisa mohon dibalas, terima kasih sebelumnya..
Sincerely,
Silahkan… tapi berhubung kesibukan, dan karena web duniailkom juga dikunjungi ribuan orang setiap hari, nomor WA saya khususkan hanya untuk membahas materi di buku duniailkom saja (jika ada yang ingin ditanyakan). Kalau diluar itu seperti tugas / skripsi / project pribadi / materi yang tidak ada dibuku, saya belum bisa bantu.
Apabila berminat untuk order buku duniailkom, bisa kontak via email ke [email protected] atau WA ke 083180285808. Terimakasih…
sangat membantu sekali pak andre,
awal nya saya tidak mengerti dengan apa itu meta tags
tapi sekarang sudah mulai memahami sepenting apa itu meta tags
terimakasih pak andre,
moga semakin sukses web duniailkom.com ini pak andre
Siip, sama2..
min saya belum begitu mengerti fungsi keyword dan description secara garis besar yolong bisa jelaskan untuk apa sebenar nya fungsi dari keyword dan descriptio???
Singkatnya itu ditujukan untuk mesin pencari seperti Google.
Jika kita search "belajar PHP" di Google, akan tampil semua web yang di bagian meta keyword dan description-nya terdapat kata-kata "belajar PHP". Tapi sekarang ini tidak terlalu berdampak karena sering di salah gunakan untuk spam. Kalaupun ada efeknya sudah sangat kecil.
Google punya algoritma sendiri untuk menampilkan hasil pencarian, jadi meskipun sebuah web tidak memiliki meta-tag keyword dan description, tetap bisa keluar di Google selama isi webnya sesuai dengan hasil pencarian.
sangat membantu sekali, thanks min…
????
makasih gan infonya tercerahkan tentang meta tag
Pantas saja blog baru saya di tampilan penelusuran tidak ada deskripsinya, maksih gam informasinya
kak itu cara ngubah kalo saya mau refreshnya otomatis yang semula "3 detik" mau jadi "tak hingga" gimana yang ya kak tagnya?
Kalau maksudnya tidak ingin refresh, meta tag tersebut tidak perlu ditulis.
kak mau tanya, saya bingung dalam mendefiniskan bahasa dalam html bawaan template, , dalam pengecekan hasilnya seperti ini= "Language detected in text: id"…. "Language defined in HTML: en" …" The given language en does not conform with the detected language id." pake teplate yang lama lolos disini. sekarang kebingungan. seperti ini awalannya
<?xml version="1.0" encoding="UTF-8" ?>
!DOCTYPE html>
<html b:css='false' b:responsive='true' b:version='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'
<head>
pengennya dalam text: id dalam : id..
maaf kak kepanjangan
Ini template blogspot kan ya? template blogspot sebenarnya sudah bukan HTML lagi, tapi perpaduan HTML dan "bahasa kode dari blogspot". Kode seperti <html b:css='false'> itu tidak ada di HTML.
Kebetulan saya tidak mendalami kode2 blogspot, jadi belum bisa bantu apa yang harus diubah untuk menukar bahasa. Kalau di HTML biasa, pengaturan bahasa ini cukup dengan perintah: <html lang="id">
Ada referensi meta tag untuk social media ?
Untuk saat ini materi tersebut baru tersedia di buku HTML Uncover (tersedia meta tag untuk twitter dan facebook)
Mau nanya min, itu atribut content buat apa ya, kok belum di bahas?
Content itu berisi nilai dari meta tag yang ditulis, misal untuk <meta name="keywords">, maka content-nya dipakai untuk menulis keyword yang diperlukan.
Terima kasih informasinya.. selama bertahun-tahun baru tau gunanya meta hehehe…. terima kasih om…