Skip to content

Latest commit

 

History

History
618 lines (448 loc) · 23.5 KB

README.md

File metadata and controls

618 lines (448 loc) · 23.5 KB
Raw

HEAD

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:[email protected]">
<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

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

Pinterest

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

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

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

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>

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

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

⬆ back to top

Other Resources

⬆ back to top

Related Projects

⬆ back to top

Other Formats

⬆ back to top

Translations

⬆ 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

CC0

⬆ back to top