Home / HTML / Belajar HTML – Meta Element

Belajar HTML – Meta Element

Umumnya, element pertama yang berada di dalam tag <head> adalah meta element. Tag <meta> berfungsi untuk memberi informasi mengenai halaman HTML yang saat ini sedang ditampilkan. Tag ini ditujukan bukan kepada pengunjung website, tetapi kepada web browser dan ‘robot’ seperti mesin pencari. Oleh karena itu efek dari tag <meta> tidak akan tampak bagi pengunjung.

Seluruh tag <meta> bersifat opsional dan tidak harus ada dalam setiap halaman HTML. Pengecualian untuk hal ini adalah tag <meta charset=”UTF-8″> yang jika tidak ditambahkan, validator HTML5 akan mengeluarkan error. Di dalam tag <meta>, atribut-lah yang akan mendefinisikan fungsi dari tag <meta> tersebut. Atribut untuk meta tag sangat beragam, dan berbagai fungsi baru terus ditambahkan (terutama pada HTML5).

Meta charset

Meta charset berfungsi memberi instruksi kepada web browser tentang bagaimana cara menerjemahkan karakter-karakter yang ada di dalam halaman HTML. Charset adalah kumpulan daftar kode-kode bit komputer dengan pasangan karakter yang harus ditampilkan. Penjelasan tentang charset ini agak bersifat teknis, namun mudah-mudahan anda bisa memahaminya.

Di dalam komputer, setiap karakter seperti huruf dan angka disimpan di dalam kumpulan bit yang terdiri dari angka 1 dan 0. Sebagai contoh, huruf “A” akan disimpan sebagai bit 1000001 atau “41” dalam heksadesimal. Proses penerjemahan bit “1000001” menjadi “A” merujuk kepada tabel ASCII1, atau biasa disebut dengan charset ASCII.

Permasalahannya, tabel charset ASCII hanya bisa menyimpan huruf dan angka latin. Untuk karakter non-latin (seperti huruf arab, china, jepang, dll), diperlukan charset khusus.

Selama perkembangan internet dan HTML, banyak bermunculan charset-charset untuk masingmasing bahasa ini. Sebagai contoh, charset big5 digunakan untuk huruf cina, x-euc-jp untuk huruf jepang, dan iso-8859-7 untuk huruf yunani. Charset yang terpisah-pisah ini menyulitkan web browser dalam menerjemahkan sebuah karakter.

Pada era XHTML, diperkenalkan charset UTF-8 (Unicode Transformation Format-8) yang mendukung hampir seluruh karakter yang ada di dunia. Dalam perkembangan selanjutnya, HTML5 juga menggunakan UTF-8 sebagai charset standar. Dengan menggunakan UTF-8, kita tidak perlu khawatir mengenai karakter atau bahasa apa yang akan digunakan. UTF-8 mendukung hingga lebih dari 10.000 karakter untuk bermacam-macam bahasa yang ada di dunia. Di dalam HTML5, penulisan meta tag charset untuk UTF-8 adalah sebagai berikut:

<meta charset="UTF-8">

Sebagai perbandingan, di dalam HTML 4 dan XHTML penulisannya agak panjang, seperti
berikut ini:

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Dari beberapa referensi, ada yang menyebutkan bahwa <meta charset=”UTF-8″> sepenuhnya opsional untuk HTML5, sehingga boleh tidak ditulis. Akan tetapi, seperti yang telah anda lihat, validator HTML5 akan mengeluarkan error jika kita tidak menyertakan tag <meta> ini.Sebagai tambahan, pada tahun 2005 terdapat sebuah bug pada Internet Explorer yang dinamakan Google XSS. Hal ini terjadi karena situs google tidak menuliskan karakter set sehingga bisa digunakan untuk menyisipkan kode JavaScript. Oleh karena itu, sebaiknya anda selalu menambahkan meta tag charset pada setiap halaman HTML. Beberapa teks editor yang menyediakan template HTML, juga selalu menyertakan meta charset ini.

Meta Author, Keywords dan Description

Ketiga meta tag ini sengaja saya satukan karena fungsinya yang mirip. Ketiganya diperuntukkan untuk mempermudah ‘robot’ mesin pencari (seperti google) dalam mencari informasi. Meta tag ini ditulis dengan atribut name untuk jenis informasi, dan atribut content untuk isi informasinya. Sebagai contoh, karena situs beliprogram ditulis atas nama “beliprogram”, maka saya membuat meta tag author sebagai berikut:

<meta name="author" content="beliprogram">

Selanjutnya, situs beliprogram adalah situs tutorial bahasa pemrograman web seperti HTML, CSS, JavaScript, PHP dan MySQL. Oleh karena itu saya memutuskan untuk menggunakan kelimanya di dalam meta tag keyword:

