HTML 文檔之 Head 最佳實踐
每一個標準的 HTML 文檔都包含一個 頭部分，除了聲明文檔類型，編碼方式和文檔標題，引入外部資源這些基本功能外， 頭還能做很多非常有用的事情，這篇文章整理了作者認可的一些最佳實踐，寫在這裡與各位分享。
語言
在 標籤中通過 屬性進行明確的語言聲明，將會有助於翻譯，英文、簡體中文和繁體中文網頁所屬性值如下：
編碼
請在 中第一行統一使用 編碼聲明。
Base 元素
盡量不使用 元素，絕對地址和 URL 對於開發者和用戶來說都更好。
Viewport
設置 的寬度為設備寬度，默認縮放比為 1（允許用戶縮放），設置 以兼容 iPhone X 全面屏「劉海」的顯示。
DNS 預讀取
預載入
指示瀏覽器預先請求當前頁面所需要的關鍵性資源。
預請求
指示瀏覽器預先請求用戶即將瀏覽頁面所需要的關鍵性資源。
渲染偏好
對於國內各種雙核瀏覽器，通過設置 頭要求它們使用 webkit 內核；對於 IE 瀏覽器，通過設置 要求它使用最新的版本；對於百度搜索強制轉碼的流氓做法，通過 禁止其自動轉碼；指示瀏覽器對類似電話、郵箱或地址的內容不要自作聰明的瞎識別（移動端）。
文檔信息
HTML 文檔的一些元數據，包括：作者、描述、關鍵詞和生成工具；設置 為 指示搜索引擎爬蟲該頁面需要進入索引，並且頁面內的所有鏈接都要繼續跟蹤；設置 為 指示瀏覽器在進行跨域跳轉時，其 值將統一為域名，而非具體的 URL 地址。
Icons
雖說所有瀏覽器都還支持過時的 favicon.ico 格式，但在 HTML5 時代，我們應該使用更好的 PNG icon with sizes 方案。同時為了兼容老舊瀏覽器，我們可以將生成好的 favicon.ico 文件放在網站的根目錄下面，通常瀏覽器會自動請求並載入它，並不需要額外通過 link 標籤引入。
微軟為了讓 Metro UI 更好看，引入了 文件，主要用於定製網站固定磁鐵的圖標和背景顏色，其格式如下所示：
favicon.ico 實際上是一個圖片容器，裡面至少應該包含 16x16，32x32，48x48 三個尺寸的 png 圖片，我們可以使用 ImageMagick 工具在本地直接生成（生成之前需要對 png 圖片進行壓縮以減小尺寸）。
注意：apple-mobile-web-app-status-bar-style 值默認狀態欄為白色，可設置為 black（黑色） 或者 black-translucent（灰色半透明）；mask-icon 引入的 svg 文件必須只有一個圖層，並且 屬性應該為 「0 0 16 16」。
Twitter 卡片用於將網站內容以更加優雅漂亮的方式分享到 twitter.com 網站，從形式上說，分為：summary, summarylargeimage, app, player 四種形式，通常我們的站點只需要 summary 這種形式。
配置上線後，你可以通過這個 Card validator 工具檢查是否正確顯示。
Facebook Open Graph
Open Graph 是一套開放的網頁標註協議，通過 meta 標籤標註網頁的類型，主要由 Facebook 推動，已經成為社交分享領域的事實標準。如果你希望明確告訴社交網路或搜索引擎你的網頁類型，你應該添加這些 meta 標籤。
固定鏈接
對於一份文檔存在多個 URL 的情況，通過 指定唯一的固定鏈接。
對於支持 RSS 訂閱的頁面，可針對 RSS 閱讀器提供可訂閱的源文件。
Polyfill
可以專門為老舊的 IE 瀏覽器引入 Polyfill 方案，舉個例子，為了讓 IE6-IE8 瀏覽器能夠使用 HTML5 標籤和 Media Query 特性，我們需要引入 html5shiv 和 response.js 這兩個庫。
其他的 Polyfill 方案寫法類似。
列印樣式表
對於可列印的頁面（如文章頁面），可提供針對印表機的樣式表，使得網站用戶可以將文章列印下來閱讀。
交替樣式表
定義交替樣式表的時候，指定其 屬性，以方便用戶在瀏覽器中根據名稱選擇替代樣式，交替樣式表多用於多主題切換的站點。
原文：https://laozhu.me/post/html-head-best-practices/
TAG:JavaScript |