HTML meta Tag

Tutorial HTML `<meta>`

Element HTML meta digunakan untuk menambahkan informasi atau fungsi tertentu yang ditujukan untuk pembacaan browser, mesin telusur web serta layanan web lainnya, dan tidak diperuntukkan kepada user atau pengunjung.

<meta charset="utf-8"/>

Table of contents

Kategori Element

Element <meta> termasuk dalam kategori :

Metadata content
flow content, phrasing content (Jika attribute itemprop disematkan)

Catatan : Jika element meta tidak ada attribute itemprop, maka penulisannya wajib ditulis didalam element <head>

Tag kelalaian (Tag omission) : Tag pembuka harus ada tapi tag penutup tidak boleh hadir, contoh penulisan :

<meta content='Deskripsi dokumen HTML' name="description"/>
  <!-- atau -->
<meta content='Deskripsi dokumen HTML' name="description">

Attribute HTML `<meta>`

charset

Attribute ini digunakan untuk menentukan pengkodean karakter dokumen HTML. Nilai yang diberikan harus berdasarkan MIME standar pengkodean karakter, selengkapnya dapat dilihat pada tautan berikut ; IANA MIME standar untuk pengkodean karakter

Jenis pengkodeaan yang paling disarakan adalah UTF-8, contoh :

<meta charset="utf-8"/>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<p>Konten body</p>

</body>
</html>

Nilai atau value attribute ini adalah character_set

content

Attribute ini digunakan untuk menentukan nilai yang terkait dengan attribute http-equiv dan attribute name.

Contoh :

<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="deskripsi halaman" name="description">
<meta content="keyword 1,keyword 2,keyword 3" name="keywords">

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="deskripsi halaman" name="description">
<meta content="keyword 1,keyword 2,keyword 3" name="keywords">
</head>
<body>

<p>Konten body</p>

</body>
</html>

Nilai atau value attribute ini adalah Teks

http-equiv

Attribute ini digunakan untuk menentukan perintah yang dapat mengubah perilaku server dan user-agent. Nilai Perintah didefinisikan pada attribute content

Nilai atau value attribute ini adalah :

content-language (usang)

Mendefinisikan bahasa default pada dokumen HTML.

Penting : Attribute ini sudah usang, tidak ada jaminan attribute ini berfungsi, disarankan untuk tidak menggunakannya.

Tips : Gunakan Attribute lang pada pada element HTML, contohnya sebagai berikut;

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
</head>
<body>

<h1>Belajar bahasa inggris</h1>

<p lang="en">What’s your name ?</p>
<p>Siapa nama kamu ?</p>

<p lang="en">My name is Nafis. What’s yours ?</p>
<p>Nama saya Nafis. Siapa nama Anda?</p>

</body>
</html>

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
</head>
<body>

<h1>Belajar bahasa inggris</h1>

<p lang="en">What’s your name ?</p>
<p>Siapa nama kamu ?</p>

<p lang="en">My name is Nafis. What’s yours ?</p>
<p>Nama saya Nafis. Siapa nama Anda?</p>

<hr>
element P tanpa attribute sudah diwakili oleh element &lt;html lang=&quot;id&quot;&gt;
</body>
</html>

content-security-policy

Digunakan untuk menentukan kebijakan yang ditetapkan pada dokumen HTML

Menentukan asal sumber media yang diperbolehkan, misal; kebijakan penggunaan sumber seperti (font, gambar, script) harus menggunakan jalur HTTPS://; Contoh :

<meta http-equiv="Content-Security-Policy" content="default-src https:"/>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<meta http-equiv="Content-Security-Policy" content="default-src https:"/>
</head>
<body>

<img alt="DEMO" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3NfFfRFXQHo-hYdFip5dpO0I9mFLjJMPH-i4x5ex_0btub9z4iULzxQ1ybibwvBS8uUsI309Pas_KNlX_8RTzPc5Pmi4dLQOrl6ZdED6GCRrg_r2Nw6xnWmLXyBxSsmOZksC5zPqxpPID/s1600/html-tutorial.png">

<br>

<img alt="DEMO" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3NfFfRFXQHo-hYdFip5dpO0I9mFLjJMPH-i4x5ex_0btub9z4iULzxQ1ybibwvBS8uUsI309Pas_KNlX_8RTzPc5Pmi4dLQOrl6ZdED6GCRrg_r2Nw6xnWmLXyBxSsmOZksC5zPqxpPID/s1600/html-tutorial.png">

