HTML <head> 標簽大全，看了一定不后悔

作者：Joshbuchea 2017-09-28 08:35:35

本文介紹一份關于任何可以寫入到你的文檔中 <head> 部分的清單，包括最小推薦、網頁元素、Meta 標簽等，仔細看看吧。

[[205147]]

一份關于任何可以寫入到你的文檔中 <head> 部分的清單。

最小推薦

下面是基本的、最低限度的網站基本標簽：

<meta charset="utf-8"> 
<meta http-equiv="x-ua-compatible" content="ie=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<!-- 以上 3 個 meta 標簽 *必須* 放在 head 的最前面；其他任何的 head 內容必須在這些標簽的 *后面* --> 
<title>頁面標題</title>

網頁元素

<!-- 文檔標題 --> 
<title>頁面標題</title> 
<!-- 基本 URL 作用于文檔中所包含的所有相對 URL --> 
<base href="https://example.com/page.html"> 
<!-- 外部的 CSS --> 
<link rel="stylesheet" href="styles.css"> 
<!-- 文檔內的 CSS --> 
<style> 
  /* ... */ 
</style> 
<!-- JavaScript --> 
<script src="script.js"></script> 
<noscript><!--無 JS 時的替代--></noscript>

Meta 標簽

<!-- 設置文檔的字符編碼 --> 
<meta charset="utf-8"> 
<meta http-equiv="x-ua-compatible" content="ie=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<!-- 以上 3 個 meta 標簽 *必須* 放在 head 的最前面；其他任何的 head 內容必須在這些標簽的 *后面* --> 
<!-- 允許控制資源的過度加載 --> 
<meta http-equiv="Content-Security-Policy" content="default-src 'self'"> 
<!-- 盡早地放置在文檔中 --> 
<!-- 僅應用于該標簽下的內容 --> 
<!-- Web 應用的名稱（僅當網站被用作為一個應用時才使用）--> 
<meta name="application-name" content="應用名稱"> 
<!-- 針對頁面的簡短描述（限制 150 字符）--> 
<!-- 在*某些*情況下，該描述是被用作搜索結果展示片段的一部分 --> 
<meta name="description" content="一個頁面描述"> 
<!-- 控制搜索引擎的抓取和索引行為 --> 
<meta name="robots" content="index,follow"><!-- 所有搜索引擎 --> 
<meta name="googlebot" content="index,follow"><!-- 僅對 Google 有效 --> 
<!-- 告訴 Google 不顯示網站鏈接的搜索框 --> 
<meta name="google" content="nositelinkssearchbox"> 
<!-- 告訴 Google 不提供此頁面的翻譯 --> 
<meta name="google" content="notranslate"> 
<!-- 驗證 Google 搜索控制臺的所有權 --> 
<meta name="google-site-verification" content="verification_token"> 
<!-- 驗證 Yandex 網站管理員的所有權 --> 
<meta name="yandex-verification" content="verification_token"> 
<!-- 驗證 Bing 網站管理員中心的所有權 --> 
<meta name="msvalidate.01" content="verification_token"> 
<!-- 驗證 Alexa 控制臺的所有權 --> 
<meta name="alexaVerifyID" content="verification_token"> 
<!-- 驗證 Pinterest 控制臺的所有權 --> 
<meta name="p:domain_verify" content="code from pinterest"> 
<!-- 驗證 Norton 安全站點的所有權 --> 
<meta name="norton-safeweb-site-verification" content="norton code"> 
<!-- 用來命名軟件或用于構建網頁（如 - WordPress、Dreamweaver）--> 
<meta name="generator" content="program"> 
<!-- 關于你的網站主題的簡短描述 --> 
<meta name="subject" content="你的網站主題"> 
<!-- 基于網站內容給出一般的年齡分級 --> 
<meta name="rating" content="General"> 
<!-- 允許控制 referrer 信息如何傳遞 --> 
<meta name="referrer" content="no-referrer"> 
<!-- 禁用自動檢測和格式化可能的電話號碼 --> 
<meta name="format-detection" content="telephone=no"> 
<!-- 通過設置為 “off” 完全退出 DNS 預取 --> 
<meta http-equiv="x-dns-prefetch-control" content="off"> 
<!-- 在客戶端存儲 cookie，web 瀏覽器的客戶端識別 --> 
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url"> 
<!-- 指定要顯示在一個特定框架中的頁面 --> 
<meta http-equiv="Window-Target" content="_value"> 
<!-- 地理標簽 --> 
<meta name="ICBM" content="latitude, longitude"> 
<meta name="geo.position" content="latitude;longitude"> 
<meta name="geo.region" content="country[-state]"><!-- 國家代碼 (ISO 3166-1): 強制性, 州代碼 (ISO 3166-2): 可選; 如 content="US" / content="US-NY" --> 
<meta name="geo.placename" content="city/town"><!-- 如 content="New York City" -->

