# [HTML] head 常用語法 ###### tags: `HTML` ```htmlembedded= <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta http-equiv="Pragma" content="no-cache"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no"> <meta name="description" content="簡述網站內容"> <meta name="keywords" content="關鍵字1, 關鍵字2, 關鍵字3"> <meta name="author" content="作者"> <title>網頁名稱</title> <link rel="shortcut icon" href="圖片路徑" type="image/x-icon"> <link rel="apple-touch-icon" href="圖片路徑" type="image/png" sizes="192x192"> <!-- Facebook Open Graph（開放社交關係圖） --> <meta property="og:url" content="網址" /> <meta property="og:type" content="內容的媒體類型" /> <meta property="og:title" content="標題" /> <meta property="og:description" content="內容的簡短說明" /> <meta property="og:image" content="分享至 Facebook 時顯示的圖像" /> <meta property="og:locale" content="資源的地區設定" /> <meta property="og:site_name" content="公司名稱、網站名稱"/> <link rel="stylesheet" href="CSS檔案路徑"> <script type="text/javascript" src="JS檔案路徑"></script> </head> ``` ## meta * `charset` * HTML 的編碼 * [可用的編碼清單](http://www.iana.org/assignments/character-sets/character-sets.xhtml "Character Sets") * `http-equiv="X-UA-Compatible"` * 設定 IE 相容性檢視模式。有些人建議放在head內第一行，避免失效 * content="IE=Edge"：什麼版本的 IE 就用什麼版本的標準模式 * `http-equiv="Pragma"` * content="no-cache"：禁止瀏覽器使用快取，使用者無法離線瀏覽網頁 * `name="viewport"` * 行動裝置瀏覽網頁的基本設定，**RWD網頁一定要寫！** * width=device-width：瀏覽器顯示寬度＝裝置的寬度 * 手機、平板的解析度與裝置寬度不同，若沒寫的話，寬度會是裝置的解析度，在裝置上瀏覽網頁時會有明顯的差異 * initial-scale：初始縮放比 * minimum-scale：最小縮放比 * maximum-scale：最大縮放比 * user-scalable：使用者是否可以縮放畫面 * height：畫面高度 * `name="description"` * 簡述網頁內容，會出現在搜尋頁面的網站標題下方，依據使用的裝置，能完整顯示的字數不同，故建議精簡內容，不要太長。 * `name="keywords"` * 網頁關鍵字 * `name="author"` * 作者 ## title 網頁名稱 ## link * `rel="shortcut icon"` 網址列favicon圖片 * 檔案格式：.ico（較常使用）、.png、.gif（只有 Firefox 支援） * 尺寸（單位px）：16×16、32×32、48×48 * 若不打算支援IE瀏覽器，可以不加"shortcut" * `rel="apple-touch-icon"` 行動裝置桌面圖示 * 以前ios系統會再對圖片加上效果，若不希望添加，會改成"apple-touch-icon-precomposed"，現在已不用。[Safari Web Content Guide ](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html "Configuring Web Applications") * 針對不同裝置有不同的建議尺寸，若系統未找到建議尺寸的圖檔，會用尺寸比較大的圖檔。[若不想寫那麼多不同尺寸，那就放最大尺寸的圖檔](http://www.shamitsu.com/2017/04/faviconapple-touch-icon.html "[網頁，前端]網頁圖示favicon、觸摸圖示apple-touch-icon到底該怎麼寫") ## Facebook Open Graph（開放社交關係圖） :::info 若要查看標記在 Facebook 網路爬蟲的顯示狀況，可以到[分享偵錯工具](https://developers.facebook.com/tools/debug/ "分享偵錯工具")中輸入網址 ::: * `property="og:url"` * 網址，不包含工作階段變數、用戶識別參數或計數器 * `property="og:type"` * 內容的媒體類型，預設為 website，[物件類型參考資料](https://ogp.me/#types "The Open Graph protocol - Object Types") * `property="og:title"` * 標題，不包含網站名稱等任何品牌內容 * `property="og:description"` * 內容的簡短說明，通常為 2 到 4 個句子 * `property="og:image"` 用戶將內容分享至 Facebook 時顯示的圖像網址 * 至少使用寬度為 600 像素的圖像 * 高解析度裝置使用至少 1080 像素的寬度以獲得最佳顯示 * `property="og:locale"` * 資源的地區設定，預設為 en_US，臺灣是zh_TW，[其他支援的地區設定](https://developers.facebook.com/docs/internationalization#locales "Facebook 支援的地區設定及語言") * `property="og:site_name"` --- :::info 建立日期：2020-11-19 更新日期：2020-11-25 :::