<p>Perhatikan kedua contoh diatas</p>
<ol>
  <li>Gambar Pertama menggunakan http://</li>
  <li>Gambar Pertama menggunakan https://</li>
</ol>

</body>
</html>

content-type
- Digunakan untuk menentukan pengkodean karakter untuk dokumen. Contoh :
```
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
```

refresh
Perintah ini mendefinisikan :

Menentukan perintah menyegarkan halaman dengan interval waktu
Menentukan perintah redirect halaman jika diikuti string ';url=', url harus berupa url yang valid

Contoh 1:

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<meta http-equiv="refresh" content="10">
</head>
<body>

<p>
 Silahkan Tunggu, halaman ini 
 akan disegarkan dalam 10 detik
</p>

</body>
</html>

Contoh 2:

<meta http-equiv='refresh' content='5;url=https://example.com/'>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<meta http-equiv='refresh' content='5;url=https://example.com/'>
</head>
<body>

<p>
 Silahkan Tunggu, halaman ini 
 akan diredirect dalam 5 detik
</p>

</body>
</html>

set-cookie (usang)
- Mendefinisikan sebuah cookie pada dokument HTML
  Penting : Attribute ini sudah usang, tidak ada jaminan attribute ini berfungsi, disarankan untuk tidak menggunakannya.

name

Attribute ini digunakan untuk menentukan nama dari metadata yang terkait dengan attribute content. Jika attribute itemprop, http-equiv dan charset juga disebutkan, seharusnya attribute name tidak diatur.

Nilai atau value attribute ini adalah :

application-name
- Menentukan nama aplikasi yang berlaku pada dokument HTML

author

mendefinisikan nama penulis dokumen; Contoh :

<meta content="Nama Kamu" name="Author">

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<meta content="Nama Kamu" name="Author">
</head>
<body>

<p>Konten body</p>

</body>
</html>

description

Menentukan deskrispi suatu halaman dokumen HTML, Contoh ;

<meta content="Blog Pembelajaran Tutorial" name="description">

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Triksonic Blog</title>
<meta content="Blog Pembelajaran Tutorial" name="description">
</head>
<body>

<p>Konten body</p>

</body>
</html>

generator

Menentukan perangkat lunak (software) apa yang digunakan untuk membuat dokumen HTML, Contoh :

<meta content="blogger" name="generator">

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Triksonic Blog</title>
<meta content="Blog Pembelajaran Tutorial" name="description">
<meta content="blogger" name="generator">
</head>
<body>

<p>Konten body</p>

</body>
</html>

keywords

Menentukan daftar kata kunci yang relevan dengan dokumn HTML, Contoh :

<head>
  <meta charset="utf-8"/>
  <title>Baju Murah dan Terlengkap</title>
  <meta content="Tempat belanja baju diseluruh indonesia, Menyediakan pakaian kerja utk wanita, dress, gaun, bawahan, atasan, blazer dan rok, pakain anak, pakaian laki-laki " name="description">
  <meta content="baju murah, baju murah dan terlengkap, pakaian wanita, pakaian anak, pakaian laki-laki" name="keywords">
</head>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Baju Murah dan Terlengkap</title>
  <meta content="Tempat belanja baju diseluruh indonesia, Menyediakan pakaian kerja utk wanita, dress, gaun, bawahan, atasan, blazer dan rok, pakain anak, pakaian laki-laki " name="description">
  <meta content="baju murah, baju murah dan terlengkap, pakaian wanita, pakaian anak, pakaian laki-laki" name="keywords">
</head>
<body>

<p>Konten body disini</p>

</body>
</html>

