Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / HTML

Html Meta Tag

Tutorial HTML <meta>

Element HTML meta dipakai untuk menambahkan gosip 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"/>
dipakai untuk menambahkan gosip atau fungsi tertentu yang ditujukan untuk pembacaan HTML meta Tag
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 epilog dihentikan hadir, pola penulisan :
<meta content='Deskripsi dokumen HTML' name="description"/>   <!-- atau --> <meta content='Deskripsi dokumen HTML' name="description">

Attribute HTML <meta>

charset
Attribute ini dipakai untuk memilih pengkodean aksara dokumen HTML. Nilai yang diberikan harus menurut MIME standar pengkodean karakter, selengkapnya sanggup dilihat pada tautan berikut ; IANA MIME standar untuk pengkodean karakter
Jenis pengkodeaan yang paling disarakan yakni UTF-8, pola :
<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 yakni character_set
content
Attribute ini dipakai untuk memilih 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 yakni Teks
http-equiv
Attribute ini dipakai untuk memilih perintah yang sanggup mengubah sikap server dan user-agent. Nilai Perintah didefinisikan pada attribute content
Nilai atau value attribute ini yakni :
  • 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, misalnya 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 kau ?</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 kau ?</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 memilih kebijakan yang ditetapkan pada dokumen HTML
    • Menentukan asal sumber media yang diperbolehkan, misal; kebijakan penggunaan sumber ibarat (font, gambar, script) harus memakai 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=" dipakai untuk menambahkan gosip atau fungsi tertentu yang ditujukan untuk pembacaan HTML meta Tag" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGjBV9YqVjIlyaKn7ajfWD9iCJ1JHsoC8mikUmpTGMEOirgKy1O5g4Aor7iREnX56qPtVNVayh4V3JNNsISh9DbOJVICidXhZAqNz5o387OKzLzXZPnIAaXNysCqVyl03_5zktmqhQdJKH/s1600/html-tutorial.png">  <br>  <img alt=" dipakai untuk menambahkan gosip atau fungsi tertentu yang ditujukan untuk pembacaan HTML meta Tag" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGjBV9YqVjIlyaKn7ajfWD9iCJ1JHsoC8mikUmpTGMEOirgKy1O5g4Aor7iREnX56qPtVNVayh4V3JNNsISh9DbOJVICidXhZAqNz5o387OKzLzXZPnIAaXNysCqVyl03_5zktmqhQdJKH/s1600/html-tutorial.png">  <p>Perhatikan kedua pola diatas</p> <ol>   <li>Gambar Pertama memakai http://</li>   <li>Gambar Pertama memakai https://</li> </ol>  </body> </html>
  • content-type
    • Digunakan untuk memilih pengkodean aksara untuk dokumen. Contoh :
      <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  • refresh
    Perintah ini mendefinisikan :
    1. Menentukan perintah menyegarkan halaman dengan interval waktu
    2. Menentukan perintah redirect halaman jikalau 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 dipakai untuk memilih 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 yakni :
  • 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 dipakai untuk menciptakan 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 pria " 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 pria " 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, ibarat 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 yakni "index, follow" Untuk memperlihatkan penilaian, attribute content diperlukan.
    • Berikut daftar nilai yang sanggup 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 melaksanakan 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 melaksanakan perayapan dan pengindeksan. Beberapa pola halaman page yang baiknya jangan di indeks :
            1. Halaman Login website.
            2. Halaman penyimpan data yang bersifat penting, misal data konsumen.
            3. Halaman file media yang bersifat privasi
            4. etc..
            Penting : Agar meta noindex berfungsi sebagaimana mestinya, pastikan halaman tidak diblokir oleh file robots.txt, alasannya yakni jikalau halaman diblokir oleh robots.txt maka crawler akan beranggapan halaman tersebut tidak memiliki tag noindex
      5. nosnippet
        • Mencegah cuplikan teks atau pratinjau video ditampilkan dalam hasil penelusuran. Untuk video, gambar statis akan ditampilkan jikalau memungkinkan. Contoh :
          <meta name="googlebot" content="nosnippet">
      6. noarchive
        • Digunakan untuk mencegah Google menampilkan link Cache pada halaman.
      7. unavailable_after:[date]
        • Digunakan untuk memilih waktu dan tanggal penghentian crawling dan pengindeksan pada suatu halaman.
      8. noimageindex
        • Digunakan pada halaman yang ada semoga tidak muncul sebagai halaman acuan dari gambar yang telah diindeks.
      9. none
        • Bersifat sama ibarat 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 sanggup diberikan pada attribute content sebagai wadah evaluasi :
      1. index
        • Memungkinkan robot mengindeks halaman, Contoh :
          <meta name="robots" content="index, follow">
        • Digunakan oleh : ALL
      2. noindex
        • Mencegah robot melaksanakan 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 ibarat 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 jikalau 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 jikalau memungkinkan. Contoh :
          <meta name="robots" content="nosnippet">
        • Digunakan oleh : Google, Bing
      9. noimageindex
        • Digunakan pada halaman yang ada semoga tidak muncul sebagai halaman acuan dari gambar yang telah diindeks.
        • Digunakan oleh : Google
      10. nocache
        • Bersifat sama ibarat noarchive.
        • Digunakan oleh : Bing
  • slurp
    • Bersifat sama ibarat 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 dipakai untuk memilih Skema yang dipakai 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 yakni format/URI

Daftar Tag Meta

Berikut kumpulan tag meta yang sanggup dipakai pada dokumen HTML, yang bersumber dari;
  1. https://gist.github.com/lancejpollard/1978404
  2. https://gist.github.com/kevinSuttle/1997924
  3. https://support.google.com/webmasters/answer/79812

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> meliputi 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 memilih versi minimal browser

Default CSS

Browser yang support dengan element <meta>, memiliki nilai default :
/* tidak ada */