Google 可以識別的 Meta 標簽
WHATWG Wiki: Meta 拓展
ICBM - 維基百科
地理標記 - 維基百科

鏈接

<!-- 表明一個 CSS 樣式表 --> 
<link rel="stylesheet" href="https://example.com/styles.css"> 
<!-- 有助于防止出現內容重復的問題 --> 
<link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html"> 
<!-- 之前用于包含 icon 鏈接，但已被廢棄并不再使用 --> 
<link rel="shortlink" href="https://example.com/?p=42"> 
<!-- 鏈接到當前文檔的一個 AMP HTML 版本 --> 
<link rel="amphtml" href="https://example.com/path/to/amp-version.html"> 
<!-- 鏈接到一個指定 Web 應用程序“安裝”證書的 JSON 文件 --> 
<link rel="manifest" href="manifest.json"> 
<!-- 鏈接到文檔的作者 --> 
<link rel="author" href="humans.txt"> 
<!-- 指向一個適用于鏈接內容的版權申明 --> 
<link rel="license" href="copyright.html"> 
<!-- 給出可能的你的另一種語言的文檔位置參考 --> 
<link rel="alternate" href="https://es.example.com/" hreflang="es"> 
<!-- 提供了關于作者或其他人的信息 --> 
<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"> 
<!-- 鏈接到一個描述歷史記錄、文檔或其他具有歷史意義的材料的集合的文檔。 --> 
<link rel="archives" href="https://example.com/archives/"> 
<!-- 鏈接到層次結構中的頂級資源 --> 
<link rel="index" href="https://example.com/"> 
<!-- 給出一個自我參考 - 當文檔有多個可能的參考時非常有用 --> 
<link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3"> 
<!-- 分別是在一系列文件中的第一個、下一個、上一個和最后一個 --> 
<link rel="first" href="https://example.com/atomFeed.php"> 
<link rel="next" href="https://example.com/atomFeed.php?page=4"> 
<link rel="prev" href="https://example.com/atomFeed.php?page=2"> 
<link rel="last" href="https://example.com/atomFeed.php?page=147"> 
<!-- 當使用第三方服務來維護 blog 時使用 --> 
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD"> 
<!-- 當另一個 WordPress 博客鏈接到你的 WordPress 博客或文章時形成一個自動化的評論 --> 
<link rel="pingback" href="https://example.com/xmlrpc.php"> 
<!-- 當你在自己的頁面上鏈接到一個 url 時通知它 --> 
<link rel="webmention" href="https://example.com/webmention"> 
<!-- 加載一個外部的 HTML 文件到當前 HTML 文件中 --> 
<link rel="import" href="/path/to/component.html"> 
<!-- 打開搜索 --> 
<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"> 
<!-- 預取，預載，預瀏覽 --> 
<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"> 
<!-- 更多信息：https://css-tricks.com/prefetching-preloading-prebrowsing/ -->

網站圖標

<!-- 針對 IE 10 及以下版本 --> 
<!-- 如果將 `favicon.ico` 放在根目錄下，則無需標簽 --> 
<!-- 對于 IE 11、Chrome、Firefox、Safari 和 Opera --> 
<link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png"> 
<link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png"> 
<link rel="icon" type="image/png" sizes="96x96" href="/path/to/favicon-96x96.png"> 
<!-- 更多信息: https://bitsofco.de/all-about-favicons-and-touch-icons/ -->