creator
- Mendefinisikan nama pencipta dokumen, seperti organisasi atau institusi
googlebot
- Persamaan dari attribute name dengan value robots, digunakan hanya oleh google yang berfungsi mengontrol pengindeksan dan crawling mesin telusur, nilai defaultnya adalah "index, follow" Untuk memberikan penilaian, attribute content diperlukan.
- Berikut daftar nilai yang dapat diberikan :
  1. index
    - Memungkinkan robot mengindeks halaman, Contoh :
      <meta name="googlebot" content="index, follow">
  2. follow
    - Memungkinkan robot untuk mengikuti link yang ada di halaman, Contoh :
      <meta name="googlebot" content="index, follow">
  3. noindex
    - Mencegah robot melakukan indeks pada halaman, Contoh :
      <meta name="googlebot" content="noindex">
  4. nofollow
    - Mencegah robot mengikuti link yang ada pada Halaman, Contoh :
      <meta name="googlebot" content="nofollow">
      - Contoh menggabungkan noindex dan nofollow
        
        <meta name="googlebot" content="noindex, nofollow">
        
        Catatan : Attribute noindex dan nofollow penting dilakukan untuk membatasi GoogleBot melakukan perayapan dan pengindeksan. Beberapa contoh halaman page yang baiknya jangan di indeks :
        
        Halaman Login website.
        
        Halaman penyimpan data yang bersifat penting, misal data konsumen.
        
        Halaman file media yang bersifat privasi
        
        etc..
        
        Penting : Agar meta noindex berfungsi sebagaimana mestinya, pastikan halaman tidak diblokir oleh file robots.txt, karena jika halaman diblokir oleh robots.txt maka crawler akan beranggapan halaman tersebut tidak mempunyai tag noindex
  5. nosnippet
    - Mencegah cuplikan teks atau pratinjau video ditampilkan dalam hasil penelusuran. Untuk video, gambar statis akan ditampilkan jika memungkinkan. Contoh :
      <meta name="googlebot" content="nosnippet">
  6. noarchive
    - Digunakan untuk mencegah Google menampilkan link Cache pada halaman.
  7. unavailable_after:[date]
    - Digunakan untuk menentukan waktu dan tanggal penghentian crawling dan pengindeksan pada suatu halaman.
  8. noimageindex
    - Digunakan pada halaman yang ada agar tidak muncul sebagai halaman rujukan dari gambar yang telah diindeks.
  9. none
    - Bersifat sama seperti noindex, nofollow.
publisher
- Digunakan untuk mendefinisikan nama dari penerbit dokumen, Contoh :
```
<meta name="publisher" content="Designer, Company or Website Name">
```
robots
- Berfungsi mengontrol pengindeksan dan crawling mesin telusur atau layanan Web. Berikut daftar nilai yang dapat diberikan pada attribute content sebagai wadah penilaian :
  1. index
    - Memungkinkan robot mengindeks halaman, Contoh :
      <meta name="robots" content="index, follow">
    - Digunakan oleh : ALL
  2. noindex
    - Mencegah robot melakukan indeks pada halaman, Contoh :
      <meta name="robots" content="noindex">
    - Digunakan oleh : ALL
  3. follow
    - Memungkinkan robot untuk mengikuti link yang ada di halaman, Contoh :
      <meta name="robots" content="index, follow">
    - Digunakan oleh : ALL
  4. nofollow
    - Mencegah robot mengikuti link yang ada pada Halaman, Contoh :
      <meta name="robots" content="nofollow">
    - Digunakan oleh : ALL
  5. none
    - Bersifat sama seperti noindex, nofollow.
    - Digunakan oleh : Google
  6. noodp
    - Kepanjangan dari "no open directory project" artinya Tag ini berfungsi untuk mencegah penggunaan deskripsi pada Open Directory Project jika tersedia, Contoh :
      <meta name="robots" content="noodp">
    - Digunakan oleh : Google, Yahoo, Bing
  7. noarchive
    - Digunakan untuk mencegah robot menampilkan link Cache pada halaman. Contoh :
      <meta name="robots" content="noarchive">
    - Digunakan oleh : Google, Yahoo, Bing
  8. nosnippet
    - Mencegah cuplikan teks atau pratinjau video ditampilkan dalam hasil penelusuran. Untuk video, gambar statis akan ditampilkan jika memungkinkan. Contoh :
      <meta name="robots" content="nosnippet">
    - Digunakan oleh : Google, Bing
  9. noimageindex
    - Digunakan pada halaman yang ada agar tidak muncul sebagai halaman rujukan dari gambar yang telah diindeks.
    - Digunakan oleh : Google
  10. nocache
    - Bersifat sama seperti noarchive.
    - Digunakan oleh : Bing
