SampelKode - Hallo!! Tidak terasa ini adalah tutorial yang ke 6 mengenai HTML, etto... Pada tutorial kali ini saya akan mengajak teman-teman untuk mengenal META TAG HTML. Sebelumnya saya sudah posting Tutorial HTML - Tag HTML silahkan anda pelajari dulu TAG HTML jika masih belum jelas.
Apa itu Meta Tag?
Meta Tag HTML adalah code atau tag html yang terletak di bagian <head> dan </head>
mengerti?? Coba dipahami dulu, jika sudah kita lanjut penjelasannya. Jadi meta tag itu terletak diantara tag <head> dan </head> nah di dalam tag <head> tersebut kita bisa membuat meta tag.
Tujuan meta tag untuk apa sih? Tujuan meta tag adalah untuk memberikan informasi kepada search engine atau robot pencari mengenai isi di website kita. Dengan menggunakan meta tag inilah search engine dapat mengenai website kita. Bisa dibilang meta tag ini untuk pengunjung supaya lebih mengenal website kita.
Meta tag ini tidak akan memberikan pengaruh apa-apa pada tampilan website, jadi teman-teman tidak perlu khwatir. Meta tag sendiri memiliki banyak jenis diantaranya ada meta untuk deskripsi, meta untuk author, meta untuk tampilan dan lain-lain. Tapi tenang saja, saya akan membahas tag meta satu per satu.
Berikut daftar meta tag yang saya bahas dalam tutorial HTML - Meta HTML
Sebenarnya masih banyak meta lainnya, namun saya hanya bahas meta tag yang menurut saya penting untuk website.
- Meta Charset UTF-8
- Meta Author (Meta Pemilik)
- Meta Description (Meta Deskripsi)
- Meta Keyword
- Meta Refresh
- Meta X-UA-Compatible
- Meta Viewport
- Meta Robot
Banyak yak? Tidak banyak kok, oke saya akan membahasnya dimulai dari nomer 1 dulu ya biar adil hihihi.....
Meta Charset UTF-8
Meta Charset adalah tag meta yang digunakan untuk memberikan instruksi kepada web browser mengenai karakter-karakter tulisan yang ada di website kita.
Charset sendiri adalah kumpulan daftar kode-kode bit komputer dengan pasangan karakter yang harus ditampilkan. Memang penjelasan mengenai charset ini cukup rumit tapi saya sangat sarankan teman-teman untuk memahaminya karena ini penting loh!!
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 ASCII¹, 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.
Nah maka dari itu terciptalah meta charset utf-8. Berikut contoh code untuk meta charset utf-8
<meta charset="UTF-8"/>
<!DOCTYPE html>
<html>
<head>
<title> Tutorial HTML - Meta HTML </title>
<meta charset="UTF-8">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
<html>
<head>
<title> Tutorial HTML - Meta HTML </title>
<meta charset="UTF-8">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
Meta Author
Meta author adalah meta tag yang digunakan untuk memberikan deskripsi mengenai pemiliki website tersebut, meta author sendiri memberikan instruksi ke web browser untuk menampilkan author yang telah di tulis di meta author.
Meta Author ini memang tidak berpengaruh di dalam tampilan website, namun berpengaruh di dalam SEO (Search Engine Optimization). Lalu apa itu SEO? Maaf saya tidak akan menjelaskan seo dalam tutorial kali ini. Nantikan saja tutorial mengenai SEO. Pasti akan saya buat.
Cukup mengerti kan? Berikut contoh code untuk meta author.
<meta name="author" content="Saya adalah author SampelKode">
<!DOCTYPE html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
<meta name="author" content="Saya adalah author SampelKode">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
<meta name="author" content="Saya adalah author SampelKode">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
Meta Description
Meta Description (Meta Deskripsi) adalah meta tag yang digunakan untuk memberikan deskripsi tentang website anda ketika di dicari di search engine/mesin pencari, contohnya seperti gambar dibawah ini adalah bagian dari meta deskripsi.
Jelas bukan? seperti itulah kegunaan meta description. Berikut contoh penulisan code meta description :
<meta name="description" content="SampelKode adalah webiste untuk belajar web programming, disini anda dapat mempelajari HTML,CSS,JavaScript,PHP,MYSQL">
<!DOCTYPE html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
<meta name="description"
content="SampelKode adalah webiste untuk belajar web programming, disini anda dapat mempelajari HTML,CSS,JavaScript,PHP,MYSQL">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
<meta name="description"
content="SampelKode adalah webiste untuk belajar web programming, disini anda dapat mempelajari HTML,CSS,JavaScript,PHP,MYSQL">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
Meta Keyword
Meta keyword adalah meta tag yang digunakan untuk mendeskripsikan website ke search engine atau mesin pencari, meta keyword ini terlihat sama dengan meta deskripsi, penulisan meta keyword ini juga sama seperti meta description, cuma di meta keyword ini teman-teman harus menuliskan tujuan website teman-teman supaya search engine dapat mencari sesuai topik.
Berikut contoh penulisan code meta keyword :
<meta name="keyword" content="Situs Belajar Web Programming di indonesia">
<!DOCTYPE html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
<meta name="keyword" content="Situs Belajar Web Programming di indonesia">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
<meta name="keyword" content="Situs Belajar Web Programming di indonesia">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
Meta Refresh
Meta Refresh adalah meta tag yang digunakan untuk merefresh atau mengulang website selama detik yang sudah di tentukan, meta ini cukup menarik bukan? Meta refresh ini dapat memuat ulang halaman website anda sesuai detik an yang sudah anda tentukan, meta ini menggunakan attribute http-equiv dengan nilai "refresh" dan content yang disi dengan angka.
Berikut contoh penggunaan meta refresh :
<meta http-equiv="refresh" content="60">
Maksud dari contoh meta di atas adalah halaman website anda akan di refresh atau di muat ulang secara otomatis setiap 60 detik.
Meta ini biasanya digunakan oleh website berita yang setiap hari update selama beberapa detik. Coba praktekkan meta ini dan tunggu sesuai waktu yang telah anda tulis di atributte content.
<!DOCTYPE html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
<meta http-equiv="refresh" content="60">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
<meta http-equiv="refresh" content="60">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
Meta X-UA-Compatible
Meta tag X-UA-Compatible adalah meta tag yang digunakan untuk menerjemahkan website pada web browser internet exploler, mengapa meta ini harus digunakan? Karena pengguna internet exploler sekarang ini masih ada dan meskipun tidak banyak. 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.
Cukup membingukan bukan? Meta ini pasti kalian temukan jika kalian download template secara gratis maupun berbayar, berikut contoh penulisan code meta X-UA-Compatible
<meta http-equiv=""X-UA-Compatible" content="IE=Edge">
<!DOCTYPE html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
Meta Viewport
Meta Viewport adalah meta tag yang digunakan untuk memuat design responsive website, lebih tepatnya membuat tampilan website sesuai jika dibuka lewat smartphone, secara keseluruhan meta viewport ini digunakan untuk menampilkan design responsive yang sempurna untuk tablet ataupun smartphone.
Berikut contoh penulisan code meta viewport :
<meta name="viewport" content="width=device-width, initial-scale=1">
<!DOCTYPE html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
Meta Robot
Meta Robot adalah meta tag yang digunakan untuk memberi pesan kepada search engine bagaimana halaman web akan diproses, jika nilai attribute content adalah "index, follow", maka mesin pencari akan mengindex halaman tersebut (dimasukkan kedalam hasil pencarian).
Namun jika nilai attribute 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).
berikut contoh penulisan code meta robot :
<meta name="robot" content="index, follow">
<meta name="robot" content="noindex, nofollow">
<!DOCTYPE html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
<meta name="robot" content="index, follow">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
<meta name="robot" content="index, follow">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
Itulah beberapa meta tag yang dibutuhkan untuk website yang akan dibuild untuk blogger maupun wordpress, untuk merangkup semua tag yang telah saya tulis di Tutorial HTML - Meta HTML, berikut adalah hasil rangkupannya :
<!DOCTYPE html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
<meta charset="UTF-8">
<meta name="author" content="Saya adalah author SampelKode">
<meta name="description" content="SampelKode adalah webiste untuk belajar web programming, disini anda dapat mempelajari HTML,CSS,JavaScript,PHP,MYSQL">
<meta name="keyword" content="Situs Belajar Web Programming di indonesia">
<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="robot" content="index, follow">
<meta name="robot" content="noindex, nofollow">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
<meta charset="UTF-8">
<meta name="author" content="Saya adalah author SampelKode">
<meta name="description" content="SampelKode adalah webiste untuk belajar web programming, disini anda dapat mempelajari HTML,CSS,JavaScript,PHP,MYSQL">
<meta name="keyword" content="Situs Belajar Web Programming di indonesia">
<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="robot" content="index, follow">
<meta name="robot" content="noindex, nofollow">
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
Itulah contoh meta tag yang saya jadikan satu, okeh cukup segini ya postingan Tutorial HTML - Meta HTML, selanjutnya sya akan membuat postingan mengenai Tutorial HTML - Komentar HTML. Didalam postingan itu saya akan menjelaskan cara membuat komentar yang digunakan di dalam script html. Akhir kata jangan lupa nantikan tutorial-tutorial web programming lainnya ya!!!
Perkenalkan!! Nama saya Nilla Lukita sebagai author SampelKode, saya tinggal di kudus. Hobi saya adalah blogging, anime lovers dan gamers, ya meskipun saya sekarang ini masih menekuni dunia blogging dan anime lovers (No Wibu). Saya masih sekolah dan masih kelas 2 SMK jurusan TKJ, saya senang sekali kalau ada masalah mengenai coding, design dan hal yang berhubungan dengan website.
ConversionConversion EmoticonEmoticon