Meta tag dan meta data HTML

Meta tag digunakan untuk memberi informasi kepada search engine mengenai web page yang kamu miliki tetapi meta tag ini tidak bisa dilihat oleh web browser yang kamu punya. Informasi yang didapat oleh search engine dari meta tag kemudian diberikan kepada visitor melalui search engine.

Dulu meta tag digunakan oleh crawler atau mesin pencarinya search engine semisal google untuk mengenali web page yang kamu miliki dan berdasarkan informasi tersebut search engine merangking web page kamu.

Tetapi karena kebanyakan webmaster menyalahgunakan meta tag untuk mendongkrak hasil pencarian web page yang mereka miliki di search engine maka sekarang search engine sudah tidak menganggap penting meta tag. Walaupun begitu meta tag tetaplah penting untuk kamu modifikasi.

Ada berbagai macam attribute yang bisa kamu pakai untuk melengkapi <meta> tag, diantaranya adalah:

attribute value description
name description Memberi deskripsi singkat mengenai web page
keywords Memberi informasi mengenai beberapa kata penting dari web page
author Memberi informasi mengenai penulis web page
generator Memberi informasi mengenai engine beserta versinya yang dipakai
revised Memberi informasi mengenai update web page terakhir
http-equiv content-type Memberi informasi character encoding
refresh Merefresh web page secara otomatis setelah beberapa second
content text sebagai pelengkap attribute name atau attribute http-equiv
scheme format/URI Tidak support HTML 5.
Memberi informasi mengenai format yang digunakan oleh value dari attribute content.
charset** character_set Memberi informasi character encoding

** = Baru ada di HTML 5

Meta tag description

Kalau kamu sering atau pernah menggunakan mbah google maka kamu pasti pernah melihat meta tag description.

meta description

penampakan meta description dan meta author pada pencarian google

Untuk membuat meta description maka kamu harus menempatkan meta description di dalam <head> element supaya meta description bisa dibaca oleh crawler maupun bot. <meta> tag description membutuhkan name attribute dan content attribute.

Code meta tag description:

<head>
<meta name="description" content="Bang juju membahas WordPress" />
</head>

Meta tag description ini bisa dimanfaatkan oleh web developer untuk memberi informasi singkat mengenai web page yang mereka miliki untuk dicrawling oleh search engine. Contoh dari code diatas, name attribute kita atur ke [description] kemudian deskripsinya dari web page yang kamu miliki kamu masukkan ke dalam content attribute.

Meta tag keywords

Meta tag keywords bisa kamu gunakan untuk memasukkan informasi berupa beberapa keyword atau kata penting yang ada di dalam web page yang kamu miliki. Keyword di sini berupa kata-kata yang kamu perkirakan kalau orang lain ingin mencari sesuatu tentang informasi yang ada dalam web page kamu.

Code meta tag keywords:

<head>
<meta name="keywords" content="air bersih, polusi, pelestarian hutan" />
</head>

Pisahkan tiap keyword dengan koma dan jangan gunakan terlalu banyak keyword karena tidak baik untuk index rangking yang kamu miliki di search engine.

Meta tag author

Meta tag author berfungsi untuk memberikan informasi mengenai nama penulis webpage.

Code meta tag author:

<head>
<meta name="author" content="Juju Bandung">
</head>

Meta tag generator

Digunakan untuk memberikan informasi mengenai engine atau software beserta versinya yang digunakan untuk menampilkan HTML web page.

Code meta tag generator:

<head>
<meta name="generator" content="WordPress 13.0">
</head>

Meta tag revised

Meta tag revised digunakan untuk memberi informasi mengenai update terakhir web page.

Code meta tag revised:

<head>
<meta name="revised" content="05/2/2014" />
</head>

Meta tag content-type

Pada umumnya, server memberikan informasi mengenai settingan yang ada di server secara otomatis buat web browser yang dibutuhkan sebuah web page. Tetapi ada beberapa server yang tidak melakukan hal ini.

Buat webmaster yang tidak memiliki akses ke server maka dapat memakai meta element yang ditaruh di web page header untuk memberikan informasi mengenai settingan server buat web browser.

