Panduan ringkas untuk elemen <head> HTML dalam Bahasa Melayu.
Terjemahan dalam Bahasa Melayu oleh Shoenix.
Minimum yang disyorkan
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
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>
Susunan Disyorkan
Berikut ialah susunan elemen yang disyorkan dalam <head> untuk prestasi terbaik dan pemaparan dokumen yang betul:
<meta charset>— Pengisytiharan pengekodan aksara; mesti muncul dalam 1024 bait pertama dokumen<meta name="viewport">— Tetapan Viewport; isytiharkan awal untuk memastikan pemaparan responsif yang betul<title>— Tajuk dokumen; diletakkan selepas pengekodan/viewport untuk mengelakkan potensi pemaparan semula- Tag
<meta>lain (penerangan, robot, dsb.) - Tag meta Graf Terbuka / Sosial
- Tag
<link rel="canonical">dan tag<link>lain (tidak termasuk helaian gaya dan petunjuk sumber) <link rel="preconnect">/<link rel="dns-prefetch">— Petunjuk sumber; awal untuk memaksimumkan nilainya<link rel="stylesheet">— CSS Luaran; Helaian gaya hendaklah diletakkan sebelum skrip<link rel="icon">— Favicon<script>— Skrip; gunakandeferatauasyncjika boleh untuk mengelakkan penyekatan pemaparan
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tajuk Halaman</title>
<meta name="description" content="Page description" />
<!-- tag meta lain -->
<!-- Tag meta Graf Terbuka / Sosial -->
<meta property="og:title" content="Tajuk Halaman" />
<!-- tag meta sosial lain -->
<link rel="canonical" href="https://example.com/page.html" />
<!-- tag pautan lain (tidak termasuk helaian gaya dan petunjuk sumber) -->
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
<link rel="stylesheet" href="styles.css" />
<link rel="icon" href="favicon.ico" />
<script defer src="script.js"></script>
</head>
Meta
<!--
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" />
<!-- Menunjukkan skema warna yang disokong untuk halaman (light, dark, atau kedua-duanya) -->
<meta name="color-scheme" content="light dark" />
<!-- 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" /><!-- Semua Enjin Carian -->
<meta name="googlebot" content="index,follow" /><!-- Khusus Google -->
<!-- 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="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" />
<!-- Tag Geo -->
<meta
name="ICBM"
content="latitude, longitude"
/><!-- Koordinat geografi (latitud, longitud) dalam darjah perpuluhan; cth. content="48.8566, 2.3522" -->
<meta
name="geo.position"
content="latitude;longitude"
/><!-- Koordinat geografi; latitud dan longitud dipisahkan oleh titik koma -->
<meta
name="geo.region"
content="country[-state]"
/><!-- Kod negara (ISO 3166-1): wajib, kod negeri (ISO 3166-2): pilihan; cth. content="US" / content="US-NY" -->
<meta
name="geo.placename"
content="city/town"
/><!-- cth. content="New York City" -->
<!-- Pengewangan Web https://webmonetization.org/docs/getting-started -->
<meta name="monetization" content="$paymentpointer.example" />
Nota: Tag geo tidak digunakan oleh pelayar secara langsung — ia bertujuan untuk enjin carian, perayap web dan perkhidmatan berasaskan lokasi untuk memahami perkaitan geografi kandungan halaman. ICBM (dinamakan sempena konvensyen alamat ICBM tentera) dan geo.position kedua-duanya menyatakan koordinat dalam darjah perpuluhan; ICBM menggunakan pemisah koma manakala geo.position menggunakan titik koma. geo.region mengenal pasti negara (dan secara pilihan negeri/rantau) menggunakan kod ISO dan geo.placename menyediakan nama tempat yang boleh dibaca oleh manusia.
Pautan
<!-- 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 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" />
<!-- Memberikan maklumat tentang pengarang atau orang lain
Digunakan untuk RelMeAuth, satu bentuk pengesahan identiti yang diedarkan.
Lihat https://microformats.org/wiki/RelMeAuth untuk mengetahui lebih lanjut -->
<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" />
<!-- 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 sebelumnya dan seterusnya dalam satu siri dokumen, masing-masing -->
<link rel="prev" href="https://example.com/article/?page=1" />
<link rel="next" href="https://example.com/article/?page=3" />
<!-- Memberitahu URL apabila anda memautkannya pada dokumen anda Maklumat lanjut di https://webmention.net -->
<link rel="webmention" href="https://example.com/webmention" />
<!-- Membolehkan penyiaran ke domain anda sendiri menggunakan klien Micropub Maklumat lanjut di https://indieweb.org/Micropub -->
<link rel="micropub" href="https://example.com/micropub" />
<!-- Membolehkan anda menggunakan laman web anda dengan IndieAuth, penyelesaian identiti yang membolehkan anda mengesahkan dengan nama domain anda. Baca lebih lanjut di https://indieauth.net. -->
<link rel="token_endpoint" href="https://example.com/token" />
<!-- Open Search -->
<link
rel="search"
href="/open-search.xml"
type="application/opensearchdescription+xml"
title="Search Title"
/>
<!-- Suapan (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"
/>
<!-- 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="preload" href="image.png" as="image" />
``` **Nota:** [Web App
Manifest](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest)
(`manifest.json`) ialah cara merentas platform yang disyorkan untuk
mengisytiharkan sifat aplikasi web yang boleh dipasang — termasuk mod `nama`,
`ikon`, `warna_tema` dan `paparan` — dalam satu fail, dan bukannya bergantung
pada berbilang teg `<meta />` khusus platform. - 📖 [Link
Relations](https://www.iana.org/assignments/link-relations/link-relations.xhtml)
- 📖 [Web App Manifest
(MDN)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest)
Ikon
<!-- 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" />
Skrip
<!--
Skrip: letakkan tag <script> di hujung <body> apabila boleh.
Atribut berikut mengawal tingkah laku pemuatan apabila diletakkan di <head>:
-->
<!-- Menyekat penghuraian HTML dan pemaparan kandungan sehingga skrip diambil dan dilaksanakan -->
<script src="script.js"></script>
<!-- Skrip akan diambil selari dengan penghuraian dan dilaksanakan sebaik sahaja ia tersedia (sebelum penghuraian selesai) -->
<script async src="script.js"></script>
<!-- Skrip akan diambil selari dengan penghuraian dan dilaksanakan apabila halaman selesai dihuraikan -->
<script defer src="script.js"></script>
<!-- async diutamakan dalam pelayar moden; defer bertindak sebagai sandaran untuk pelayar lama yang tidak menyokong async -->
<script async defer src="script.js"></script>
<!-- Skrip sebaris -->
<script>
// fungsi pergi ke sini
</script>
<!-- Integriti Subsumber (SRI): gunakan atribut integriti untuk mengesahkan bahawa sumber yang diambil telah dihantar tanpa manipulasi yang tidak dijangka -->
<script
src="https://example.com/script.js"
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
></script>
Sosial
Graf Terbuka
Protokol Graf Terbuka ialah piawaian de facto untuk mengawal penampilan kandungan anda apabila dikongsi di platform sosial. Pada asalnya dicipta oleh Facebook, ia kini digunakan oleh kebanyakan platform utama — termasuk LinkedIn, X (sebagai sandaran apabila tag Kad Twitter tiada), Discord, Slack, iMessage, Mastodon, Bluesky dan WhatsApp.
<meta property="og:url" content="https://example.com/page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Tajuk Kandungan" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta
property="og:image:alt"
content="Penerangan tentang apa yang ada dalam imej (bukan kapsyen)"
/>
<meta property="og:description" content="Penerangan Di Sini" />
<meta property="og:site_name" content="Nama Tapak" />
<meta property="og:locale" content="en_US" />
<meta property="article:author" content="" />
- 📖 Open Graph protocol
- 🛠 Test your page with the Facebook Sharing Debugger or the LinkedIn Post Inspector
Schema.org
<html lang="" itemscope itemtype="https://schema.org/Article">
<head>
<link rel="author" href="" />
<link rel="publisher" href="" />
<meta itemprop="name" content="Tajuk Kandungan" />
<meta
itemprop="description"
content="Huraian kandungan kurang daripada 200 aksara"
/>
<meta itemprop="image" content="https://example.com/image.jpg" />
</head>
</html>
Nota: Tag meta ini memerlukan atribut itemscope dan itemtype ditambah pada tag <html>.
- 📖 Getting Started - schema.org
- 🛠 Test your page with the Rich Results Test
Skema JSON-LD Google
Berikut digunakan oleh Google untuk membantu menyediakan laman web anda dengan hasil graf pengetahuan apabila seseorang mencari anda di Google (ini ialah anak tetingkap di sebelah kanan hasil carian yang biasanya muncul untuk jenama yang lebih besar):
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organisasi",
"name": "yourbrand.com",
"url": "https://www.yourbrand.com/",
"logo": "https://www.yourbrand.com/logo.png",
"sameAs": [
"https://www.facebook.com/yourbrand",
"https://twitter.com/yourbrand",
"https://uk.pinterest.com/yourbrand/",
"https://www.instagram.com/yourbrand/",
"https://www.linkedin.com/company/yourbrand-com"
]
}
</script>
Pinterest membolehkan anda menghalang orang daripada menyimpan sesuatu daripada laman web anda, menurut pusat bantuan mereka. description adalah pilihan.
<meta
name="pinterest"
content="nopin"
description="Maaf, anda tidak boleh menyimpan daripada laman web saya!"
/>
OEmbed
<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"
/>
QQ/Wechat
Pengguna yang 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" />
Dublin Core
Dublin Core ialah perbendaharaan kata metadata yang diseragamkan sebagai ISO 15836 dan diselenggarakan oleh Inisiatif Metadata Dublin Core (DCMI). Ia mentakrifkan lima belas elemen teras untuk menerangkan sumber dan digunakan secara meluas dalam perpustakaan digital, repositori institusi, penerbitan akademik dan portal kerajaan. Untuk menggunakan Dublin Core dalam HTML, isytiharkan ruang nama DC dan kemudian tambahkan elemen yang dikehendaki sebagai tag <meta> dengan awalan DC..
<!-- Isytiharkan ruang nama Dublin Core -->
<link rel="schema.DC" href="https://purl.org/dc/elements/1.1/" />
<meta name="DC.title" content="Tajuk Halaman" />
<meta name="DC.creator" content="Nama Pengarang" />
<meta name="DC.subject" content="Kata Kunci; Topik" />
<meta
name="DC.description"
content="Penerangan ringkas tentang kandungan halaman"
/>
<meta name="DC.publisher" content="Nama Penerbit" />
<meta name="DC.contributor" content="Nama Penyumbang" />
<meta name="DC.date" content="YYYY-MM-HH" />
<meta name="DC.type" content="Teks" />
<meta name="DC.format" content="text/html" />
<meta name="DC.identifier" content="https://example.com/page.html" />
<meta name="DC.source" content="https://example.com/original-source" />
<meta name="DC.language" content="en" />
<meta name="DC.relation" content="https://example.com/related" />
<meta name="DC.coverage" content="Liputan ruang atau masa" />
<meta name="DC.rights" content="Nama Pemilik Hak Cipta" />
Fediverse
Sesetengah perisian Fediverse seperti Mastodon membolehkan anda meletakkan pemegang Fediverse anda dalam tag meta yang akan dipaparkan dalam embed ke laman web anda. Selain tag, anda juga perlu menambah domain anda ke senarai laman web yang dibenarkan dalam “Tetapan -> Profil awam -> Pengesahan -> Atribusi pengarang” (untuk Mastodon).
<meta name="fediverse:creator" content="@handle@example.org" />
Pelayar / Platform
Apple iOS
<!-- 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" />
<!-- Port pandangan sesuai untuk telefon bertakuk (iPhone X dan yang lebih baharu); tambah viewport-fit=cover pada tag meta port pandangan sedia ada anda -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
<!-- 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" />
Nota: Sifat seperti tajuk aplikasi (apple-mobile-web-app-title), mod paparan/kendiri dan ikon aplikasi (apple-touch-icon) dikonfigurasikan dengan lebih andal dan mudah alih menggunakan Web App Manifest (<link rel="manifest">), yang merupakan pendekatan yang disyorkan untuk Aplikasi Web Progresif (PWA). Tag meta khusus Apple kekal berguna sebagai sandaran untuk versi iOS yang lebih lama.
Google Android
<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" />
Nota: theme-color dan tingkah laku “tambah ke skrin utama” / kendiri ditakrifkan dengan lebih baik menggunakan Web App Manifest (<link rel="manifest">). Tag meta theme-color masih boleh berfungsi sebagai sandaran untuk pelayar yang belum menyokong sifat theme-color manifes.
Google Chrome
<link
rel="chrome-webstore-item"
href="https://chrome.google.com/webstore/detail/APP_ID"
/>
<!-- Lumpuhkan gesaan terjemahan -->
<meta name="google" content="notranslate" />
Pelayar (Bahasa Cina)
360 Browser
<!-- Pilih susunan rendering engine -->
<meta name="renderer" content="webkit|ie-comp|ie-stand" />
QQ Mobile Browser
<!-- 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" />
UC Mobile Browser
<!-- 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" />
Pautan Apl
<!-- 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" />
Elemen <head> yang tidak lagi disokong
Microsoft Internet Explorer
Internet Explorer telah dibersarakan oleh Microsoft pada 15 Jun 2022. Semua tag khusus IE adalah usang.
<!-- Paksa IE 8/9/10 untuk menggunakan enjin pemaparan terkininya -->
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<!-- Lumpuhkan pengesanan automatik dan pemformatan nombor telefon yang mungkin oleh sambungan pelayar 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>
Live tiles telah dialih keluar daripada menu Mula Windows 11 dan tidak lagi dipaparkan oleh Edge.
Apple Safari
<!-- Ikon Tab Semat Safari -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue" />
Tab Semat Safari telah dialih keluar dalam Safari 17 (2023); hubungan pautan mask-icon tidak lagi digunakan.
Apple IOS
<!-- Dayakan mod kendiri (skrin penuh) -->
<meta name="apple-mobile-web-app-capable" content="yes" />
Sejak iOS 17.4, Apple menghentikan penggunaan apple-mobile-web-app-capable dan memilih mobile-web-app-capable yang diseragamkan:
<meta name="mobile-web-app-capable" content="yes" />
Petua Sumber
<!-- Prapapar halaman penuh di latar belakang -->
<link rel="prerender" href="https://example.com/" />
<link rel="prerender"> telah ditamatkan dan dialih keluar daripada Chrome dan digantikan dengan API Peraturan Spekulasi.
<!-- Pilih keluar sepenuhnya daripada prapengambilan DNS dengan menetapkan kepada "mati" -->
<meta http-equiv="x-dns-prefetch-control" content="mati" />
x-dns-prefetch-control ialah sambungan era Firefox/IE yang tidak pernah dilaksanakan dalam Chromium dan tidak lagi digunakan secara bermakna oleh pelayar moden. Gunakan <link rel="dns-prefetch"> untuk petunjuk praambilan yang eksplisit.
Hubungan Pautan
<!-- Pautan ke versi HTML AMP dokumen semasa -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html" />
Google mengalih keluar keperluan AMP daripada Cerita Teratas pada tahun 2021 dan isyarat Pengalaman Halaman AMP telah dihentikan. Projek AMP itu sendiri sebahagian besarnya tidak aktif.
<!-- Digunakan apabila perkhidmatan pihak ketiga digunakan untuk menyelenggara blog -->
<link
rel="EditURI"
href="https://example.com/xmlrpc.php?rsd"
type="application/rsd+xml"
title="RSD"
/>
<!-- Membentuk komen automatik apabila blog WordPress lain memautkan ke blog atau siaran WordPress anda -->
<link rel="pingback" href="https://example.com/xmlrpc.php" />
RSD (Really Simple Discoverability) telah digunakan oleh editor blog XML-RPC seperti Windows Live Writer (dihentikan pada 2017). Pingback XML-RPC telah dilumpuhkan secara meluas secara lalai kerana penggunaannya dalam serangan amplifikasi DDoS. Gunakan Webmention sebagai gantinya.
<!-- Pautan ke 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 tertinggi dalam struktur hierarki -->
<link rel="index" href="https://example.com/article/" />
Kedua-dua archives dan index telah dialih keluar daripada piawaian HTML dan tidak lagi didaftarkan dalam daftar perhubungan pautan IANA untuk HTML.
Pengesahan Tapak
<meta name="alexaVerifyID" content="verification_token" /><!-- Alexa Console -->
Alexa Internet (perkhidmatan analitik trafik web — tidak berkaitan dengan pembantu suara Amazon Alexa) telah ditutup oleh Amazon pada 1 Mei 2022.
Media Sosial
<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="Tajuk Kandungan" />
<meta
name="twitter:description"
content="Huraian kandungan kurang daripada 200 aksara"
/>
<meta name="twitter:image" content="https://example.com/image.jpg" />
<meta
name="twitter:image:alt"
content="Huraian teks imej yang menyampaikan sifat penting imej kepada pengguna yang cacat penglihatan. Maksimum 420 aksara."
/>
X (dahulunya Twitter) kini kembali kepada tag Open Graph apabila tag twitter:* tiada, menjadikan penanda Kad Twitter khusus berlebihan untuk kebanyakan kes penggunaan. Pengesah Kad Twitter telah dihentikan dan dokumentasi Pembangun Twitter asal tidak lagi boleh diakses. Tag masih dihuraikan jika ada, tetapi tiada sebab untuk mengekalkan set berasingan bersama Open Graph.
<!-- tidak membenarkan Twitter menggunakan maklumat tapak anda untuk tujuan pemperibadian -->
<meta name="twitter:dnt" content="on" />
Sokongan Jangan Jejaki Twitter telah digugurkan secara efektif berikutan peralihan platform kepada X. Dokumentasi pilihan privasi Twitter yang asal tidak lagi boleh diakses, dan isyarat tersebut tidak dihormati dalam praktiknya.
<meta property="fb:app_id" content="123456789" />
fb:app_id pada asalnya diperlukan untuk Wawasan/Wawasan Domain Facebook tetapi tidak lagi diperlukan untuk perkongsian Graf Terbuka. Dokumentasi Perkongsian semasa Meta tidak menyenaraikannya sebagai diperlukan, dan kebanyakan penghurai Graf Terbuka mengabaikannya.
Pelbagai
<!-- Menentukan dokumen untuk dipaparkan dalam bingkai tertentu -->
<meta http-equiv="Window-Target" content="_value" />
Window-Target ialah sambungan era IE bukan standard yang tidak pernah diguna pakai oleh standard HTML dan tidak disokong oleh pelayar moden.
Projek Berkaitan
- 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 `HEAD` untuk Vue.js