Panduan ringkas untuk elemen
<head>HTML
- Minimum yang disyorkan
- Elemen
- Meta
- Pautan
- Ikon
- Sosial
- Pelayar / Platform
- Pelayar (Bahasa Cina)
- Pautan Apl
- Sumber Lain
- Projek Berkaitan
- Format lain
- Terjemahan
- Contributing
- Author
- Malay Language Translator
- Lesen
Berikut adalah elemen penting untuk mana-mana dokumen web (laman web/apl):
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--
2 meta tag di atas *mesti* didahulukan di <head>
untuk memastikan penyampaian dokumen yang betul secara konsisten.
Mana-mana elemen <Head> lain harus datang *selepas* tag ini.
-->
<title>Page Title</title>meta charset - mentakrifkan pengekodan (encoding) laman web, utf-8 ialah standard
meta name="viewport" - tetapan viewport yang berkaitan dengan responsif antara muka mudah alih
width=device-width - gunakan lebar fizikal peranti (bagus untuk antara muka mudah alih!)
initial-scale=1 - zum permulaan, 1 bermaksud tiada zum
Elemen <head> yang sah termasuk meta, link, title, style, script, noscript dan base.
Elemen-elemen ini memberikan maklumat tentang cara sesuatu dokumen harus dilihat, dan disampaikan, oleh teknologi web. cth. pelayar, enjin carian, bot, dsb.
<!--
Tetapkan pengekodan aksara untuk dokumen ini, supaya
semua aksara dalam ruang UTF-8 (seperti emoji)
disampaikan dengan betul.
-->
<meta charset="utf-8" />
<!-- Tetapkan tajuk dokumen -->
<title>Page Title</title>
<!-- Tetapkan URL asas untuk semua URL relatif dalam dokumen -->
<base href="https://example.com/page.html" />
<!-- Pautan ke fail CSS luaran -->
<link rel="stylesheet" href="styles.css" />
<!-- Digunakan untuk menambah CSS dalam dokumen -->
<style>
/* ... */
</style>
<!-- Tag JavaScript & Bukan JavaScript -->
<script src="script.js"></script>
<script>
// function(s) ke sini
</script>
<noscript>
<!-- Tiada alternatif JS -->
</noscript><!--
2 tag meta berikut *mesti* didahulukan di <head>
untuk memastikan penyampaian dokumen yang betul secara konsisten.
Mana-mana elemen `head` lain harus datang *selepas* tag ini.
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--
Membenarkan kawalan ke atas tempat sumber dimuatkan.
Letakkan seawal mungkin di <head>, sebagai tag
hanya terpakai kepada sumber yang diisytiharkan selepasnya.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'" />
<!-- Nama aplikasi web (hanya perlu digunakan jika laman web digunakan sebagai aplikasi) -->
<meta name="application-name" content="Application Name" />
<!-- Warna Tema untuk Chrome, Firefox OS dan Opera -->
<meta name="theme-color" content="#4285f4" />
<!-- Penerangan ringkas dokumen (had kepada 150 aksara) -->
<!-- Kandungan ini *boleh* digunakan sebagai sebahagian daripada hasil carian enjin. -->
<meta name="description" content="A description of the page" />
<!-- Kawal tingkah laku rangkak (crawling) dan pengindeksan (indexing) enjin carian -->
<meta name="robots" content="index,follow" /><!-- All Search Engines -->
<meta name="googlebot" content="index,follow" /><!-- Google Specific -->
<!-- Memberitahu Google untuk tidak menunjukkan kotak carian pautan tapak -->
<meta name="google" content="nositelinkssearchbox" />
<!-- Beritahu Google supaya tidak menyediakan terjemahan untuk dokumen ini -->
<meta name="google" content="notranslate" />
<!-- Sahkan pemilikan laman web -->
<meta
name="google-site-verification"
content="verification_token"
/><!-- Konsol Carian Google -->
<meta
name="yandex-verification"
content="verification_token"
/><!-- Juruweb Yandex -->
<meta
name="msvalidate.01"
content="verification_token"
/><!-- Pusat Juruweb Bing -->
<meta name="alexaVerifyID" content="verification_token" /><!-- Konsol Alexa -->
<meta
name="p:domain_verify"
content="code_from_pinterest"
/><!-- Konsol Pinterest-->
<meta
name="norton-safeweb-site-verification"
content="norton_code"
/><!-- Web Selamat Norton -->
<!-- Kenal pasti perisian yang digunakan untuk membina dokumen (iaitu - WordPress, Dreamweaver) -->
<meta name="generator" content="program" />
<!-- Penerangan ringkas tentang subjek dokumen anda -->
<meta name="subject" content="your document's subject" />
<!-- Memberikan penilaian umur umum berdasarkan kandungan dokumen -->
<meta name="rating" content="General" />
<!-- Membenarkan kawalan ke atas cara maklumat perujuk dihantar -->
<meta name="referrer" content="no-referrer" />
<!-- Lumpuhkan pengesanan automatik dan pemformatan yang berkemungkinan nombor telefon -->
<meta name="format-detection" content="telephone=no" />
<!-- Tarik diri sepenuhnya daripada pengambilan DNS (DNS Prefetching) dengan menetapkan kepada "off" -->
<meta http-equiv="x-dns-prefetch-control" content="off" />
<!-- Menentukan dokumen untuk muncul dalam bingkai tertentu -->
<meta http-equiv="Window-Target" content="_value" />
<!-- Tag geo -->
<meta name="ICBM" content="latitude, longitude" />
<meta name="geo.position" content="latitude;longitude" />
<meta
name="geo.region"
content="country[-state]"
/><!-- Kod Negara (ISO 3166-1): wajib, kod negeri (ISO 3166-2): pilihan; cth. content="MY" / content="MY-KL" -->
<meta
name="geo.placename"
content="city/town"
/><!-- cth. content="Bandar Kuala Lumpur" -->
<!-- Pengewangan Web https://webmonetization.org/docs/getting-started -->
<meta name="monetization" content="$paymentpointer.example" />- ๐ Tag meta yang Google faham
- ๐ WHATWG Wiki: MetaExtensions
- ๐ ICBM di Wikipedia
- ๐ Geotagging di Wikipedia
<!-- Menunjuk pada lembaran gaya luaran -->
<link rel="stylesheet" href="https://example.com/styles.css" />
<!-- Membantu mengelakkan isu kandungan pendua -->
<link rel="canonical" href="https://example.com/article/?page=2" />
<!-- Pautan ke versi HTML AMP bagi dokumen semasa -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html" />
<!-- Pautan ke fail JSON yang menentukan kelayakan "pemasangan" untuk aplikasi web -->
<link rel="manifest" href="manifest.json" />
<!-- Pautan kepada maklumat tentang pengarang dokumen -->
<link rel="author" href="humans.txt" />
<!-- Merujuk kepada pernyataan hak cipta yang digunakan pada konteks pautan -->
<link rel="license" href="copyright.html" />
<!-- Memberi rujukan kepada lokasi dalam dokumen anda yang mungkin dalam bahasa lain -->
<link rel="alternate" href="https://es.example.com/" hreflang="es" />
<!-- Menyediakan maklumat tentang pengarang 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" />
<!-- Pautan kepada dokumen yang menerangkan koleksi rekod, dokumen atau bahan lain yang mempunyai kepentingan sejarah -->
<link rel="archives" href="https://example.com/archives/" />
<!-- Pautan ke sumber peringkat teratas dalam struktur hierarki -->
<link rel="index" href="https://example.com/article/" />
<!-- Menyediakan rujukan kendiri - berguna apabila dokumen mempunyai beberapa rujukan yang mungkin -->
<link
rel="self"
type="application/atom+xml"
href="https://example.com/atom.xml"
/>
<!-- Dokumen pertama, terakhir, sebelumnya dan seterusnya dalam satu siri dokumen, masing-masing -->
<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 apabila perkhidmatan pihak ketiga (3rd party) digunakan untuk mengekalkan blog -->
<link
rel="EditURI"
href="https://example.com/xmlrpc.php?rsd"
type="application/rsd+xml"
title="RSD"
/>
<!-- Membentuk ulasan automatik apabila blog WordPress lain dipautkan ke blog atau siaran WordPress anda -->
<link rel="pingback" href="https://example.com/xmlrpc.php" />
<!-- Memberitahu URL apabila anda memautkannya pada dokumen anda -->
<link rel="webmention" href="https://example.com/webmention" />
<!-- Membolehkan penyiaran ke domain anda sendiri menggunakan klien Micropub -->
<link rel="micropub" href="https://example.com/micropub" />
<!-- Buka Carian -->
<link
rel="search"
href="/open-search.xml"
type="application/opensearchdescription+xml"
title="Search Title"
/>
<!-- Suapan -->
<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"
/>
<!-- prapengambilan (prefetching), pramuat (preloading), prapelayar (prebrowsing) -->
<!-- Info 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
<!-- Untuk IE 10 dan ke bawah -->
<!-- Letakkan favicon.ico dalam direktori akar - tiada tag diperlukan -->
<!-- Ikon dalam resolusi tertinggi yang diperlukan -->
<link rel="icon" sizes="192x192" href="/path/to/icon.png" />
<!-- Ikon Apple Touch (guna semula 192px icon.png) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png" />
<!-- Ikon Tab Disemat Safari -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue" />- ๐ Semua Tentang Favicon (Dan Ikon Sentuh)
- ๐ Mencipta Ikon Tab Disemat
- ๐ Favicon Cheat Sheet
- ๐ Ikon & Warna Pelayar
Kebanyakan kandungan dikongsi ke Facebook sebagai URL, jadi adalah penting untuk anda menandakan laman web anda dengan tag Graf Terbuka (Open Graph tags) untuk mengawal cara kandungan anda dipaparkan di Facebook. Lebih lanjut mengenai Facebook Open Graph Markup
<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="" />- ๐ Buka protokol Graf
- ๐ Uji halaman anda dengan Penyahpepijat Perkongsian Facebook
Dengan Kad Twitter, anda boleh melampirkan foto, video dan pengalaman media pada Tweet, membantu mendorong trafik ke laman web anda. Lebih lanjut mengenai Kad Twitter
<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."
/>- ๐ Bermula dengan kad โ Pembangun Twitter
- ๐ Uji halaman anda dengan Pengesah Kad Twitter
Jika anda membenamkan tweet dalam laman web anda, Twitter boleh menggunakan maklumat daripada laman web anda untuk menyesuaikan kandungan dan cadangan kepada pengguna Twitter. Lebih lanjut mengenai pilihan privasi Twitter.
<!-- tidak membenarkan Twitter daripada menggunakan maklumat laman web anda untuk tujuan pemperibadian -->
<meta name="twitter:dnt" content="on" /><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" />
</head>
</html>Nota: Tag meta ini memerlukan atribut itemscope dan itemtype untuk ditambahkan pada tag <html>.
- ๐ Memulakan - schema.org
- ๐ Uji halaman anda dengan Rich Results Test
Pinterest membolehkan anda menghalang orang daripada menyimpan sesuatu daripada laman web anda, menurut to their help center. description adalah pilihan.
<meta
name="pinterest"
content="nopin"
description="Sorry, you can't save from my website!"
/><meta charset="utf-8" />
<meta property="op:markup_version" content="v1.0" />
<!-- URL versi web artikel anda -->
<link rel="canonical" href="https://example.com/article.html" />
<!-- Gaya yang akan digunakan untuk artikel ini -->
<meta property="fb:article_style" content="myarticlestyle" /><link
rel="alternate"
type="application/json+oembed"
href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&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&format=xml"
title="oEmbed Profile: XML"
/>- ๐ Format oEmbed
Pengguna berkongsi halaman web ke qq wechat akan mempunyai mesej berformat
<meta itemprop="name" content="share title" />
<meta
itemprop="image"
content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png"
/>
<meta name="description" itemprop="description" content="share content" />- ๐ Dokumen Format Kod
Sesetengah perisian Fediverse seperti Mastodon membolehkan anda meletakkan pemegang Fediverse anda dalam teg meta yang akan dipaparkan dalam benaman ke tapak web anda. Selain teg, anda juga perlu menambahkan domain anda pada senarai tapak web yang dibenarkan dalam "Settings -> Public profile -> Verification -> Author attribution" (untuk Mastodon).
<meta name="fediverse:creator" content="@[email protected]" /><!-- Sepanduk Apl Pintar -->
<meta
name="apple-itunes-app"
content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"
/>
<!-- Lumpuhkan pengesanan automatik dan pemformatan yang berkemungkinan nombor telefon -->
<meta name="format-detection" content="telephone=no" />
<!-- Ikon Pelancaran (180x180px atau lebih besar) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png" />
<!-- Pelancaran Imej Skrin -->
<link rel="apple-touch-startup-image" href="/path/to/launch.png" />
<!-- Pelancaran Tajuk Ikon -->
<meta name="apple-mobile-web-app-title" content="App Title" />
<!-- Dayakan mod kendiri (skrin penuh). -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Penampilan bar status (tiada kesan melainkan mod kendiri didayakan) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- Pautan dalam apl iOS -->
<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" /><meta name="theme-color" content="#E64545" />
<!-- Tambahkan pada skrin utama -->
<meta name="mobile-web-app-capable" content="yes" />
<!-- Info lanjut: https://developer.chrome.com/multidevice/android/installtohomescreen -->
<!-- Pautan dalam apl Android -->
<meta name="google-play-app" content="app-id=package-name" />
<link rel="alternate" href="android-app://package-name/http/url-sample.com" /><link
rel="chrome-webstore-item"
href="https://chrome.google.com/webstore/detail/APP_ID"
/>
<!-- Lumpuhkan gesaan terjemahan -->
<meta name="google" content="notranslate" /><!-- Paksa IE 8/9/10 untuk menggunakan enjin pemaparan terbaharunya -->
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<!-- Lumpuhkan pengesanan automatik dan pemformatan yang berkemungkinan normbor telefon melalui sambungan penyemak imbas Skype Toolbar -->
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible" />
<!-- Windows Tiles -->
<meta name="msapplication-config" content="/browserconfig.xml" />Penanda xml minimum yang diperlukan 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><!-- Pilih susunan rendering engine -->
<meta name="renderer" content="webkit|ie-comp|ie-stand" /><!-- Mengunci skrin ke dalam orientasi yang ditentukan -->
<meta name="x5-orientation" content="landscape/portrait" />
<!-- Paparkan dokumen ini dalam skrin penuh -->
<meta name="x5-fullscreen" content="true" />
<!-- Dokumen akan dipaparkan dalam "mod aplikasi" (skrin penuh, dsb.) -->
<meta name="x5-page-mode" content="app" /><!-- Mengunci skrin ke dalam orientasi yang ditentukan -->
<meta name="screen-orientation" content="landscape/portrait" />
<!-- Paparkan dokumen ini dalam skrin penuh -->
<meta name="full-screen" content="yes" />
<!-- UC browser akan memaparkan imej walaupun dalam "mod teks" -->
<meta name="imagemode" content="force" />
<!-- Dokumen akan dipaparkan dalam "mod aplikasi" (skrin penuh, isyarat melarang, dsb.) -->
<meta name="browsermode" content="application" />
<!-- Melumpuhkan "mod malam" UC browser untuk dokumen ini -->
<meta name="nightmode" content="disable" />
<!-- Ringkaskan dokumen untuk mengurangkan pemindahan data -->
<meta name="layoutmode" content="fitscreen" />
<!-- Lumpuhkan ciri UC browser untuk "meningkatkan fon apabila terdapat banyak perkataan dalam dokumen ini" -->
<meta name="wap-font-scale" content="no" />- ๐ Dokumen UC Browser
<!-- 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" />- ๐ Pautan Aplikasi
- Atom HTML Head Snippets - Pakej atom untuk coretan
HEAD - Sublime Text HTML Head Snippets - Pakej Sublime Text untuk coretan
HEAD - head-it - Antara muka CLI untuk coretan
HEAD - vue-head - Memanipulasi maklumat meta teg
HEADuntuk Vue.js
- ๐ PDF
- ๐ฎ๐ฉ Bahasa
- ๐ง๐ท Brazilian Portuguese
- ๐จ๐ณ Chinese (Simplified)
- ๐ฉ๐ช German
- ๐ฎ๐น Italian
- ๐ฏ๐ต Japanese
- ๐ฐ๐ท Korean
- ๐ฒ๐พ๐ง๐ณ๐ธ๐ฌ Malay
- ๐ท๐บ Russian/ะ ัััะบะธะน
- ๐ช๐ธ Spanish
- ๐น๐ท Turkish/Tรผrkรงe
Open an issue or a pull request to suggest changes or additions.
The HEAD repository consists of two branches:
This branch consists of the README.md file that is reflected on the htmlhead.dev website. All changes to the content of the guide should be made in this file.
Please follow these steps for pull requests:
{:.list-style-default}
- Modify only one tag, or one related set of tags at a time
- Use double quotes on attributes
- Don't include a trailing slash in self-closing elements โ the HTML5 spec says they're optional
- Consider including a link to documentation that supports your change
This branch is responsible for the htmlhead.dev website. We use Jekyll to deploy the README.md markdown file to GitHub Pages. All website related modifications should be made in this branch.
You may find it helpful to review the Jekyll Docs and understand how Jekyll works before working in this branch.
Check out all the super awesome contributors ๐คฉ
Josh Buchea
- GitHub: @joshbuchea
- Mastodon: @[email protected]
If this project was helpful for you or your organization, please considering supporting my work directly:
- ๐ Sponsor me on GitHub
- โญ๏ธ Star this project on GitHub
- ๐ Follow me on GitHub
- ๐ Follow me on Mastodon
Everything helps, thanks! ๐
โ Josh
N.M.Muizz
- GitHub: @shoen1x
- Email: [email protected]
