GitHub

Sebuah daftar dari semua yang *dapat* masuk di dalam <head> dari dokumenmu

CC0 Contributors

Table of Contents

Recommended Minimum

Di bawah ini adalah elemen-elemen penting dari tiap dokumen web (website/aplikasi):

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
  2 meta tags di atas *harus* ada di awal-awal pada <head>
  untuk memastikan konsistensi rendering dokumen yang layak.
  Elemen "head" yang lain harus hadir *setelah* tag-tag tersebut.
 -->
<title>Halaman Judul</title>

⬆ back to top

Elements

Valid <head> elemen termasuk meta, link, title, style, script, noscript, and base.

Elemen-elemen berikut menyajikan informasi bagaimana sebuah dokumen seharusnya dirasakan (perceived), dan di-render, dengan teknologi web. misalnya. browsers, search engines, bots, dll.

<!--
  Meneteapkan character encoding untuk dokumen ini, sehingga
  semua karakter berada pada format UTF-8 (contohnya emoji)
  di-render secara benar.
-->
<meta charset="utf-8">
<!-- Menentukan Judul Dokumen -->
<title>Halaman Judul</title>
<!-- Menentukan dasar alamat URL untuk semua URL terkait didalam dokumen -->
<base href="https://example.com/page.html">
<!-- Tautan ke file CSS eksternal  -->
<link rel="stylesheet" href="styles.css">
<!-- Digunakan untuk menambahkan in-dokumen CSS -->
<style>
  /* ... */
</style>
<!-- JavaScript & Bukan-JavaScript tags -->
<script src="script.js"></script>
<script>
  // function(s) go here
</script>
<noscript>
  <!-- No JS alternative -->
</noscript>

⬆ back to top

Meta

<!--
  2 meta tags di atas *harus* ada di awal-awal pada <head>
  untuk memastikan konsistensi rendering dokumen yang layak.
  Elemen "head" yang lain harus hadir *setelah* tag-tag tersebut.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
  Mengizinkan kontrol resources dapat diambil dari sumber yang mana.
  Tempatkan seawal mungkin di <head>, mengingat tag  
  hanya berlaku terhadap resources yang dideklarasikan setelah itu.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Nama dari Aplikasi Web (hanya digunakan jika website digunakan sebagai sebuah app) -->
<meta name="application-name" content="Nama Aplikasi">
<!-- Warna tema untuk Chrome, Firefox OS dan Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Deskripsi singkat dari sebua dokumen (terbatas sampai 150 karakter) -->
<!-- Isian ini *mungkin* dapat digunakan sebagai sebuah bagian hasil mesin pencari (search engine). -->
<meta name="description" content="Sebuah deskripsi dari halaman">
<!-- Mengendalikan tingkah laku dari mesin pencari (search engine) crawling dan indexing -->
<meta name="robots" content="index,follow"><!-- Semua Mesing Pencari(Search Engines) -->
<meta name="googlebot" content="index,follow"><!-- Spesifik Google -->
<!-- Memberitahu Google untuk tidak menunjukan sitelinks kotak pencari -->
<meta name="google" content="nositelinkssearchbox">
<!-- Memberitahu Google untuk tidak memberikan penterjemahan untuk dokumen ini -->
<meta name="google" content="notranslate">
<!-- Memvalidasi kepemilakan website -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Yandex Webmasters -->
<meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="verification_token"><!-- Alexa Console -->
<meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console-->
<meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web -->
<!-- Mengidentifikasi software digunakan untuk membangun dokumen (misalnya - WordPress, Dreamweaver) -->
<meta name="generator" content="program">
<!-- Deskripsi singkat subyek dari dokumen anda -->
<meta name="subject" content="Subyek dokumen anda">
<!-- Memberikan rating usia umum berdasarkan isi dari dokumen -->
<meta name="rating" content="General">
<!-- Mengizinkan pengendalian melalui bagaimana "referrer information" berlalu -->
<meta name="referrer" content="no-referrer">
<!-- Menonaktifkan deteksi dan pemformatan dari nomor telpon yang mungkin -->
<meta name="format-detection" content="telephone=no">
<!-- Sepenuhnya memilih keluar dari "DNS prefetching" melakukan penyetelan ke- "off" -->
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- Menspesifikan dokumen untuk tampil pada sebuah frame yang spesifik -->
<meta http-equiv="Window-Target" content="_value">
<!-- Geo tags -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<meta name="geo.region" content="country[-state]"><!-- Kode negara (ISO 3166-1): wajib, kode negara bagian (ISO 3166-2): optional; conth. content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- contoh. content="New York City" -->