<meta name="keywords" content="Tutorial HTML, Tutorial CSS,
Tutorial JavaScript, Tutorial PHP, Tutorial MySQL">

Terakhir, untuk meta tag description saya menulis penjelasan mengenai situs beliprogram:

<meta name="description" content="Situs Belajar Web Programming">

Pada awal kemunculannya, ketiga meta tag ini digunakannya untuk mempermudah mesin
pencari, namun saat ini efektifitas ketiganya sudah tidak terlalu berpengaruh. Ini terjadi karena
ketiganya banyak dimanfaatkan oleh blog spam untuk mencurangi hasil pencarian (dengan
menuliskan kata kunci sebanyak mungkin).

Walaupun demikian, tidak ada salahnya menyertakan meta tag ini pada setiap halaman HTML yang anda buat, asalkan keyword dan description yang digunakan sesuai dengan konten, dan tidak terlalu banyak hingga dianggap spam.

Belajar HTML - Meta Element

Meta Refresh

Meta tag ini cukup powerful, ia digunakan untuk membuat halaman web refresh secara otomatis setiap beberapa detik. Meta tag ini membutuhkan atribut http-equiv dengan nilai “refresh”, dan atribut content yang berisi berisi angka dalam satuan detik.

Jika anda menginginkan halaman web yang refresh setiap 1 menit, maka gunakan meta tag berikut:

<meta http-equiv="refresh" content="60">

Umumnya fitur ini ditambahkan ke dalam halaman web yang kontennya diupdate dengan sangat cepat (dalam hitungan menit atau detik) seperti situs berita. Dengan demikian, berita yang dilihat pengujung selalu berita terbaru. Beberapa web populer yang menggunakan fitur refresh adalah kaskus.co.id dan kompas.com.

Namun perlu juga diperhatikan bahwa dalam setiap siklus refresh, web browser akan memuat ulang seluruh halaman. Yang berarti akan mengurangi quota bandwidth untuk web server (tempat dimana situs berada) dan juga bandwidth pengunjung web.

Meta Tag Lainnya

Selain meta tag yang saya bahas disini, masih ada beberapa meta tag lain yang akan anda jumpai, beberapa terkait dengan penanganan CSS, JavaScript atau fitur yang dinamakan microdata. Karena meta tag ini masuk kategori yang ‘advanced’ dan butuh pengetahuan teknis, saya hanya akan membahasnya sekilas.

Meta tag X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Meta tag X-UA-Compatible digunakan untuk menangani permasalahan terkait web browser Internet Explorer. IE memiliki mode compatibility view yang aktif ketika halaman web diakses dari komputer lokal atau diakses dari dalam intranet. Fitur ini membuat perlakuan berbeda dalam menangani halaman web (mirip quirks mode). Meta tag diatas akan memaksa IE untuk tidak masuk ke mode compatibility view.

Meta tag Viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

Meta tag diatas biasanya digunakan pada web dengan desain responsive (responsive web design). Secara garis besar, meta tag viewport ditambahkan agar desain responsive dapat tampil sempurna di dalam layar berukuran kecil (seperti tablet atau smartphone).

Meta tag Robots

<meta name=”robots” content=”index, follow”>

Meta tag robots digunakan untuk memberi pesan kepada search engine bagaimana halaman web akan diproses, jika nilai atribut content adalah “index, follow“, maka mesin pencari akan mengindex halaman tersebut (dimasukkan ke dalam hasil pencarian).

Namun jika nilai atribut content adalah “noindex, nofollow“, maka isi web tidak akan dimasukkan ke hasil pencarian (mungkin halaman web bersifat rahasia dan anda tidak ingin seseorang mengaksesnya dari google).

Merangkum seluruh tag meta, berikut adalah contoh kode halaman index.html yang menggunakan tag-tag meta yang telah kita pelajari:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="Duniailkom">
<meta name="keywords" content="Tutorial HTML, Tutorial CSS,
Tutorial JavaScript, Tutorial PHP, Tutorial MySQL">
<meta name="description" content="Situs Belajar Web Programming">
<meta http-equiv="refresh" content="60">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<title>Belajar HTML</title>
</head>
<body>
<h1>Belajar HTML</h1>
<p>Mohon <strong>jangan diganggu</strong>,
lagi serius belajar <em>HTML</em></p>
</body>

</html>

Jika kita menjalankan kode diatas, tidak akan terlihat perubahan apa-apa. Karena tag <meta> memang tidak akan tampil di web browser, tapi hanya untuk informasi pelengkap untuk web browser.

About admin

Check Also

Sejarah dan Perkembangan Bahasa HTML

Belajar HTML – Title Element

Tag <title> mungkin menjadi tag paling penting di bagian <head>. Tag ini berfungsi untuk menampilkan …

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *