一份清單：全部能夠放進head標籤的元素

GitHub - joshbuchea/HEAD: 一份清單：全部能夠放進head標籤的元素

原文連接

譯文連接

 

HEAD

能夠在你文檔的head標籤中使用的全部內容的清單。

目錄

• Recommended Minimum

• Elements

• Meta

• Link

  • Favicons

• Social

  • Facebook Open Graph

  • Facebook Instant Articles

  • Twitter Cards

  • Google+ / Schema.org

  • OEmbed

• Browsers / Platforms

  • Apple iOS

  • Apple Safari

  • Google Android

  • Google Chrome

  • Microsoft Internet Explorer

• Browsers (Chinese)

  • 360 Browser

  • QQ Mobile Browser

  • UC Mobile Browser

• App Links

• Notes

  • Performance

• Other Resources

• Related Projects

• Other Formats

• Translations

• Contributing

• Contributors

• Author

• License

推薦的最基本的

下面是一個最簡單的網站須要的最基本的標籤。

<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">
<!-- 上面的三個標籤 *必須* 在head標籤的最前面；任何其餘的標籤必須在這三個標籤的 *後面* -->
<title>Page Title</title>

Elements

<!-- 文檔標題  -->
<title>Page Title</title>

<!-- 在文檔中包含的全部相對 URL 的 Base URL -->
<base href="https://example.com/page.html">

<!-- 外部樣式表 -->
<link rel="stylesheet" href="styles.css">

<!-- 內部樣式表 -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<!-- JavaScript -->
<script src="script.js"></script>
<noscript><!--腳本未被執行時的替代內容--></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">
<!-- 上面的三個標籤 *必須* 在head標籤的最前面；任何其餘的標籤必須在這三個標籤的 *後面* -->

<!-- 容許控制資源從何處加載 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- 儘量早的在文檔中放置 -->
<!-- 僅適用於此標籤後的內容 -->

<!-- Web應用程序名稱（僅當網站做爲應用程序時使用） -->
<meta name="application-name" content="Application Name">

<!-- 頁面的簡短描述（限制爲150個字符） -->
<!-- 在 *部分* 狀況下，這個描述被用做搜索結果中顯示的片斷的一部分。 -->
<meta name="description" content="A description of the page">

<!-- 控制搜索引擎的抓取和索引行爲 -->
<meta name="robots" content="index,follow"><!-- All Search Engines --><!-- 全部的搜索引擎 -->
<meta name="googlebot" content="index,follow"><!-- Google Specific --><!-- 針對 Google -->