slurp
- Bersifat sama seperti robots, tetapi hanya untuk Yahoo Search

viewport

Digunakan untuk memberi petunjuk dan mengontrol ukuran area pandang. Contoh :

<meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=5" name="viewport"/>

scheme

Attibute ini digunakan untuk menentukan Skema yang digunakan untuk mengartikan atau menafsirkan attribute content

Penting : Attribute ini tidak berlaku lagi pada HTML5, dianjurkan untuk tidak menerapkannya

Contoh Penulisan

<meta name="date" content="2010-11-12" scheme="YYYY-MM-DD">

Nilai atau value attribute ini adalah format/URI

Daftar Tag Meta

Berikut kumpulan tag meta yang bisa digunakan pada dokumen HTML, yang bersumber dari;

Basic HTML Meta Tag

<meta name="keywords" content="your, tags"/>
<meta name="description" content="150 words"/>
<meta name="subject" content="your website's subject">
<meta name="copyright" content="company name">
<meta name="language" content="ES">
<meta name="robots" content="index,follow" />
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" />
<meta name="abstract" content="">
<meta name="topic" content="">
<meta name="summary" content="">
<meta name="Classification" content="Business">
<meta name="author" content="name, email@hotmail.com">
<meta name="designer" content="">
<meta name="copyright" content="">
<meta name="reply-to" content="email@hotmail.com">
<meta name="owner" content="">
<meta name="url" content="http://www.websiteaddrress.com">
<meta name="identifier-URL" content="http://www.websiteaddress.com">
<meta name="directory" content="submission">
<meta name="category" content="">
<meta name="coverage" content="Worldwide">
<meta name="distribution" content="Global">
<meta name="rating" content="General">
<meta name="revisit-after" content="7 days">

<meta http-equiv="Expires" content="0"> <!-- no valid hTML5 -->
<meta http-equiv="Pragma" content="no-cache"> <!-- no valid hTML5 -->
<meta http-equiv="Cache-Control" content="no-cache"> <!-- no valid hTML5 -->

OpenGraph Meta Tag

<meta name="og:title" content="Tittle Document">
<meta name="og:type" content="movie">
<meta name="og:url" content="https://example.com/your-title">
<meta name="og:image" content="https://example.com/image.jpg">
<meta name="og:site_name" content="Site Name">
<meta name="og:description" content="Description Document">

<meta name="fb:page_id" content="0123456789">

<meta name="og:email" content="example@example.com">
<meta name="og:phone_number" content="012-345-678">
<meta name="og:fax_number" content="+00-123-456-789">

<meta name="og:latitude" content="12.34567">
<meta name="og:longitude" content="-1123.456789">
<meta name="og:street-address" content="Your Address">
<meta name="og:locality" content="Your locality">
<meta name="og:region" content="Your region">
<meta name="og:postal-code" content="123456">
<meta name="og:country-name" content="Your-country-name">

<meta property="og:type" content="game.achievement">
<meta property="og:points" content="POINTS_FOR_ACHIEVEMENT">

<meta property="og:video" content="http://example.com/awesome.swf">
<meta property="og:video:height" content="640">
<meta property="og:video:width" content="385">
<meta property="og:video:type" content="application/x-shockwave-flash">

<meta property="og:video" content="http://example.com/html5.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video" content="http://example.com/fallback.vid">
<meta property="og:video:type" content="text/html">

<meta property="og:audio" content="http://example.com/amazing.mp3">
<meta property="og:audio:title" content="Amazing Song">
<meta property="og:audio:artist" content="Amazing Band">
<meta property="og:audio:album" content="Amazing Album">
<meta property="og:audio:type" content="application/mp3">

Custom Meta Tag

<meta name="google-analytics" content="asdfghjkl">
<meta name="disqus" content="asdfghjkl">
<meta name="uservoice" content="asdfghjkl">
<meta name="mixpanel" content="asdfghjkl">

ClaimID Meta Tag

<meta name="microid" content="mailto+http:sha1:asdfghjkl">

Apple Meta Tag

<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="yes" name="apple-touch-fullscreen" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width = 320, initial-scale = 2.3, user-scalable = no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">

Internet Explorer Meta Tag

<meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)"> <!--no valid HTML5-->
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)"> <!--no valid HTML5-->
<meta name="mssmarttagspreventparsing" content="true">
<meta content='IE=edge' http-equiv='X-UA-Compatible'>
<meta name="msapplication-starturl" content="http://example.com/about/">
<meta name="msapplication-window" content="width=800;height=600">
<meta name="msapplication-navbutton-color" content="red">
<meta name="application-name" content="Rey Bango Front-end Developer">
<meta name="msapplication-tooltip" content="Launch Rey Bango's Blog">
<meta name="msapplication-task" content="name=About;action-uri=/about/;icon-uri=/images/about.ico">
<meta name="msapplication-task" content="name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico">
<meta name="msapplication-task" content="name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico">
<meta name="msapplication-task" content="name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico">

Windows 8 Meta Tag

<meta name="application-name" content="Contoso">
<meta name="msapplication-TileColor" content="#009900">
<meta name="msapplication-square70x70logo" content="images/smalltile.png">
<meta name="msapplication-square150x150logo" content="images/mediumtile.png">
<meta name="msapplication-wide310x150logo" content="images/widetile.png">
<meta name="msapplication-square310x310logo" content="images/largetile.png">
<meta name="msapplication-notification" content="frequency=30; polling-uri=notifications/contoso1.xml;
polling-uri2=notifications/contoso2.xml; polling-uri3=notifications/contoso3.xml">

TweetMeme Meta Tag

<meta name="tweetmeme-title" content="Retweet Button Explained">

Blog Catalog Meta Tag

<meta name="blogcatalog" content="0123456789">

Rails Meta Tag

<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="/bZVwvomkAnwAI1Qd37lFeewvpOIiackk9121fFwWwc=">

Tag meta yang dipahami oleh Google

Meta tags that Google understands

<meta charset="..." >
<meta name="description" content="A description of the page" />
<meta name="robots" content="..., ..." />
<meta name="googlebot" content="..., ..." />
<meta name="google" content="nositelinkssearchbox" />
<meta name="google" content="notranslate" />
<meta name="google-site-verification" content="..." />
<meta http-equiv="Content-Type" content="...; charset=..." />
<meta http-equiv="refresh" content="...;url=..." />

Global Attribute

Element <meta> mencakup Global Attributes HTML.

Browser Support HTML `<meta>`

Desktop

Chrome	Ya
Safari	Ya
Firefox	1
Opera	Ya
IE	Ya
Edge	Ya

Mobile

Android webview	Ya
Chrome Android	Ya
Edge mobile	Ya
Firefox Android	4
IE mobile	Ya
Opera Android	Ya
iOS Safari	Ya

Table Info

Nilai pada table menentukan versi minimal browser

Default CSS

Browser yang support dengan element <meta>, mempunyai nilai default :

/* tidak ada */

Judul	`HTML meta Tag`
Label	`HTML`
Diposting pada	`2 Januari 2018 - 17:42`
Diperbaharui pada	`2 September 2018 - 11:58`

Tutorial HTML `<meta>`

Kategori Element

Attribute HTML `<meta>`

Daftar Tag Meta

Basic HTML Meta Tag

OpenGraph Meta Tag

Custom Meta Tag

ClaimID Meta Tag

Apple Meta Tag

Internet Explorer Meta Tag

Windows 8 Meta Tag

TweetMeme Meta Tag

Blog Catalog Meta Tag

Rails Meta Tag

Tag meta yang dipahami oleh Google

Global Attribute

Browser Support HTML `<meta>`

Default CSS

Post Info

HTML ELEMENT

Populer Post

Arsip Blog

Label

HTML meta Tag

Tutorial HTML <meta>

Kategori Element

Attribute HTML <meta>

Daftar Tag Meta

Basic HTML Meta Tag

OpenGraph Meta Tag

Custom Meta Tag

ClaimID Meta Tag

Apple Meta Tag

Internet Explorer Meta Tag

Windows 8 Meta Tag

TweetMeme Meta Tag

Blog Catalog Meta Tag

Rails Meta Tag

Tag meta yang dipahami oleh Google

Global Attribute

Browser Support HTML <meta>

Default CSS

Post Info

Populer Post

Arsip Blog

Label

Tutorial HTML `<meta>`

Attribute HTML `<meta>`

Browser Support HTML `<meta>`