Awesome

HEAD

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

HEAD

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

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">

📖 Link Relations

⬆ 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">

📖 Semua tentang Favicons (dan Touch Icons)
📖 Membuat Pinned Tab Icons
📖 Favicon Cheat Sheet
📖 Icons & Browser Colors

⬆ 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="">

📖 Facebook Open Graph Markup
📖 Open Graph protocol
🛠 Test halaman anda dengan Facebook Sharing Debugger

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.">

📖 Memulai dengan kartu — Twitter Developers
🛠 Test halaman anda dengan Twitter Card Validator

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

<html lang="" itemscope itemtype="https://schema.org/Article">
    <head>
      <link rel="author" href="">
      <link rel="publisher" href="">
      <meta itemprop="name" content="Content Title">
      <meta itemprop="description" content="Content description less than 200 characters">
      <meta itemprop="image" content="https://example.com/image.jpg">

Note: Meta tags berikut diperlukan itemscope dan itemtype atribut untuk ditambahkan ke <html> tag.

🛠 Test halaman anda dengan Structured Data Testing Tool

Pinterest mengizinkan anda untuk mencegah orang dari menyimpan hal-hal dari website anda, menurut pusat bantuan mereka. description adalah optional.

<meta name="pinterest" content="nopin" description="Maaf, anda tidak dapat menyimpan dari website saya!">

Facebook Instant Articles

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- URL versi web dari artikel anda -->
<link rel="canonical" href="https://example.com/article.html">

<!-- Style yang digunakan untuk artikel ini -->
<meta property="fb:article_style" content="myarticlestyle">

📖 Membuat Artikel - Artikel Instan
📖 Contoh Kode - Artikel Instan

OEmbed

<link rel="alternate" type="application/json+oembed"
  href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json"
  title="oEmbed Profile: JSON">
<link rel="alternate" type="text/xml+oembed"
  href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml"
  title="oEmbed Profile: XML">

📖 oEmbed format

⬆ back to top

Browsers / Platforms

Apple iOS

<!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">

<!-- Nonaktifkan deteksi otomatis dan pemformatan nomor telpon yang mungkin -->
<meta name="format-detection" content="telephone=no">

<!-- Launch Icon (180x180px or larger) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

<!-- Launch Screen Image -->
<link rel="apple-touch-startup-image" href="/path/to/launch.png">

<!-- Launch Icon Title -->
<meta name="apple-mobile-web-app-title" content="App Title">

<!-- Mengaktifkan standalone (full-screen) mode -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Tampilan Status bar (tidak ada efek kecuali kalo standalone mode diaktifkan) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- iOS app deep linking -->
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">

📖 Mengkonfigurasi Aplikasi Web

Google Android

<meta name="theme-color" content="#E64545">

<!-- Menambahkan ke home screen -->
<meta name="mobile-web-app-capable" content="yes">
<!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

<!-- Android app deep linking -->
<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com">

Google Chrome

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">

<!-- Menonaktifkan prompt penerjamah -->
<meta name="google" content="notranslate">

Microsoft Internet Explorer

<!-- Memaksa IE 8/9/10 untuk menggunakan rendering engine terakhirnya -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Nonaktifkan deteksi otomatis dan pemformatan nomor telpon yang mungkin dari Skype Toolbar browser extension -->
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">

<!-- Judul Window -->
<meta name="msapplication-config" content="/browserconfig.xml">

Kebutuhan minimal xml markup untuk browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="small.png"/>
        <square150x150logo src="medium.png"/>
        <wide310x150logo src="wide.png"/>
        <square310x310logo src="large.png"/>
     </tile>
   </msapplication>
</browserconfig>

📖 Referensi skema konfigurasi browser

⬆ back to top

Browsers (Chinese)

360 Browser

<!-- Memilih urutan rendering engine -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

QQ Mobile Browser

<!-- Mengunci layar kunci ke orientasi yang spesifik -->
<meta name="x5-orientation" content="landscape/portrait">

<!-- Menampilkan dokumen ini ke tampilan fullscreen -->
<meta name="x5-fullscreen" content="true">

