HTML 的 meta tag （中繼標籤）是網站 SEO （搜尋引擎優化）的重要一環，設置得宜的話有助網頁的排名及點擊率提升，讓大家的優質內容更容易呈現於搜尋者眼前。除了 <title> 和 meta description 之外，還有很多值得大家留意。
meta tag 是甚麼?
metadata 中文可譯作「元數據」，意思是「描述其他數據的數據（data about data）」。故此 HTML 中的 meta 標籤，就是描述網頁檔案的數據。
描述網頁檔案的數據不會直接於網頁中呈現，但有助搜尋引擎了解網頁的內容。因此，在 SEO 的角度中，良好的 meta 標籤設定是十分重要的。該些 meta 標籤在 HTML 的 <head>部分出現，其中包括：
1. <title>
<title> 是一個網頁的標題，會在瀏覽器的分頁以及搜尋結果顯示。這是一個重要的標籤，讓搜尋引擎和用戶了解網頁的內容。<title> 內包含關鍵字對 SEO 有一定的幫助；而如果 <title> 的構思能夠別出心裁，亦有助勾起用戶興趣，提高點閱率。因此，一個良好的 <title> 絕對是非常重要。
在 Google 搜尋結果（SERP）中，<title> 可顯示的字數有限，最高只能展示 600 px，即約 30 中文字或 60 英文字左右。然而，大家亦不必局限 <title> 不要超過特定數目，反而將重要的字眼而置於開首來吸引關注才是重點。
近年，Google 的標題連結不一定再利用 <title> 元素的內容，亦會參考網頁上的主要文字、h1 標籤、錨點文字等來生成，但總括而言，<title> 元素的內容仍是協助使用者掌握網頁內容的重要部份。
Google 大幅修改搜尋結果標題，SEO 要注意的 5 個事項
HTML 例子
<title>よしのん的網站教室 | 集合科技新聞、網站制作、SEO、社交媒體經營的文章</title>
2. description
meta description 是對網頁的簡短形容，會在搜尋結果中顯示。與 <title> 不同，description 雖然都有字數限制，但彈性就大得多，會視乎關鍵字而改變長度。
如 description 的字眼與搜尋字眼吻合，就會以另一種顏色突顯。因此，description 的內容亦值得花時間研究以提高點擊率。
要注意的是，Google 並不會因為 description 的內容而提高排名。第二，搜尋引擎並不一定會使用 description 的字眼作為搜尋結果的摘要。在適合的情況下，搜尋引擎會因應搜尋字眼而在網頁擷取相關文字來展示。
最後，description 並非強制的選項。在某些時候，由搜尋引擎自行從網頁擷取交字的較果會更好。例如一些網頁的內容並非集中於兩三個關鍵字，而是以長尾關鍵字為目標時，由搜尋引擎自行產生網頁形容可近貼近搜尋者的需要。
HTML 例子
<meta name="description" content="不少人都會在網誌（blog）上加入 AdSense 廣告以賺取額外收入，但到底 AdSense 收入可以達到甚麼水平？這筆收入是不是十分可觀？其實對一般網誌而言，AdSense 的收入只是聊勝於無，如要依賴 AdSense 收入過日子，網站必須極具規模。" />
SEO 常識被推翻？ Meta description 不一定要加？
由於 Google 多數會自動從擷取網頁的文字產生摘要，因此有時候可能會出現意想不到的情況，例如使用在頁腳、導覽列等不相關的文字。這時候便可以在相關的 <div>、<span>和<section>標籤中使用 data-nosnippet 屬性。
3. canonical
基於多種原因，例如使用各種追蹤參數，或者傳送參數至網站後端處理時，一個網頁可能會多種網址。例如在 example.com，網址亦可以是：
- www.example.com（多了 www 子域名）
- example.com/index.html（多了 index.html）
- example.com/?param=a（多了參數）
在搜尋引擎的角度，這樣會構成內容重複的問題。
為了避免內容重複導致搜尋引擎懲罰，每個網頁都應加入 canonical 網址，讓搜尋引擎識別不同網址但網頁內容相同的唯一「標準」網址。
這樣，即使搜尋引擎檢索了 example.com/index.html 和 example.com/?param=a，它亦能透過 canonical 已宣告的網址，而知道所有的網址均是代表 example.com。這樣搜尋引擎就不會誤當重複內容，亦不會選擇 example.com 以外的網址來呈現於搜尋結果之中。
HTML 例子
<link rel="canonical" href="https://ysnweb.net/2019/12/web-monetisation/google-adsense-how-much-income/" />
4. robots
robots 可以控制搜尋引擎如何檢索我們的網頁。
大家最熟悉的參數莫過於 index/ noindex 和 follow/ nofollow。搜尋引擎會透過爬蟲程式（crawler/ spider）讀取網頁資訊，然後為網頁索引。一般而言，如果網頁沒有設定 robots 的話，就會接受所有搜尋引擎索引，在搜尋結果出現。除非網頁不宜在搜尋引擎中展示，否則毋須使用 robot 標籤。然而，Google 已表明 robots 只供參考，並不一定跟從，即使網頁已加入以上標籤，仍有機會在搜尋結果中呈現。
HTML 例子
<meta name="robots" content="noindex,nofollow">
但除此之外，有其餘三個參數亦值得大家注意，分別是 max-snippet:、max-image-preview: 和 max-video-preview: 。
max-snippet: 可控制搜尋結果所能顯示的文字摘要之字元數目，其中 -1 表示由搜尋引擎自動決定。max-image-preview: 可設定網頁在搜尋結果中的圖片預覽大小上限，可選擇 none、standard 和 large 三個值。max-video-preview: 可設定搜尋結果為網頁上的影片顯示最多甚麼秒數的影片摘要，-1 表示沒有限制。
HTML 例子
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
5. viewport
搜尋引擎偏好支援流動裝置的網頁，其中又以回應式網頁設計（Responsive Web Design）最為可取。如要網頁在各裝置中正確呈現，就必須有正確的 viewport 設定。
HTML 例子
<meta name="viewport" content="width=device-width, initial-scale=1">
6. charset
charset 指定瀏覽器展示網頁時的採用的字元編碼，雖然與 SEO 無關，但亦是必要的標籤。現時，大部分的網頁都採用 UTF-8，但某些時候會採用其他編碼，如 GBK 等。
HTML 例子
<meta charset="UTF-8">
7. hreflang
如果網頁設有多種語言，就需要 hreflang 來提示搜尋引擎展示正確的網頁給不同地區的訪客。
HTML 例子
<link rel="alternate" href="http://example.com" hreflang="en-us" />
8. og
og （Open Graph）並非用於 SEO 中，但對網頁於 Facebook、LINE 等社交媒體正確地呈現有莫大幫助，其中 og:title、og:description、og:image 至為重要，分別決定了網頁於社交媒體分享時顯示的標體、形容和縮圖。
HTML 例子 （Facebook、Plurk、LINE 等）
<meta property="og:type" content="article" /> <meta property="og:title" content="Google AdSense 可以帶來多少「被動收入」？（附記錄）" /> <meta property="og:description" content="不少人都會在網誌（blog）上加入 AdSense 廣告以賺取額外收入，但到底 AdSense 收入可以達到甚麼水平？這筆收入是不是十分可觀？其實對一般網誌而言，AdSense 的收入只是聊勝於無，如要依賴 AdSense 收入過日子，網站必須極具規模。" /> <meta property="og:url" content="https://ysnweb.net/2019/12/web-monetisation/google-adsense-how-much-income/" /> <meta property="og:site_name" content="よしのん的網站教室" /> <meta property="og:image" content="https://i0.wp.com/backend-wp.ysnweb.net/wp-content/uploads/2019/09/adsense.jpeg?fit=900%2C450&ssl=1" />
HTML 例子 (X / Twitter)
X 一度在 2023 年 10 月作出變動，分享連結時只會顯示縮圖和網站域名，而不會顯示標題，但 2024 年亦重新把網頁標題加入。因此，大家需密切留意 X 的更新。
<meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="Google AdSense 可以帶來多少「被動收入」？（附記錄）" /> <meta name="twitter:description" content="不少人都會在網誌（blog）上加入 AdSense 廣告以賺取額外收入，但到底 AdSense 收入可以達到甚麼水平？這筆收入是不是十分可觀？其實對一般網誌而言，AdSense 的收入只是聊勝於無，如要依賴 AdSense 收入過日子，網站必須極具規模。" /> <meta name="twitter:image" content="https://i0.wp.com/backend-wp.ysnweb.net/wp-content/uploads/2019/09/adsense.jpeg?fit=900%2C450&ssl=1" />
雖然就算沒有 og:title 和 og:description，Facebook 等都會採用 title 和 description 的內容，但一般建議還是要加，以免發生意想不到的情況。
特別記念：keywords
這本來是讓搜尋引擎了解網頁關鍵字的標籤，但由於遭到濫用，Google 早在 2009 就不再理會。縱使大家仍然可以使用，但不會有實質幫助。事實上，細心留意位居前列的網頁背後的 HTML，亦可見已沒有 keywords。
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
