HTML 元資訊 meta：編碼、描述、viewport 與 Open Graph
元資訊主要是給瀏覽器和搜尋引擎看的，通常用於頁面描述、關鍵字、資源的引入...等，不會顯示在頁面上。所有的 <meta> 都寫在 檔頭 head 裡，常見的有編碼宣告、描述、行動裝置的 viewport，以及社群分享用的 Open Graph。
編碼
utf-8 為萬國碼，可以在網頁中處理任何語言。
<meta charset="UTF-8">小提醒
請把它放在 head 的第一行。瀏覽器要先知道編碼才能正確解讀後面的內容，宣告來得太晚，中文就可能變成亂碼。
關鍵字
該網頁的關鍵字。以結論來說：現在已經沒有用處了。主要是有心人士填入了大量不相關的關鍵字，藉此獲得不屬於他的流量。因此 Google 在 2009 年 9 月時正式公開宣布，未來不會再參考 meta keyword 裡的內容。
<meta
name="keywords"
content="yahoo, yahoo奇摩, yahoo奇摩首頁, yahoo首頁, yahoo搜尋, yahoo 信箱, yahoo 即時通訊, 新聞, 股市, 運動, 娛樂, 拍賣, 購物中心, 超級商城"
>描述
描述用於搜尋引擎結果頁面，使用者與該網頁的第一次接觸。
<meta
name="description"
content="Yahoo奇摩提供即時新聞、氣象、購物、信箱、搜尋、政治、國際、運動、股市、娛樂、科技、電影、汽機車、旅遊、遊戲。每天賺奇摩值、發掘更多精彩內容、一站取得豐富生活！"
>描述本身不是排名因素，但它會出現在搜尋結果的摘要，直接影響使用者要不要點進來。建議每頁都寫一段能回應搜尋意圖的文字，長度中文約 70 到 80 字，並與 網頁標題 互相呼應而不是重複。
搜尋引擎有時會改用頁面內文當摘要，判斷的邏輯與應對方式見 meta description 怎麼寫。
行動裝置的網頁螢幕資訊
當使用行動裝置瀏覽網頁時，指定瀏覽器如何渲染和縮放網頁畫面的寬、高。如果沒有設定的話，就會以桌機的螢幕寬度來渲染頁面，這時畫面看起來就會擠在一起或內容變很小不好閱讀。
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width：自動符合所有不同手機螢幕他們自己的預設最佳解析度。initial-scale=1.0：設定畫面的初始縮放比例。minimum-scale=1.0：設定畫面的最小縮放比例。maximum-scale=1.0：設定畫面的最大縮放比例。user-scalable=no：設定是否允許使用者改變縮放比例。
小提醒
maximum-scale 與 user-scalable=no 會讓使用者無法放大頁面，對視力不便的使用者相當不友善，除非有特殊需求，否則請不要關閉縮放。
搜尋引擎索引
robots 用來告訴搜尋引擎這一頁要不要收錄、連結要不要追蹤：
<!-- 不要收錄這一頁，但仍可追蹤頁面上的連結 -->
<meta name="robots" content="noindex, follow">| 值 | 說明 |
|---|---|
index / noindex | 是否收錄到搜尋結果 |
follow / nofollow | 是否追蹤頁面上的連結 |
沒有特別設定時，預設就是 index, follow，一般頁面不需要寫。測試站、後台或感謝頁才需要加上 noindex。
瀏覽器主題色
指定行動瀏覽器網址列的配色：
<meta name="theme-color" content="#0065A9">重新導向
refresh 可以用來設定幾秒鐘後跳轉到某一個 Domain。
<meta http-equiv="refresh" content="3; url=https://docs.incode.tw">小提醒
這種轉址會打斷瀏覽器的上一頁行為，對螢幕閱讀器的使用者也不友善，搜尋引擎同樣不建議。正式的轉址請交給伺服器端的 301 或 302。
開放社交關係圖（Open Graph）
一般簡稱為 OG，它是 Facebook 在 2010 年所推出、利用 Meta Tag 來完成的一項技術，是專為社群平台分享而生的標籤，而其目是希望能讓使用者在社群分享網站時，能讓資訊呈現得更加豐富且美觀。
<meta property="og:url" content="http://tw.yahoo.com">
<meta property="og:type" content="website">
<meta property="og:title" content="Yahoo奇摩">
<meta
property="og:description"
content="Yahoo奇摩提供即時新聞、氣象、購物、信箱、搜尋、政治、國際、運動、股市、娛樂、科技、電影、汽機車、旅遊、遊戲。每天賺奇摩值、發掘更多精彩內容、一站取得豐富生活！"
>
<meta
property="og:image"
content="https://s.yimg.com/cv/apiv2/social/images/yahoo_default_logo.png"
>| 標籤 | 說明 |
|---|---|
og:title | 分享卡片的標題 |
og:description | 分享卡片的描述 |
og:image | 預覽圖，建議 1200×630 |
og:url | 這一頁的正式網址 |
og:type | 內容類型，網站用 website、文章用 article |
小提醒
OG 標籤用的是 property 而不是 name，別寫錯了。另外社群平台會快取抓取結果，改完之後要到各平台的偵錯工具重新抓取才會更新。
og:image 必須是絕對網址（相對路徑會直接抓不到圖），完整的屬性表與各平台的偵錯工具見 Open Graph 標籤怎麼設。
Twitter Card
X（原 Twitter）另有一套自己的標籤，未設定時會退回讀取 OG：
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Yahoo奇摩">
<meta name="twitter:image" content="https://example.com/og.png">以上這些標籤按用途分成三類的完整清單，以及一份可直接複製的檔頭範本，見 SEO 要放哪些 meta 標籤。
常見問題
meta keywords 現在還有用嗎？
對 Google 排名沒有作用。它在早期被大量濫填不相關的關鍵字，Google 已在 2009 年公開表示不再參考。要寫也無妨，但別期待它帶來流量，把力氣放在 標題 與描述更實際。
meta description 會影響排名嗎？
它不是排名因素，但會影響點閱率。搜尋結果會顯示這段摘要，寫得具體、能回應搜尋意圖的描述，使用者更願意點進來。若沒寫，搜尋引擎會自行從頁面內容擷取。
viewport 沒設定會怎樣？
手機會以桌機的寬度來渲染頁面，再整頁縮小顯示，文字會小到看不清楚。這也會影響行動裝置友善度的評分，是每一頁都該加上的設定。
Open Graph 沒設定，分享出去會怎樣？
社群平台會自行從頁面猜測標題、描述與圖片，結果通常不理想，可能抓到不相干的小圖或空白。建議至少補上標題、描述與一張 1200×630 的圖片。
可以用 meta refresh 做網頁轉址嗎？
能做但不建議。它會打斷瀏覽器的上一頁行為，對使用螢幕閱讀器的人也不友善，搜尋引擎同樣不喜歡。正式的轉址請用伺服器端的 301 或 302。
