Meta

宣告設定

                    <!DOCTYPE html>
網頁最上面第一行的 版本宣告，此行表示這是 HTML5 的版本，關乎下面所撰寫的 HTML、CSS、JavaScript 語法驗證根據，其他版本詳見 W3Cschool 整理。

語言設定

                    <html lang="zh-Hant">
為網頁宣告語言，協助搜尋引擎的排行，英文是 en，繁體中文是 zh-Hant，其他語言設定詳見 ISO 639。

編碼設定
語言編碼，一般都使用 utf-8 萬國碼，有中文字的標籤要在它之下，才不會導致中文變亂碼，其他編碼設定詳見 Character Sets。

瀏覽器版本設定
什麼版本 IE 就用什麼版本的標準模式，詳見 MSDN 官網解說。

螢幕設定
viewport 目的是告訴瀏覽器目前裝置的寬度及縮放大小，以便做為一個基準
width=device-width 為寬度，device-width 為適應裝置寬度，也可自己設定寬度[數字]
initial-scale=1 為 100% 顯示網站，不做放大縮小動作，設定範圍：0.25 ~ 5
user-scalable=no，禁止用戶手動縮放網站，設定範圍：1(yes) / 0(no)
minimum-scale=1，設定網站最小的縮放大小，設定範圍：0.25 ~ 5
maximum-scale=1，設定網站最大的縮放大小，設定範圍：0.25 ~ 5
詳見 CSS-TRICKS 整理

網頁基本設定

                    網頁標題
網頁標題在 Google 搜尋引擎中僅限 20 個字元左右，建議 25 字以內
搜尋此網站的關鍵文字（可用半型空格或逗點隔開)，建議 10 個以內
定義網站摘要，通常會出現在搜尋頁中的網站內容描述，建議 100 字以內

詳細設定

Facebook 分享設定
縮圖為「絕對路徑」。

一般分享縮圖
縮圖為「絕對路徑」，方形較佳，與 Facebook 一樣即可。

網頁圖標（favicon）設定
前面四個屬於給移動裝置用的 touch icons，依據不同裝置像是 iPad、iPhone、有無 Retina...的尺寸抓取不同大小的 icon，另外 rel="apple-touch-icon" 在裝置上顯示的樣子會有預設的反射光，如果不需要反射光，可以改成 apple-touch-icon-precomposed 就可以將其反射光隱藏！
中間兩個就是一般桌機上用的 favorite icons，區分為給 IE 的 ICO 和其他平台用的 PNG。
msapplication 屬於 windows8 專用的 tile icons，背景色可依據 icon 顏色調整。
最後一個是給 Opera Coast Browser (iPad) 使用的 favicon。
參考 w3cplus、970px、iconhandbook

詮釋資料基準範例包含詮釋資料應用於 HTML Meta Tag 的應用說明

設定網頁到期日
指定網頁暫存期間，過期後須到伺服器重新讀取，而不使用快取網頁，須使用 GMT 時間格式，如設 content=-1，表永遠會讀取最新資料。

禁止瀏覽器從本地機暫存中調閱頁面內容
no_cache 表示不保存記憶，每次訪問都刷新頁面，訪問者無法離線瀏覽。

開啟頁面視窗設定
可防止別人在框架裡直接嵌入你的網頁，Content 選項：_blank、_top、_self、_parent。
DEMO MEMO