所有關于網站圖標(和觸摸圖標)的信息
網站圖標對照表

社交

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: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 的標記
Open Graph 協議

Facebook Instant Articles

<meta charset="utf-8"> 
<meta property="op:markup_version" content="v1.0"> 
<!-- 你的文章的 Web 版網址 --> 
<link rel="canonical" href="http://example.com/article.html"> 
<!-- 用于該文章的樣式 --> 
<meta property="fb:article_style" content="myarticlestyle">

Facebook Instant Articles: 創建文章
Instant Articles: 格式參考

Twitter Cards

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

Twitter 名片：入門指南
Twitter 名片驗證

Google+ / Schema.org

<link href="https://plus.google.com/+YourPage" rel="publisher"> 
<meta itemprop="name" content="內容標題"> 
<meta itemprop="description" content="內容描述少于 200 個字符"> 
<meta itemprop="image" content="https://example.com/image.jpg">

Pinterest

根據他們的幫助中心可知，Pinterest 允許你禁止他人保存你網站里的內容。description 為可選。

<meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!">

OEmbed

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

oEmbed 格式

瀏覽器 / 平臺

Apple iOS

<!-- 智能應用 Banner --> 
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"> 
<!-- 禁用自動檢測和格式化可能的電話號碼 --> 
<meta name="format-detection" content="telephone=no"> 
<!-- 添加到主屏幕 --> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<meta name="apple-mobile-web-app-title" content="應用標題"> 
<!-- 觸摸圖標 --> 
<!-- 在大多數情況下，在 `<head>` 中，一個 180×180px 觸摸圖標就已經足夠了 --> 
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png"> 
<!-- 注意：iOS 7 上的 Safari 不會對圖標產生效果。 --> 
<!-- 較早版本的 Safari 不會對以 `-precomposed.png` 后綴命名的圖標文件產生效果。 --> 
<!-- 啟動畫面（已無效） --> 
<link rel="apple-touch-startup-image" href="path/to/startup.png"> 
<!-- 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">

Apple Meta 標簽

Apple Safari

<!-- 固定網站 --> 
<link rel="mask-icon" href="path/to/icon.svg" color="red">

Google Android

<meta name="theme-color" content="#E64545"> 
<!-- 添加到主屏幕 --> 
<meta name="mobile-web-app-capable" content="yes"> 
<!-- 更多信息：https://developer.chrome.com/multidevice/android/installtohomescreen -->

Google Chrome

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID"> 
<!-- 禁用翻譯提示 --> 
<meta name="google" content="notranslate">

Google Chrome Mobile (只針對 Android)

從 Chrome 31 開始，你可以設置你的 Web 應用為“app mode”，如 Safari。

<!-- 鏈接到一個 manifest 并定義 manifest 的元數據。--> 
<!-- manifest.json 中的例子也可以通過以下鏈接找到。--> 
<link rel="manifest" href="manifest.json"> 
<!-- 定義你的網頁為 Web 應用 --> 
<meta name="mobile-web-app-capable" content="yes"> 
<!-- 主屏幕圖標 --> 
<link rel="icon" sizes="192x192" href="highres-icon.png">

Google 開發者

Microsoft Internet Explorer

<meta http-equiv="x-ua-compatible" content="ie=edge"> 
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible"> 
<!-- IE10: 禁用鏈接點擊高亮 (https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) --> 
<meta name="msapplication-tap-highlight" content="no"> 
<!-- 固定網站 (https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx) --> 
<meta name="application-name" content="Sample Title"> 
<meta name="msapplication-tooltip" content="A description of what this site does."> 
<meta name="msapplication-starturl" content="http://example.com/index.html?pinned=true"> 
<meta name="msapplication-navbutton-color" content="#FF3300"> 
<meta name="msapplication-window" content="width=800;height=600"> 
<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"> 
<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"> 
<meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=http://example.com/path/to/file.xml"> 
<meta name="msapplication-TileColor" content="#FF3300"> 
<meta name="msapplication-TileImage" content="path/to/tileimage.jpg"> 
<meta name="msapplication-config" content="http://example.com/browserconfig.xml"> 
<meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile;polling-uri2=http://example.com/livetile2"> 
<meta name="msapplication-task-separator" content="1">