<!-- Dokumen akan ditampilkan dalam "application mode" (fullscreen, etc.) -->
<meta name="x5-page-mode" content="app">

UC Mobile Browser

<!-- Mengunci layar kunci ke orientasi yang spesifik -->
<meta name="screen-orientation" content="landscape/portrait">

<!-- Menampilkan dokumen ini ke tampilan fullscreen -->
<meta name="full-screen" content="yes">

<!-- UC browser akan menampilkan gambar walaupun pada "text mode" -->
<meta name="imagemode" content="force">

<!-- Dokumen akan ditampilkan pada "application mode"(fullscreen, forbidding gesture, etc.) -->
<meta name="browsermode" content="application">

<!-- Menonaktifkan UC browser's "night mode" untuk dokumen ini -->
<meta name="nightmode" content="disable">

<!-- Menyederhanakan dokumen untuk mengurangi transfer data -->
<meta name="layoutmode" content="fitscreen">

<!-- Menonaktifkan fitur UC browser  "Membesarkan font saat banyak kata pada dokumen ini" -->
<meta name="wap-font-scale" content="no">

📖 UC Browser Docs

⬆ back to top

App Links

<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">

<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">

<!-- Web fall back -->
<meta property="al:web:url" content="https://applinks.org/documentation">

📖 App Links

⬆ back to top

Other Resources

⬆ back to top

Related Projects

Atom HTML Head Snippets - Atom package untuk HEAD snippets
Sublime Text HTML Head Snippets - Sublime Text package untuk HEAD snippets
head-it - CLI interface untuk HEAD snippets
vue-head - Memanipulasi informasi meta pada sebuah HEAD tag untuk Vue.js

⬆ back to top

Other Formats

📄 PDF

⬆ back to top

Translations

🇧🇷 Brazilian Portuguese
🇨🇳 Chinese (Simplified)
🇩🇪 German
🇮🇹 Italian
🇯🇵 Japanese
🇰🇷 Korean
🇷🇺 Russian/Русский
🇪🇸 Spanish
🇹🇷 Turkish/Türkçe
🇮🇩 Bahasa

⬆ back to top

Contributing

Open an issue or a pull request to suggest changes or additions.

Guide

The HEAD repository terdiri dari 2 cabang:

1. `master`

Cabang ini terdiri dari README.md yang terefleksi otomatis ke htmlhead.dev website. Semua perubahan pada isian "cheat sheet" dengan demikian seharusnya sudah diarahkan ke file ini.

Mohon mengikuti langkah-langkah berikut untuk pull requests:

Modifikasi hanya untuk satu tag, atau satu yang berelasi rangkaian dari tag disaat yang bersamaan
Gunakan double quotes pada atribut
Jangan memasukan sebuah trailing slash pada self-closing elements — spesifikasi HTML5 mengatakan itu optional
Pertimbangkan memasukan sebuah tautan ke dokumentasi yang mendukung perubahan anda

2. `gh-pages`

Cabang ini bertanggung jawab htmlhead.dev website. Kita menggunakan Jekyll untuk deploy README.md Markdown melalui GitHub Pages. Semua modifikasi terkait website harus diarahkan kesini.

Anda mungkin ingin melalui Jekyll Docs dan memahami bagaimana kinerja Jekyll sebelum bekerja untuk cabang ini.

Contributors

Periksa semua super awesome berikut contributors.

Author

Josh

License

⬆ back to top

Awesome

HEAD

Table of Contents

Recommended Minimum

Elements

Meta

Link

Icons

Social

Facebook Open Graph

Twitter Card

Twitter Privacy

Schema.org

Pinterest

Facebook Instant Articles

OEmbed

Browsers / Platforms

Apple iOS

Google Android

Google Chrome

Microsoft Internet Explorer

Browsers (Chinese)

360 Browser

QQ Mobile Browser

UC Mobile Browser

App Links

Other Resources

Related Projects

Other Formats

Translations

Contributing

Guide

1. master

2. gh-pages

Contributors

Author

License

1. `master`

2. `gh-pages`