Misal, biasanya informasi settingan character encoding yang digunakan server dikirimkan secara otomatis buat web browser visitor oleh server yang digunakan. Tetapi ada kasus dimana server tidak mengirimkan informasi ini kepada web browser. Untuk mengatasi hal ini maka webmaster menuliskan informasi ini secara manual melalui metadata yang dituliskan di header web.

Code meta tag content-type:

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

UPDATE!

Code meta tag content-type pada HTML 5 sudah menjadi lebih ringkas, lihat perbedaannya di bawah.

Code meta tag content-type untuk HTML 5:

HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5: <meta charset="UTF-8">

Meta tag refresh dan redirect

Dengan meta tag refresh maka kamu bisa meredirect visitor ke domain lain atau kamu bisa menggunakan meta tag refresh untuk mengupdate informasi mengenai web page kamu yang baru. Untuk refresh biasa kamu hanya perlu code dibawah.

Code refresh sederhana:

<head>
<meta http-equiv="refresh" content="10" />
</head>

Bila menggunakan meta refresh untuk redirect maka content attribute membutuhkan dua argument yang dipisahkan oleh titik koma [ ; ]. Argument pertama berisi perintah berapa detik sebelum web page harus refresh atau redirect secara otomatis. Argument kedua berisi perintah kepada browser kemana URL atau alamat domain yang harus dituju.

Code refresh dan redirect:

<head>
<meta http-equiv="refresh" content="10; url=http://www.bangjuju.com" />
</head>

Dari code diatas, setiap 10 detik blog bangjuju.com akan refresh secara otomatis.

Meta tag refresh ini bisa dimanfaatkan untuk website yang berisi berita-berita, angka-angka saham, ataupun informasi yang harus di update lebih cepat dibandingkan informasi biasa tanpa visitor perlu melakukan apapun.

Untuk meredirect visitor ke tempat lain Kamu hanya perlu merubah URL dari code. Biasanya webmaster menggunakan metode ini untuk meredirect visitor secara otomatis ke web page yang baru setelah membaca pesan selama beberapa detik di web page yang lama. Contoh dibawah, setelah 5 detik maka visitor akan diredirect ke yahoo.com.

Code refresh and redirect:

<head>
<meta http-equiv="refresh" content="5; url=http://www.yahoo.com" />
</head>

PENTING!

Menggunakan meta tag refresh and redirect ini harus dengan pertimbangan yang sangat matang karena code ini dapat menipu visitor untuk mengunjungi page yang lain. Selain itu code ini termasuk code yang dilarang penggunaannya oleh peraturan internasional mengenai web content kecuali untuk beberapa jenis penggunaan saja.

Meta tag scheme

Scheme attribute berfungsi untuk memberi informasi mengenai format dari value yang ada di attribute content.

Misalkan saja value dari sebuah content attribute adalah berupa tanggal [01-03-2013], maka hal ini bisa menimbulkan kebingungan karena orang akan bertanya apakah tanggal tersebut ditulis dengan format bahasa Inggris (bulan dulu baru tanggal : 3 januari 2013) atau format bahasa Indonesia (tanggal dulu baru bulan : 1 Maret 2013) ?.

Code scheme:

<head>
<meta name="date" content="2013-01-03" scheme="YYYY-MM-DD">
<meta name="identifier" content="5-2345-6634-6" scheme="ISBN">
</head>

UPDATE! code scheme ini sudah tidak dipakai pada HTML 5.

Meta tag charset

Meta tag charset ini baru ada pada HTML 5 yang menggantikan fungsi meta tag content-type untuk meringkas code menjadi lebih singkat. Walaupun begitu kita masih diperbolehkan untuk memakai code meta tag content-type.

Code meta tag charset ini berfungsi untuk memberi informasi character encoding pada document HTML.

Code meta tag charset:

<head>
<meta charset="UTF-8">
</head>

Value yang biasa dipakai untuk charset yaitu:

  • UTF-8 – untuk Unicode
  • ISO-8859-1 – untuk Latin alphabet

Sebenarnya semua character encoding bisa dipakai, hanya saja tidak semua browser bisa mengerti semuanya. Jadi pilihlah character encoding yang lebih banyak digunakan oleh web browser.

Untuk melihat daftar character encoding yang lengkap kamu bisa mengunjungi character set oleh iana.

Leave a Reply

Your email address will not be published. Required fields are marked *

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>