酷播亮新聞
每一個標準的 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 實際上是一個圖片容器，裡面至少應該包含 16×16，32×32，48×48 三個尺寸的 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/