<!-- 告訴 Google 不顯示 [sitelinks](!https://en.wikipedia.org/wiki/Sitelink) 搜索框 -->
<meta name="google" content="nositelinkssearchbox">

<!-- 告訴谷歌不要爲這個頁面提供翻譯 -->
<meta name="google" content="notranslate">

<!-- Google [Search Console](!https://developers.google.cn/webmaster-tools/) 身份驗證 -->
<meta name="google-site-verification" content="verification_token">

<!-- [Yandex Webmasters](!https://webmaster.yandex.com/) 身份驗證 -->
<meta name="yandex-verification" content="verification_token">

<!-- [Bing Webmaster Center](!https://www.bing.com/toolbox/webmaster/) 身份驗證 -->
<meta name="msvalidate.01" content="verification_token">

<!-- [Alexa Console](!http://www.alexa.com/) 身份驗證 -->
<meta name="alexaVerifyID" content="verification_token">

<!-- [Pinterest Console](!https://developers.pinterest.com) 身份驗證 -->
<meta name="p:domain_verify" content="code from pinterest">

<!-- [Norton Safe Web](!https://safeweb.norton.com/help/site_owners) 身份驗證 -->
<meta name="norton-safeweb-site-verification" content="norton code">

<!-- 用於命名構建網站的軟件 (i.e. - WordPress, Dreamweaver) -->
<meta name="generator" content="program">

<!-- 網站主題的簡短描述 -->
<meta name="subject" content="your website's subject">

<!-- 基於網站內容給出通常[年齡分級](!https://en.wikipedia.org/wiki/International_Age_Rating_Coalition) -->
<meta name="rating" content="General">

<!-- 容許控制 referrer 信息如何傳遞 -->
<meta name="referrer" content="no-referrer">

<!-- 禁用自動檢測和格式化可能的電話號碼 -->
<meta name="format-detection" content="telephone=no">

<!-- 經過設置爲"off"徹底關閉[ DNS 預讀取](!https://developer.mozilla.org/zh-CN/docs/Controlling_DNS_prefetching) -->
<meta http-equiv="x-dns-prefetch-control" content="off">

<!-- 在客戶端瀏覽器上存儲cookie以進行用戶識別 -->
<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">
<!-- 國家代碼（ISO 3166-1）：強制性，州代碼（ISO 3166-2）：可選；eg. content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- eg. content="New York City" -->

• Google能夠識別的meta標籤

• Meta擴展-WHATWG Wiki

• ICBM-維基百科

• 地理標籤-維基百科

Link

<!-- 指向一個CSS樣式表 -->
<link rel="stylesheet" href="https://example.com/styles.css">

<!-- 幫助解決內容重複收錄 [Canonical link element](!https://en.wikipedia.org/wiki/Canonical_link_element) -->
<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](!https://www.ampproject.org/) 版本 -->
<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="copyright" href="copyright.html">

<!-- 給出文檔的另外一種語言的替代版本  [a-simple-guide-to-using-rel-alternate-hreflang-x](!https://searchenginewatch.com/sew/how-to/2232347/a-simple-guide-to-using-rel-alternate-hreflang-x) -->
<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">

<!-- 使用第三方服務維護博客時使用 -->
<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/ -->

Favicons

<!-- IE 10 及如下版本 -->
<!-- 將 favicon.ico 放在網站根目錄中 - 不須要 link 標籤 -->

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

• 關於 Favicons (和 Touch Icons)

• Favicon 對照表

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: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 Markup

• Open Graph protocol

Facebook Instant Articles

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- 你的文章的 Web 版本的 URL -->
<link rel="canonical" href="http://example.com/article.html">

<!-- 本文使用的樣式 -->
<meta property="fb:article_style" content="myarticlestyle">

• Facebook Instant Articles: Creating Articles

• Instant Articles: Format Reference

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 Cards: Getting Started Guide

• Twitter Card Validator

Google+ / Schema.org

<link href="https://plus.google.com/+YourPage" rel="publisher">
<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">

Pinterest

Pinterest 讓你阻止用戶從你的網站上保存東西，查看 help center。 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&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&format=xml"
  title="oEmbed Profile: XML">

• oEmbed format

Browsers瀏覽器 / Platforms平臺

Apple iOS

<!-- Smart App Banner 智能 App 廣告條 -->
<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">

<!-- Add to Home Screen 添加到主屏幕 -->
<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="App Title">

<!-- Touch Icons -->
<!-- 在大多數狀況下，在head中一個180×180px的圖標就足夠了。 -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- 注意: iOS 7 的 Safari 不爲圖標添加效果。 -->
<!-- 舊版本 Safari 不會爲後綴名爲 -precomposed.png 的 icon 文件添加效果 -->

<!-- 啓動畫面 ( 棄用 ) -->
<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 Tags

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

<!-- Android 應用深度連接 -->
<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">

<!-- 禁用翻譯提示 -->
<meta name="google" value="notranslate">

Google Chrome Mobile (只針對 Android)

從 Chrome 31 開始, 你能夠像 Safari 同樣設置你的 Web 應用爲「app mode」 。

<!-- 連接到一個 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 Developer

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

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 Fallback  Web替代顯示資源文件 -->
<meta property="al:web:url" content="http://applinks.org/documentation">
<!-- 更多信息: http://applinks.org/documentation/ -->

• App Links Docs

Browsers (Chinese)

360 瀏覽器

<!-- [按指定順序選擇渲染引擎](!http://se.360.cn/v6/help/meta.html) -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

QQ 手機瀏覽器

<!-- 將屏幕鎖定爲指定方向 豎屏/橫屏 -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- 設置頁面全屏顯示 -->
<meta name="x5-fullscreen" content="true">
<!-- 開啓網頁應用模式 (全屏,etc.) -->
<meta name="x5-page-mode" content="app">

• QQ手機瀏覽器

UC 手機瀏覽器

<!-- 強制頁面橫屏/豎屏顯示 -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- 設置頁面全屏顯示 -->
<meta name="full-screen" content="yes">
<!-- 即便是無圖模式UC瀏覽器仍會顯示圖片 -->
<meta name="imagemode" content="force">
<!-- 調用應用模式(全屏,禁止手勢, etc.) -->
<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瀏覽器文檔
• 最新版UC瀏覽器文檔

註釋

性能

Moving the href attribute to the beginning of an element improves compression when GZIP is enabled, because the href attribute is used in a, base and link tags. 當啓用 GZIP 時，將 href 屬性移動到元素的開始能夠提升壓縮，由於 href 屬性 在 a, base and link 標籤中使用。

例子:

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

其它資源

• HTML5 Boilerplate Docs: The HTML

• HTML5 Boilerplate Docs: Extend and customize

相關項目

• Atom HTML Head Snippets - Atom package for HEAD snippets

• Sublime Text HTML Head Snippets - Sublime Text package for HEAD snippets

• head-it - CLI interface for HEAD snippets

• vue-head - Manipulating the meta information of the HEAD tag for Vue.js

版權聲明

本譯文僅用於學習、研究和交流目的，歡迎非商業轉載。轉載請註明出處、譯者和衆成翻譯的完整連接。要獲取包含以上信息的本文Markdown源文本，請 點擊這裏。