Tutorial Belajar HTML5 Bagian 8 : Pengertian & Fungsi Tag Meta Pada HTML

0
1526

Pada artikel sebebelumnya kita sudah membahas pengertian & fungsi tag title pada HTML, selanjutnya kita akan membahas pengertian & fungsi tag meta pada HTML.

Tag <meta> berfungsi untuk memberikan metadata, atau data tentang dokumen yang Anda buat dalam script HTML.

Meta data ini tidak dapat dilihat oleh pengunjung dibrowser, tujuannya untuk memberitahu mesin pencari, browser, dan sistem operasi HTML5 tentang deskriptif, SEO, robot, penulis, dan hak cipta dalam dokumen HTML5 Anda.

Tag <meta> diletakkan diantara tag <head></head>, sama dengan tag <title>.

Tag <meta> sendiri memiliki banyak nilai dengan fungsi dan tujuan yang berbeda.

Contoh format tag <meta> untuk website mbah wp dengan artikel teknik copywriting bisa Anda lihat pada kode berikut :

<!DOCTYPE html>
     <html lang="id">
<head>
     <title>10 Teknik Copywriting : Bagaimana Mengubah Iklan Membosankan Jadi Iklan Yang Menjual | Mbah WP </title>
     <meta name=" description " content="Ini dia 10 teknik copy writing yang menghasilkan penjualan lewat iklan Anda!">
     <meta name=" keywords " content=" teknik copywriting, belajar copywriting, tutorial coywriting ">
     <meta name=" robots " content="index, follow">
     <meta name=" copyright " content="Copyright 2016 sampai 2021">
     <meta name=" author " content="Herbert S">
     <meta charset ="UTF-8">
</head>
     <body>
     <!—Konten teknik copywriting tulis di sini -->
     </body>
</html>
  • Metatag description pada meta tag berisi deskripsi yang digunakan dalam daftar hasil mesin pencari.
  • Metatag keywords  metatag menjabarkan daftar kata kunci kepada robot mesin pencari.
  • Metatag robot mengizinkan robot mesin pencari untuk mengindeks dan followsitus.
  • Metatag copyright dan author berfungsi untuk memberitahu robot mesin pencari hak cipta dan nama embuat dokumen HTML5 Anda.

Ada juga parameter tag <meta> yang disebut charset yang digunakan untuk mendefinisikan kumpulan karakter untuk dokumen Anda, sebagain besar dokumen HTML5 biasanya menggunakan UTF-8 atau UTF-16 sebagai charset.

UTF-8 adalah Format Teks Universal 8-bit menggunakan representasi 256 karakter dan UTF-16 adalah Format Teks Universal 16-bit menggunakan representasi karakter 65.536.

UTF-16 mewakili rentang bahasa yang lebih luas daripada UTF-8, meskipun UTF-8 mewakili Bahasa yang menggunakan kumpulan karakter alfabet, seperti Inggris, Prancis, Spanyol, Italia, Portugis, dan Jerman.

Pada tabel di bawah ini, tercantum 17 pasangan nama nilai : data konten yang digunakan dalam format tag <meta> untuk Dokumen dan aplikasi HTML5.

Nama NilaiNilai KontenTujuan atau Kegunaan
descriptionDeskripsi untuk dokumen HTMLDaftar untuk mesin pencari Anda
keywordDaftar kata kunci AndaSaran kata kunci SEO
robotsindex dan followInstruksi kepada robot SEO
copyrightTanggal hak ciptaTanggal hak cipta dokumen
authorNama penulisNama penulis dokumen
webauthorNama penulisNama penulis dokumen
charsetKumpulan karakter yang digunakanBiasanya UTF-8 atau UTF-16
abstractRingkasan dokumenAbstrak isi ringkasan
revisit-afterPeriode kunjungan ulang (yaitu, 9 hari)Intruksi kunjungan kepada robot
languageNama bahasaBahasa yang digunakan untuk dokumen
distributionGlobal, lokal, IUGlobal, lokal atau distribusi internal untuk dokumen
expiresDate (1 Jan 2017)Isi dokumen kedaluwarsa
generatorNama softwarePembuat konten dokumen
reply-toAlamat emailInformasi kontak dokumen
no-email-collectionTautan anti-spammetatags.info/nospamharvest
ratingAudiens yang ditujuumum, dewasa, terbatas
googlebotnoodpGunakan sebagai deskripsi halaman di ODP

Untuk menentukan nilai informasi header HTTP dari parameter konten, Anda dapat menggunakan parameter http-equiv.

Metatag ini digunakan untuk menambahkan nilai ke header web HTML5, berikut beberapa nilai standar http-equiv yang digunakan di situs web.

Pada tabel di bawah ini dicantumkan 13 pasangan dari http-equiv : nilai data konten yang digunakan di dalam <meta>.

http-equivNilai KontenTujuan atau Penggunaan
content-typeTipe Media, CharSetTentukan tipe MIME dan charset
cache-controlTentukan pengaturan cacheTentukan pengaturan cache Mendefinisikan parameter cache
cookieMendefinisikan file cookieMendefinisikan file cookie Tentukan nama dan tanggal cookie
content-dispositionDefinisikan aplikasiDefinisikan aplikasi Mendefinisikan ekstensi nama file
imagetoolbarMenampilkan image toolbarMenampilkan image toolbar Control display (IE) toolbar
MSThemeCompatibleUse WinXP UI themeUse WinXP UI theme Set tema WinXP UI untuk situs
picslabelLabel konten gambarLabel konten gambar Memungkinkan gambar diberi label
pragmaSetel cache HTTPSSetel cache HTTPS Pastikan halaman HTTPS tidak disimpan dalam cache
Resource-Typeendefinisikan resourceMendefinisikan resource Mendefinisikan jenis resource halaman
RefreshWaktu sebelum refreshPengalihan setelah jangka waktu tertentu
Content-Script-TypeScripting languageTentukan bahasa skrip
Content-Style-TypeStyle Sheet languageMenentukan bahasa style sheet
window-targetTentukan nama jendela sebagai target jendela untuk HTML5 rendering dokumen/ parsingMengatur nama jendela untuk halaman web yang akan dirender; umumnya digunakan untuk keluar dari a frameset

Itu dia pembahasan tentang penggunaan meta tag dalam HTML5 yang bertujuan sebagai sumber informasi bagi bot mesin pencari.

Semoga artikel ini bisa menambah pengetahuan Anda tentang pengertian & fungsi tag meta dalam HTML5.

Untuk materi selanjutnya kita akan membahas menggunakan external link dan favicon dalam HTML 5.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.