⬆ back to top

Link

<!-- Mengarahkan ke sebuah stylesheet eksternal -->
<link rel="stylesheet" href="https://example.com/styles.css">
<!-- Membantu pencegahan duplikasi isian isu -->
<link rel="canonical" href="https://example.com/article/?page=2">
<!-- Tautan ke sebuah versi AMP HTML dari dokumen terkini -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">
<!-- Tautan ke sebuah JSON file yang menspesifikan "installation" credentials untuk aplikasi web -->
<link rel="manifest" href="manifest.json">
<!-- Tautan ke informasi mengenai penulis dari dokumen -->
<link rel="author" href="humans.txt">
<!-- Mengacu ke sebuah pernyataan hak cipta yang berlaku terhadap konteks tautan -->
<link rel="license" href="copyright.html">
<!-- Memberikan referensi ke sebuah lokasi di dalam dokumen yang mungkin terdapat di bahasa yang lain -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<!-- Memberikan informasi tentang seorang penulis atau orang lain -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">
<!-- Tautan ke dokumen yang mendeskripsikan sebuah koleksi catatan, dokumen, atau bahan material lain yang menarik sejarah -->
<link rel="archives" href="https://example.com/archives/">
<!-- Tautan ke top level resource pada sebuah struktur hierarki -->
<link rel="index" href="https://example.com/article/">
<!-- Menyajikan referensi diri - berguna saat dokumen memiliki beberapa referensi yang mungkin -->
<link rel="self" type="application/atom+xml" href="https://example.com/atom.xml">
<!-- Yang pertama, akhir, sebelumnya, and setelahnya dokumen pada sebuah rangkaian dari dokumen, secara berurutan -->
<link rel="first" href="https://example.com/article/">
<link rel="last" href="https://example.com/article/?page=42">
<link rel="prev" href="https://example.com/article/?page=1">
<link rel="next" href="https://example.com/article/?page=3">
<!-- Digunakan saat service pihak ketiga digunakan untuk memelihara sebuah blog -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
<!-- Formulir sebuah komentar otomatis dimana tautan blog WordPress yang lain ke blog WordPress anda atau post -->
<link rel="pingback" href="https://example.com/xmlrpc.php">
<!-- Memberi tahu sebuah URL saat anda melakukan link kepadanya pada dokumen anda -->
<link rel="webmention" href="https://example.com/webmention">
<!-- Memungkinkan posting ke domain anda sendiri menggunakan sebuah Micropub client -->
<link rel="micropub" href="https://example.com/micropub">
<!-- Open Search -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">
<!-- Feeds -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
<!-- Prefetching, preloading, prebrowsing -->
<!-- Info lebih lanjut: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="preload" href="image.png" as="image">

⬆ back to top

Icons

<!-- Untuk IE 10 dan kebawah -->
<!-- Tempatkan favicon.ico pada direktori root - tidak ada tag yang diperlukan -->
<!-- Icon untuk resolusi tertinggi yang dibutuhkan -->
<link rel="icon" sizes="192x192" href="/path/to/icon.png">
<!-- Apple Touch Icon (reuse 192px icon.png) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- Safari Pinned Tab Icon -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">

⬆ back to top

Social

Facebook Open Graph

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:alt" content="A description of what is in the image (not a caption)">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">

Twitter Card

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:image:alt" content="A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters.">

Twitter Privacy

Jika anda melakukan embed tweets pada website anda, Twitter dapat menggunkan informasi dari situs anda untuk mengkurasi isi dan rekomendasi untuk pengguna Twitter. Lebih lanjut tentang Twitter privacy options.

<!-- tidak mengijinkan Twitter dari menggunakan situs anda untuk tujuan personalisasi -->
<meta name="twitter:dnt" content="on">

Schema.org

"

Read the original on github.com ↗