整理了一份關(guān)于可以寫入到HTML 標(biāo)簽中的內(nèi)容清單-2017年最新的 <head>元素指南躬充，主要內(nèi)容來自 <head> cheatsheet ，讓大家了解每個(gè)標(biāo)簽及相應(yīng)屬性的意義诉濒，寫出滿足自己需求的 <head>頭部標(biāo)簽，可以很有效的增強(qiáng)頁(yè)面的可用性。
最小推薦
<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 個(gè) meta 標(biāo)簽 *必須* 放在 head 的最前面攻冷；其他任何的 head 內(nèi)容必須在這些標(biāo)簽的 *后面* -->
<title>頁(yè)面標(biāo)題</title>
網(wǎng)頁(yè)元素
<!-- 文檔標(biāo)題 -->
<title>頁(yè)面標(biāo)題</title>
<!-- 基本 URL 作用于文檔中所包含的所有相對(duì) URL -->
<base >
<!-- 外部的 CSS -->
<link rel="stylesheet" href="styles.css">
<!-- 文檔內(nèi)的 CSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="script.js"></script>
<noscript><!--無(wú) JS 時(shí)的替代--></noscript>
Meta 標(biāo)簽
<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 個(gè) meta 標(biāo)簽 *必須* 放在 head 的最前面；其他任何的 head 內(nèi)容必須在這些標(biāo)簽的 *后面* -->
<!-- 對(duì)外部資源加載的限制（允許控制從哪里加載資源） -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- 盡早地放置在文檔中 -->
<!-- 僅應(yīng)用于該標(biāo)簽下的內(nèi)容 -->
<!-- Web 應(yīng)用的名稱（僅當(dāng)網(wǎng)站被用作為一個(gè)應(yīng)用時(shí)才使用）-->
<meta name="application-name" content="應(yīng)用名稱">
<!-- 針對(duì)頁(yè)面的簡(jiǎn)短描述（限制 150 字符）-->
<!-- 在*某些*情況下遍希，該描述是被用作搜索結(jié)果展示片段的一部分 -->
<meta name="description" content="一個(gè)頁(yè)面描述">
<!-- 控制搜索引擎的抓取和索引行為 -->
<meta name="robots" content="index,follow"><!-- 所有搜索引擎 -->
<meta name="googlebot" content="index,follow"><!-- 僅對(duì) Google 有效 -->
<!-- 告訴 Google 不顯示網(wǎng)站鏈接的搜索框 -->
<meta name="google" content="nositelinkssearchbox">
<!-- 告訴 Google 不提供此頁(yè)面的翻譯 -->
<meta name="google" content="notranslate">
<!-- 驗(yàn)證 Google 搜索控制臺(tái)的所有權(quán) -->
<meta name="google-site-verification" content="verification_token">
<!-- 驗(yàn)證 Yandex 網(wǎng)站管理員的所有權(quán) -->
<meta name="yandex-verification" content="verification_token">
<!-- 驗(yàn)證 Bing 網(wǎng)站管理員中心的所有權(quán) -->
<meta name="msvalidate.01" content="verification_token">
<!-- 驗(yàn)證 Alexa 控制臺(tái)的所有權(quán) -->
<meta name="alexaVerifyID" content="verification_token">
<!-- 驗(yàn)證 Pinterest 控制臺(tái)的所有權(quán) -->
<meta name="p:domain_verify" content="code from pinterest">
<!-- 驗(yàn)證 Norton 安全站點(diǎn)的所有權(quán) -->
<meta name="norton-safeweb-site-verification" content="norton code">
<!-- 用來命名軟件或用于構(gòu)建網(wǎng)頁(yè)（如 - WordPress等曼、Dreamweaver）-->
<meta name="generator" content="program">
<!-- 關(guān)于你的網(wǎng)站主題的簡(jiǎn)短描述 -->
<meta name="subject" content="你的網(wǎng)站主題">
<!-- 基于網(wǎng)站內(nèi)容給出一般的年齡分級(jí) -->
<meta name="rating" content="General">
<!-- 允許控制 referrer 信息如何傳遞 -->
<meta name="referrer" content="no-referrer">
<!-- 禁用自動(dòng)檢測(cè)和格式化可能的電話號(hào)碼 -->
<meta name="format-detection" content="telephone=no">
<!-- 通過設(shè)置為 “off” 完全退出 DNS 預(yù)取 -->
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- 在客戶端存儲(chǔ) cookie，web 瀏覽器的客戶端識(shí)別 -->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
<!-- 指定要顯示在一個(gè)特定框架中的頁(yè)面 -->
<meta http-equiv="Window-Target" content="_value">
<!-- 地理標(biāo)簽 -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<meta name="geo.region" content="country[-state]"><!-- 國(guó)家代碼 (ISO 3166-1): 強(qiáng)制性, 州代碼 (ISO 3166-2): 可選; 如 content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- 如 content="New York City" -->
Google 可以識(shí)別的 Meta 標(biāo)簽
WHATWG Wiki: Meta 拓展
ICBM – 維基百科
地理標(biāo)記 – 維基百科
鏈接
<!-- 表明一個(gè) CSS 樣式表 -->
<link rel="stylesheet" >
<!-- 有助于防止出現(xiàn)內(nèi)容重復(fù)的問題 -->
<link rel="canonical" >
<!-- 之前用于包含 icon 鏈接凿蒜，但已被廢棄并不再使用 -->
<link rel="shortlink" >
<!-- 鏈接到當(dāng)前文檔的一個(gè) AMP HTML 版本 -->
<link rel="amphtml" >
<!-- 鏈接到一個(gè)指定 Web 應(yīng)用程序“安裝”證書的 JSON 文件 -->
<link rel="manifest" href="manifest.json">
<!-- 鏈接到文檔的作者 -->
<link rel="author" href="humans.txt">
<!-- 指向一個(gè)適用于鏈接內(nèi)容的版權(quán)申明 -->
<link rel="license" href="copyright.html">
<!-- 給出可能的你的另一種語(yǔ)言的文檔位置參考 -->
<link rel="alternate" hreflang="es">
<!-- 提供了關(guān)于作者或其他人的信息 -->
<link rel="me" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">
<!-- 鏈接到一個(gè)描述歷史記錄禁谦、文檔或其他具有歷史意義的材料的集合的文檔。 -->
<link rel="archives" >
<!-- 鏈接到層次結(jié)構(gòu)中的頂級(jí)資源 -->
<link rel="index" >
<!-- 給出一個(gè)自我參考 - 當(dāng)文檔有多個(gè)可能的參考時(shí)非常有用 -->
<link rel="self" type="application/atom+xml" >
<!-- 分別是在一系列文件中的第一個(gè)废封、下一個(gè)州泊、上一個(gè)和最后一個(gè) -->
<link rel="first" >
<link rel="next" >
<link rel="prev" >
<link rel="last" >
<!-- 當(dāng)使用第三方服務(wù)來維護(hù) blog 時(shí)使用 -->
<link rel="EditURI" type="application/rsd+xml" title="RSD">
<!-- 當(dāng)另一個(gè) WordPress 博客鏈接到你的 WordPress 博客或文章時(shí)形成一個(gè)自動(dòng)化的評(píng)論 -->
<link rel="pingback" >
<!-- 當(dāng)你在自己的頁(yè)面上鏈接到一個(gè) url 時(shí)通知它 -->
<link rel="webmention" >
<!-- 加載一個(gè)外部的 HTML 文件到當(dāng)前 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" type="application/rss+xml" title="RSS">
<link rel="alternate" type="application/atom+xml" title="Atom 0.3">
<!-- 預(yù)取，預(yù)載漂洋，預(yù)瀏覽 -->
<link rel="dns-prefetch" >
<link rel="preconnect" >
<link rel="prefetch" >
<link rel="prerender" >
<link rel="preload" href="image.png" as="image">
<!-- 更多信息：https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
網(wǎng)站圖標(biāo)
<!-- 針對(duì) IE 10 及以下版本 -->
<!-- 如果將 `favicon.ico` 放在根目錄下遥皂，則無(wú)需標(biāo)簽 -->
<!-- 對(duì)于 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/ -->
所有關(guān)于網(wǎng)站圖標(biāo)（和觸摸圖標(biāo)）的信息
網(wǎng)站圖標(biāo)對(duì)照表
社交
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 Instant Articles
<meta charset="utf-8"/>
<meta property="op:markup_version" content="v1.0"/>
<!-- 你的文章的 Web 版網(wǎng)址 -->
<link rel="canonical" />
<!-- 用于該文章的樣式 -->
<meta property="fb:article_style" content="myarticlestyle"/>
Facebook Instant Articles: 創(chuàng)建文章
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"/>
Google+ / Schema.org
<link rel="publisher"/>
<meta itemprop="name" content="內(nèi)容標(biāo)題"/>
<meta itemprop="description" content="內(nèi)容描述少于 200 個(gè)字符"/>
<meta itemprop="image" content="https://example.com/image.jpg"/>
OEmbed
<link rel="alternate" type="application/json+oembed"
title="oEmbed Profile: JSON"/>
<link rel="alternate" type="text/xml+oembed"
title="oEmbed Profile: XML"/>
瀏覽器 / 平臺(tái)
Apple iOS
<!-- 智能應(yīng)用 Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"/>
<!-- 禁用自動(dòng)檢測(cè)和格式化可能的電話號(hào)碼 -->
<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="應(yīng)用標(biāo)題"/>
<!-- 觸摸圖標(biāo) -->
<!-- 在大多數(shù)情況下，在 `<head>` 中贝咙，一個(gè) 180×180px 觸摸圖標(biāo)就已經(jīng)足夠了 -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png"/>
<!-- 注意：iOS 7 上的 Safari 不會(huì)對(duì)圖標(biāo)產(chǎn)生效果样悟。 -->
<!-- 較早版本的 Safari 不會(huì)對(duì)以 `-precomposed.png` 后綴命名的圖標(biāo)文件產(chǎn)生效果。 -->
<!-- 啟動(dòng)畫面（已無(wú)效） -->
<link rel="apple-touch-startup-image" href="path/to/startup.png"/>
<!-- iOS 應(yīng)用深層鏈接 -->
<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 Safari
<!-- 固定網(wǎng)站 -->
<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" />
<!-- 禁用翻譯提示 -->
<meta name="google" content="notranslate"/>
Microsoft Internet Explorer
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible"/>
<!-- IE10: 禁用鏈接點(diǎn)擊高亮 (https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) -->
<meta name="msapplication-tap-highlight" content="no"/>
<!-- 固定網(wǎng)站 (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"/>
國(guó)內(nèi)的瀏覽器
360 瀏覽器
<!-- 選擇渲染引擎 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand"/>
QQ 移動(dòng)瀏覽器
<!-- 在指定方向上鎖定屏幕（鎖定橫/豎屏） -->
<meta name="x5-orientation" content="landscape/portrait"/>
<!-- 全屏顯示此頁(yè)面 -->
<meta name="x5-fullscreen" content="true"/>
<!-- 頁(yè)面將以“應(yīng)用模式”顯示（全屏等）-->
<meta name="x5-page-mode" content="app"/>
UC 移動(dòng)瀏覽器
<!-- 在指定方向上鎖定屏幕（鎖定橫/豎屏） -->
<meta name="screen-orientation" content="landscape/portrait"/>
<!-- 全屏顯示此頁(yè)面 -->
<meta name="full-screen" content="yes"/>
<!-- 即使在“文本模式”下庭猩，UC 瀏覽器也會(huì)顯示圖片 -->
<meta name="imagemode" content="force"/>
<!-- 頁(yè)面將以“應(yīng)用模式”顯示（全屏窟她、禁止手勢(shì)等） -->
<meta name="browsermode" content="application"/>
<!-- 在此頁(yè)面禁用 UC 瀏覽器的“夜間模式” -->
<meta name="nightmode" content="disable"/>
<!-- 簡(jiǎn)化頁(yè)面，減少數(shù)據(jù)傳輸 -->
<meta name="layoutmode" content="fitscreen"/>
<!-- 禁用的 UC 瀏覽器的功能蔼水，“當(dāng)此頁(yè)面中有較多文本時(shí)縮放字體” -->
<meta name="wap-font-scale" content="no"/>
應(yīng)用鏈接
<!-- 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/ -->
注意
性能
<link rel="stylesheet"/>
其他資源
HTML5 樣板文檔：HTML 標(biāo)簽
HTML5 樣板文檔：擴(kuò)展和定制
相關(guān)項(xiàng)目
Atom HTML Head 片段 – Atom HEAD
片段包
Sublime Text HTML Head 片段 – Sublime Text HEAD
片段包
head-it – HEAD
片段的 CLI 接口
vue-head – 在 Vue.js 中操作 HEAD
標(biāo)簽的 meta 信息
