---
# System prepended metadata

title: '[HTML] head 常用語法'
tags: [HTML]

---

# [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
:::