在進行SEO的優化時，很容易就會接觸到Meta Tag。如果我們要對頁面進行優化，精通Meta Tag的知識是缺一不可的。
Raymond C (SEO Specialist) 在本文解釋Meta Tag方面的理論和9種常見的Meta tag，並教各位基本的技術SEO優化步驟。
Meta Tag是什麼？
Meta Tag是指包含在網頁HTML代碼中的元數據（Meta Data）。它們用於提供有關網頁內容的描述性信息，例如：標題、描述和關鍵字。這些資訊有助於搜尋引擎了解網頁的內容，從而更多有效率地進行索引和排名。
Meta Tags 9種常見類別
在Meta Tag的類別，有好幾種不同類型的Meta Tags，最常見的包括：標題（Title）、內容描述（Meta Description）、關鍵字（Meta Keywords）等。
| Meta Tag 類型 | 用途 | 範例 |
| Title | 定義網頁標題，顯示在瀏覽器標題欄和搜尋結果中 | <title>網頁的標題在這裡</title> |
| Meta Description | 提供網頁內容簡介，通常顯示在搜尋結果中 | <meta name=”description” content=”內容簡介在這裡”/> |
| Meta Keywords | 定義網頁關鍵字（已不被Google等主要搜尋引擎考慮） | <meta name=”Keywords” content=”關鍵字1, 關鍵字2″/> |
| Meta Robots | 控制搜尋引擎對網頁的爬取和索引行為 | <meta name=”robots” content=”index, follow”> |
| Meta Canonical | 指定內容重複頁面的主要版本 | <link rel=”canonical” href=”https://www.example.com/original-page”> |
| Meta Viewport | 控制網頁在移動設備上的顯示方式 | <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> |
| Meta Charset | 指定網頁的字符編碼 | <meta charset=”UTF-8″> |
| Meta Hreflang | 指定不同語言和區域版本的網頁 | <link rel=”alternate” hreflang=”zh-hant” href=”https://www.example.com/”> |
| Meta Alternate | 與Hreflang一起使用，指定不同語言版本間的關係 | <link rel=”alternate” hreflang=”en” href=”https://www.example.com/en/page”> |
這些Meta Tags在幫助搜尋引擎了解網頁內容方面都扮演著關鍵角色。在接下來的部分，Raymond將深入講解4個常用的Meta Tag，其作用及如何運用於優化網站。
<title>
【On-Page】<title>對應的是網站文章的主要標題，通常顯示在瀏覽器的標題欄中也是判斷網頁內容與搜尋的關鍵字相關性的重要標準之一。
通常，我們在Google搜尋時出現的搜尋結果的各種頁面標題，就是從<title>標籤提取而來的。文章的標題好壞不但會影響Google對網頁內容的評分（雖然佔比很少），但更會影響人們閱讀觀感，從而影響文章點閱率。
因此，在網站架設和頁面SEO的優化過程中，<title>是相當重要的HTML優化元素之一。
（注：Google並不一定會展示你所設定的<title>，有些情況下Google有算法會自行修改<title>標籤。）
<title>的標準範例：
[code]
<title>網頁的標題在這裡</title>
[/code]
<meta description >
【On-Page】<meta description>對應的是網站文章的內容簡介。
通常，我們在Google搜尋時出現的搜尋結果的各種網頁連結會出現一些內容簡介，就是從<meta description>標籤提取而來的。雖然內容簡介並不納入Google對網頁SEO的評分，但由於會影響人們的好奇心和閱讀欲，因此有機會影響文章點閱率。
（注：Google有60%的機率以算法自行修改展示的內容簡介，有時會抽網頁其他內容取代<meta description>。）
<meta description>的標準範例：
[code]
<meta name=”description” content=”內容簡介在這裡”/>
[/code]
<Meta Keywords>
【On-Page】<Meta Keywords>在曾經的SEO界來說非常重要，但由於過去有心人濫用並造成關鍵字堆砌等情況。現在已經不再被主要搜尋引擎考慮，Google也於2009年公開聲明棄用<Meta Keywords>標籤。
<Meta Keywords>的標準範例：
[code]
<meta name=”Keywords” content=”關鍵字1, 關鍵字2″/>
[/code]
<Meta Robots >
【技術性】Robots Meta Tag作用用於告訴搜尋引擎網頁的爬取和索引行為。它可以控制搜尋引擎是否允許爬取網頁、是否索引頁面、是否追蹤連結等。
Meta Robots常見用法範例：
[code]
<meta name=”robots” content=”index, follow”>
[/code]
上述代碼表示搜尋引擎應該索引網頁並追蹤頁面上的連結。其他常見的值包括”noindex”（不要索引網頁）和”nofollow”（不要追蹤連結）。
<Meta Canonical>
【技術性】Canonical 用於解決內容重複的問題。當一個網站有多個相似的頁面時，可以使用canonical標籤指定主要的標準網址，以避免搜尋引擎將重複內容視為不同頁面。
Meta Canonical常見用法範例：
[code]
<link rel=”canonical” href=”https://www.example.com/original-page”>
[/code]
這個Canonical將告訴搜尋引擎，https://www.example.com/original-page 是這個內容的主要原始版本。
<Meta Viewport>
【技術性】Viewport作用主要用於控制網頁在移動設備上的顯示方式，特別是響應式設計網站。它確保網頁可以適應不同屏幕大小和方向。
Viewport常見用法範例：
[code]
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
[/code]
這個Meta Tag告訴瀏覽器使用設備的屏幕寬度，並將初始縮放級別設置為1.0。
<Meta Charset>
【技術性】Charset用用於指定網頁的字符編碼，以確保文本正確地顯示。它有助於防止亂碼問題。
Meta Charset常見用法範例：
[code]
<meta charset=”UTF-8″>
[/code]
這個Meta Tag告訴瀏覽器使用UTF-8字符編碼，這是一個廣泛支持的編碼格式。
<Meta Hreflang>
【技術性】Hreflang用於指定不同語言和區域版本的網頁。這有助於搜尋引擎確保在搜尋結果中顯示適當的版本，以滿足用戶的語言和地理位置需求。
Hreflang常見用法範例：
[code]
<link rel=”alternate” hreflang=”h-hant ” href=”https://www.example.com/”>
<link rel=”alternate” hreflang=”en” href=”https://www.example.com/en/ “>
[/code]
這個Meta Tag告訴搜尋引擎，這兩個鏈結分別是英語和繁體中文版本的同一個內容。
<Meta Alternate>
【技術性】Alternate Meta通常與Hreflang一起使用，用於指定不同語言和區域版本的網頁之間的關係；若網站有設定AMP的話，也有需要用上。
Alternate常見用法範例：
[code]
<link rel=”alternate” hreflang=”en” href=”https://www.example.com/en/page”>
<link rel=”alternate” hreflang=”es” href=”https://www.example.com/es/pagina”>
[/code]
這個Meta Tag確保搜尋引擎了解這兩個鏈結之間的語言版本關係，以便在搜尋結果中正確地顯示適當的版本。
這些Meta Tags在網站的SEO優化過程中扮演著關鍵的角色，它們可以幫助您更好地控制網站的表現、內容和可見性，以滿足不同的需求和搜尋引擎的要求。在設計和優化網站時，應該謹慎選擇和使用這些Meta Tags，以確保網站在搜尋引擎中的表現最佳。