應用鏈接

<!-- 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 回退 --> 
<meta property="al:web:url" content="http://applinks.org/documentation"> 
<!-- 更多信息：http://applinks.org/documentation/ -->

應用鏈接文檔

國內的瀏覽器

360 瀏覽器

<!-- 選擇渲染引擎 --> 
<meta name="renderer" content="webkit|ie-comp|ie-stand">

QQ 移動瀏覽器

<!-- 在指定方向上鎖定屏幕（鎖定橫/豎屏） --> 
<meta name="x5-orientation" content="landscape/portrait"> 
<!-- 全屏顯示此頁面 --> 
<meta name="x5-fullscreen" content="true"> 
<!-- 頁面將以“應用模式”顯示（全屏等）--> 
<meta name="x5-page-mode" content="app">

UC 移動瀏覽器

<!-- 在指定方向上鎖定屏幕（鎖定橫/豎屏） --> 
<meta name="screen-orientation" content="landscape/portrait"> 
<!-- 全屏顯示此頁面 --> 
<meta name="full-screen" content="yes"> 
<!-- 即使在“文本模式”下，UC 瀏覽器也會顯示圖片 --> 
<meta name="imagemode" content="force"> 
<!-- 頁面將以“應用模式”顯示（全屏、禁止手勢等） --> 
<meta name="browsermode" content="application"> 
<!-- 在此頁面禁用 UC 瀏覽器的“夜間模式” --> 
<meta name="nightmode" content="disable"> 
<!-- 簡化頁面，減少數據傳輸 --> 
<meta name="layoutmode" content="fitscreen"> 
<!-- 禁用的 UC 瀏覽器的功能，“當此頁面中有較多文本時縮放字體” --> 
<meta name="wap-font-scale" content="no">

UC 瀏覽器文檔

注意

性能

當啟用 GZIP 時，移動 href 屬性到該元素的開頭以提高壓縮，因為 href 屬性被用于 a、base 和 link 標簽。

示例:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">

其他資源

HTML5 樣板文檔：HTML 標簽
HTML5 樣板文檔：擴展和定制

相關項目

Atom HTML Head 片段 - Atom HEAD 片段包
Sublime Text HTML Head 片段 - Sublime Text HEAD 片段包
head-it - HEAD 片段的 CLI 接口
vue-head - 在 Vue.js 中操作 HEAD 標簽的 meta 信息

其他格式

翻譯

英語/English
巴西葡萄牙語/Brazilian Portuguese
意大利語/Italian
日語/Japanese
俄羅斯語/Russian/Русский
土耳其語/Turkish/Türkçe
韓語/Korean

貢獻

開啟一個 issue 或一個 pull 請求來提出修改或補充。

指南

HEAD 倉庫由兩個分支組成：

1、master

對該分支包含的 README.md 文件的修改會自動反映在 <Head> Cheat Sheet 網站上。所有對照表內容的更改都應該針對此文件。

請按照下列步驟 pull 請求：

只修改一個標簽，或一次一組相關的標簽
對屬性使用雙引號
請不要在自我閉合的元素中使用斜線 —— 即便 HTML5 規范中說，他們是可選的
考慮在文檔中加入鏈接以支持你所提到的變化

2. gh-pages

該分支負責 <Head> Cheat Sheet 網站。我們使用 Jekyll 通過 GitHub Pages 服務來部署 README.md Markdown 文件。所有網站相關的修改必須集中在這里。

你可能需要通過 Jekyll 文檔來了解 Jekyll 是如何在該分支上工作的。

責任編輯：龐桂玉來源： Linux中國

前端 HTML 標簽大全