引言
SEO 相關的 <meta> 標籤
首先,我們來看看與 SEO 直接相關的 <meta> 標籤。這些標籤的內容不會顯示給一般訪客,但會被搜尋引擎用來理解您的網頁資訊、決定搜尋結果的呈現方式,以及判斷是否索引頁面。透過正確使用這些標籤,我們可以影響網頁在搜尋引擎中的摘要文字、索引行為,甚至網站在行動裝置上的瀏覽體驗。以下將介紹幾個最重要的 SEO 類 <meta> 標籤及其用途。
網頁描述(Meta Description)
<meta name="description" content="這是一段頁面的簡短描述,用於讓搜尋引擎瞭解頁面內容摘要。">
Meta Description 提供了對網頁內容的簡短描述。搜尋引擎常會在搜尋結果中使用這段描述作為頁面的摘要文字,幫助使用者預先了解點擊連結後會看到什麼。然而需要注意的是,meta description 雖然能影響使用者是否點擊(CTR),但它並非影響搜尋排名的直接因素。編寫時建議每個頁面都有獨一無二且吸引人的描述,長度約在 150–160 個字元以內,以避免在搜尋結果中被截斷。
索引規則(Meta Robots)
<!-- 讓所有搜尋引擎索引本頁(預設行為) -->
<meta name="robots" content="index, follow">
<!-- 阻止搜尋引擎索引本頁(不收錄也不追蹤連結) -->
<meta name="robots" content="noindex, nofollow">
透過 <meta name="robots">,我們可以控制搜尋引擎對該頁面的索引行為。預設情況下,搜尋引擎將頁面視為 index, follow(允許收錄並繼續追蹤頁面上的連結),因此通常不需要特別指定。但如果想要阻止某頁被收錄,可以使用 noindex;若不希望搜尋引擎追蹤該頁的連結,則使用 nofollow。以上兩個值常一起使用以完全排除某頁面(如上例第二行所示)。此外還有進階指令,例如 noarchive(不提供頁面快取)、nosnippet(不顯示摘要)等,可以更細緻地控制搜尋結果的呈現。值得一提的是,<meta name="robots"> 針對所有搜尋引擎生效,而例如 <meta name="googlebot"> 則可用於針對 Google 搜尋提供不同指令(一般情況下兩者內容相同即可)。
頁面視口(Meta Viewport)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
行動裝置的瀏覽器預設會將網頁視窗寬度設為一個固定值(例如 980px),以便呈現未對行動裝置優化的網站。<meta name="viewport"> 標籤允許開發者主動控制這個視口(viewport)設定。上述範例將視口寬度設為裝置螢幕寬度,初始縮放比例為 1.0,確保頁面在手機上按比例呈現而不被過度縮小。這對於響應式網頁設計至關重要——如果缺少此標籤,使用者在手機上看到的可能是一個縮到很小的整頁畫面,需要不斷放大才能閱讀,不但影響使用體驗,也可能導致網站在行動搜尋排名中處於劣勢。由於 Google 採用「行動優先」索引,沒有設定 viewport 的頁面往往會被視為未對手機友善,因此幾乎所有現代網站都會在 <head> 中包含適當的 viewport 設定。
關鍵字標籤(Meta Keywords)
<meta name="keywords" content="關鍵字1, 關鍵字2, 關鍵字3">
在 1990 年代末至 2000 年代初,許多網站會在頁面中加入 meta keywords 標籤,列出與該頁面相關的一系列關鍵字,希望搜尋引擎據此瞭解內容。然而隨著演算法的進步與為了防止濫用,Google 等主要搜尋引擎早已不再將 meta keywords 納入排名考量。也就是說,即使您填了一長串關鍵字,對 SEO 也沒有幫助。現代 SEO 的重點在於高品質內容、良好的使用者體驗和權威連結等因素,meta keywords 僅具歷史意義,可以選擇不使用或忽略。
透過以上這些 SEO 相關的 meta 標籤,您可以有效地向搜尋引擎傳達頁面資訊並改善呈現。但網頁的影響範圍不僅限於搜尋結果;當有人在社群媒體上分享您的網頁連結時,我們還需要另一套 meta 標籤來確保有吸引人的預覽。
社群媒體分享預覽 <meta> 標籤
接下來,我們將關注當網頁被分享到社群媒體時所涉及的 <meta> 標籤。比起前述的 SEO 標籤,這類標籤的目標受眾不是搜尋引擎,而是社群平台(如 Facebook、Twitter 等)的抓取機制。透過 Open Graph 協定和 Twitter Cards 提供的這些標籤,您可以掌控當他人分享您的網頁連結時所顯示的標題、描述以及縮圖等資訊。良好的分享預覽不僅讓內容看起來專業,也能大幅提高點擊率和分享意願。
未使用社群分享專用 meta 標籤時,連結預覽通常只有簡單的標題與網址,缺乏圖片和描述,整體較不吸引人。如上圖所示,當前方推文範例僅有文字連結而無任何縮圖或說明。這樣的分享內容往往難以引起讀者的興趣。
相反地,加入了適當的 Open Graph 與 Twitter Card 標籤後,社群平台上將呈現豐富的預覽內容,包括醒目的縮圖、標題和描述文字。如此完整的卡片式預覽大幅提升了內容的吸引力,使讀者更願意點擊與分享。事實上,只需在頁面的 <head> 中增加幾行標籤,就能讓分享預覽煥然一新。
Open Graph 標籤
Open Graph 協定由 Facebook 發起,定義了一系列 meta 標籤來描述網頁在社群平台上的預覽資訊。目前 Facebook、LinkedIn、LINE 等主流平台都會讀取 Open Graph 標籤。如果頁面沒有提供這些資訊,平台通常會自行抓取頁面內容的一部分作為預覽,但結果往往不理想。因此,我們建議手動提供以下主要的 Open Graph 標籤:
<meta property="og:title" content="文章或頁面的標題內容">
<meta property="og:description" content="這是社群分享時顯示的簡短說明。">
<meta property="og:image" content="https://example.com/path/to/preview.webp">
<meta property="og:url" content="https://example.com/page-url.html">
<meta property="og:type" content="article">
<meta property="og:site_name" content="網站名稱">
以上範例包含了常用的 Open Graph 標籤:
og:title:頁面的標題。
og:description:對頁面內容的描述,用於分享時的文字摘要。
og:image:頁面代表性圖片的網址(預覽縮圖)。建議使用絕對網址,並確保圖片尺寸足夠大(Facebook 建議至少 1200×630 像素)以獲得最佳呈現效果。
og:url:頁面的完整網址。通常應使用頁面的正規網址(canonical URL),避免包含無關參數,以確保分享時引用的是正確的連結。
og:type:內容類型,例如 article(文章)、website(網站首頁)等。適當設定類型有助於平台瞭解內容性質(大多數情況下文章頁面可用 article)。
og:site_name:網站名稱,用於在預覽卡片中顯示內容所屬的網站品牌(例如顯示為「來自 XXX 網站」)。
透過這些標籤,您可以精確地告訴社群平台該如何顯示您的內容。Open Graph 標籤通常足夠滿足大部分平台的需求;然而,對於 Twitter 這樣的平台,我們仍建議額外使用 Twitter Card 標籤,以充分利用其特定的卡片樣式與功能。
Twitter Card 標籤
Twitter(現稱為 X)有自己的卡片預覽標籤規範。雖然 Twitter 在缺乏專用標籤時也能部分使用 Open Graph 資訊來生成預覽,但為了使用 Twitter 平台特有的卡片樣式(例如大圖卡片),我們通常需要加入 Twitter Card 的 <meta> 標籤。Twitter 卡片標籤的語法與 Open Graph 類似,只是屬性名稱使用 twitter: 作為前綴。以下是一組 Twitter Card 標籤的範例:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="文章或頁面的標題">
<meta name="twitter:description" content="適合在 Twitter 卡片中顯示的簡短描述。">
<meta name="twitter:image" content="https://example.com/path/to/preview.webp">
<meta name="twitter:site" content="@YourTwitterAccount">
上述範例中包含了主要的 Twitter Card 標籤:
twitter:card:指定卡片的版型類型。常用值包括 summary(摘要卡,小圖)和 summary_large_image(大圖卡)。在此我們使用後者以提供大型縮圖的預覽效果。
twitter:title:卡片的標題文字(通常與 og:title 相同)。
twitter:description:卡片的描述文字(通常可與 og:description 類似,但也可以針對 Twitter 受眾調整措辭,使之更具吸引力)。
twitter:image:預覽圖像的網址。建議圖片尺寸足夠大且清晰,Twitter 官方建議為 1200×628 像素,以確保在高解析度裝置上呈現良好。
twitter:site:提供內容或網站的 Twitter 帳號名稱(含 @)。設定此值後,預覽卡片上可能會顯示「由 @帳號 提供」的訊息,有助於強化品牌辨識。如果沒有官方帳號,這一行可以省略。
綜合而言,Open Graph 與 Twitter Card 標籤能確保您的內容在各大社群平台上都獲得理想的預覽呈現效果。設定完成後,建議使用各平台提供的工具(如 Facebook 的分享除錯工具和 Twitter 的卡片驗證工具)來檢視並確認預覽顯示是否符合預期。接下來,我們將介紹一些 <meta> 標籤在技術層面的特殊用途。
特殊用途的 <meta> 標籤
除了讓搜尋引擎和社群媒體讀懂您的網頁內容,<meta> 標籤還有一些技術性用途,用於配置頁面的底層行為與資訊。這些標籤有時是為了相容性或特殊需求而存在,了解它們可以幫助您在特定情境下控制瀏覽器的解析與呈現方式。以下介紹幾項常見的特殊用途 <meta> 標籤:
宣告字元編碼(Meta Charset)
<meta charset="UTF-8">
上述標籤用於聲明網頁文件的文字編碼。UTF-8 是目前 HTML5 規範下唯一建議使用的字符編碼,涵蓋了全球大部分語言的字元。將此標籤置於 <head> 最上方位置,有助於瀏覽器在解析頁面時正確識別編碼,避免出現亂碼或錯誤字符。若沒有正確宣告編碼,瀏覽器可能自行猜測而導致顯示異常。值得注意的是,在 HTML4/XHTML 時代,常使用以下語法來宣告編碼:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
這透過 http-equiv 模擬 HTTP 回應頭的 Content-Type 來指定編碼。但在 HTML5 時代,我們只需使用 <meta charset> 的簡潔寫法即可,不應同時混用兩種方式,否則可能導致驗證錯誤或瀏覽器行為不一致。
模擬 HTTP 標頭的 Meta 標籤(http-equiv)
http-equiv 屬性表示 "HTTP 等效"(HTTP-Equivalent),可讓瀏覽器將某些 meta 標籤視為 HTTP 回應頭來處理。以下是幾個常見的 http-equiv 用法範例:
<!-- 舊式指定內容類型(HTML5 不再需要) -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 強制 Internet Explorer 使用最新模式渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 自動刷新或導向頁面(5 秒後跳轉) -->
<meta http-equiv="refresh" content="5; url=https://example.com/new-page.html">
Content-Type:這是過去用來指定網頁內容類型與編碼的標籤,相當於 HTTP Header 的 Content-Type。正如前一節所述,現代 HTML5 已改用 <meta charset> 直接宣告編碼,因此不建議在 HTML5 文件中同時使用兩種宣告方式,以免產生衝突或混淆。
X-UA-Compatible:指定 Internet Explorer 的相容性模式。IE=edge 表示讓 IE 瀏覽器以最新的排版引擎渲染頁面,而不使用過時的相容模式。在 IE 與舊版 Edge 時代,這個標籤可避免瀏覽器陷入相容性模式導致頁面走樣。對於現代的 Chrome、Firefox、Safari 以及基於 Chromium 的新 Edge 而言,此標籤會被忽略,但如果您的網站需要支援仍使用舊版 IE 的用戶,保留此標籤有助於確保正確顯示。
Refresh:使用 refresh 可以要求瀏覽器在指定時間後自動重新載入頁面或跳轉到新網址。例如上述範例將在停留本頁 5 秒後跳轉到 new-page.html。這種方式有時用於簡單的倒數跳轉或定時刷新。然而,從 SEO 和使用者體驗角度來看,不宜頻繁或濫用這個標籤。如果需要永久轉址,應該使用伺服器端的 HTTP 301/302 轉址,因為搜尋引擎對後端轉址的處理更可靠,權重傳遞也更完善。Meta refresh 適合用在提醒或非關鍵場合,並盡量避免設置極短的跳轉時間(否則可能被搜尋引擎視為不良轉址手法)。
除了上述幾種,http-equiv 還有一些較少見的用途。例如 <meta http-equiv="Content-Language" content="en-US"> 企圖聲明頁面語言(現已不常用,建議改用 <html lang="..."> 屬性),以及 <meta http-equiv="Cache-Control" content="no-cache"> 等用於控制快取的標籤(大多情況下應以伺服器的 HTTP Header 配置快取)。隨著網頁標準演進,我們愈發傾向在伺服器層面解決這些問題,但了解這些 meta 標籤仍然有助於維護舊版系統或特殊情境下的需求。
透過上述介紹,我們涵蓋了 SEO、社群分享以及技術配置等各方面的 <meta> 標籤應用。最後,我們整理了一些 常見問題與答覆 (FAQ),以解答實務操作中對 <meta> 標籤的疑惑,加深您對這些標籤的理解。
