-
-
|
- SEO知識庫
|
操作 SEO 一定不能不提到 HTML 的 Meta Tags（即 Meta 標籤），Meta Tags 是透過標記各種資訊來描述網頁當中的內容，對於網站的資訊架構來說非常重要！
那究竟什麼是 HTML Meta Tags 呢？字面上來看，Meta 是「Metadata」的意思，中文譯為「元資料」，即為「描述其他資料的資料」；而 Meta Tags 則被稱為「元標籤」，用以描述網頁資料的標籤，多以 HTML 的語法撰寫，因此 Meta Tags 內容一般不會直接顯示在網站中，而是會被撰寫在 HTML <head> 的區塊。
為什麼需要設定 Meta Tags 呢？原因在於，搜尋引擎爬蟲在讀取網頁時，會以 HTML 語法內容優先閱讀，Meta Tags 若設定得當，可以清楚地讓搜尋引擎爬蟲更明確地了解網頁中的資訊，後續就有機會取得好的 SEO 成效！
延伸閱讀 SEO HTML 基本概念： 【SEO HTML概念篇】SEO操作必學！從0到1的HTML基礎知識教學
了解了 Meta Tags 的重要性後，以下整理 7 個最常見且對 SEO 影響較大的標籤種類，其中以 Meta Title 與 Meta Description 兩者最為重要且易操作。7 個 Meta 標籤的整理如下，可以直接點擊表格中的標籤名稱前往查看細節說明與 HTML 實際撰寫的語法範例喔！
| Meta 標籤名稱 | Meta 標籤作用 |
|---|---|
| Meta Title | 網頁的標題 |
| Meta Description | 網頁的內容摘要 |
| Meta Charset | 字元編碼 |
| Canonical | 網頁識別 |
| Viewport | 各裝置顯示 |
| Robots | 拒絕檢索／索引 |
| Hreflang | 語種設定 |
Meta Title 即是網頁標題，是判斷網頁主題相當重要的一個標籤。除了在 HTML 語法中影響爬蟲的解讀外，Meta Title 也會顯示於搜尋結果頁中，是決定使用者是否點擊網頁的關鍵因素！
值得注意的是，Meta Title 並不直接等於文章標題，但兩者通常會是相同的。在發想完一個好的文章標題後，也要再回頭確認 Meta Title 是否有同步設定好。
Meta Title 實際 HTML 語法撰寫的方式如下：
<head>
<title>網頁標題</title>
</head>
一個好的 Meta Title 是有很大的機會帶來點擊、提升網頁排名的。那要如何寫出好的 Meta Title 呢？可以把握以下幾個重點：
Meta Title 建議一定要包含關鍵字，對 SEO 效果與建立議題關聯性是有直接影響的。此外，讓使用者能一眼就從標題了解網頁主題，更能吸引點擊。但千萬別為了塞關鍵字或塞入過多內容而讓 Meta Title 變得冗長。從下方搜尋結果圖可以看到，搜尋結果頁的長度是有限的，若標題過長可能導致 Meta Title 被截斷，讓使用者無法了解原先想傳達的意思。
另一個常和 Meta Title 一起討論的標籤是 Meta Description。Meta Description 可視為網頁內容的精選摘要，和 Meta Title 一樣，也會顯示於搜尋結果頁中。
Meta Description 實際 HTML 語法撰寫的方式如下：
<head>
<meta name=”description” content=”網頁內容敘述”>
</head>
Meta Description 的重點在於要讓使用者能透過簡短的敘述產生對文章的興趣，進而想要了解更多資訊並點擊進入文章。建議將關鍵字適當地安排在敘述當中，以符合使用者搜尋的意圖，進而注意到你的網頁。另外，在搜尋結果頁若是 Meta Description 有包含關鍵字會以紅色做重點顯示（參下圖），因此除主要關鍵字外，可以再另包含 1～2 個相關關鍵字，以達到最好的效果！
但也要避免濫塞關鍵字，若搜尋引擎判定資訊混亂則有可能會直接改寫 Meta Description。
介紹完 Meta Title 與 Meta Description，可以發現要注意的細節頗多，從字數、關鍵字到相關議題都需要妥善規劃。Ranking SEO 的文案規劃工具提供了 SEOer 們一個強效輔助，讓用戶們在撰寫文章時便能同步發想 Meta Title 與 Meta Description，透過智能系統給予議題的字詞建議，讓撰寫標籤內容上更加無負擔。
體驗強效 SEO 助手：註冊免費體驗 7 天試用
Charset 用以指定瀏覽器展示網頁內容時採用的字元編碼，主流網頁使用的字元編碼為 UTF-8。若未正確使用字元編碼，會讓使用者在瀏覽網頁時出現亂碼、影響使用者體驗。
<head>
<meta charset=”UTF-8”>
</head>
Canonical 中文譯為「標準的；權威的」，用於 SEO 中是向搜尋引擎說明，有設置這個 HTML 標籤的網頁才是原創內容；或用於解釋同網域下重複內容的關係，以減少因搜尋引擎誤認重複內容而懲罰的可能性。
延伸閱讀：善用 Canonical 語法，避免網站重複內容影響 SEO 排名
<link rel=”canonical” href=”網頁 URL”>
Meta Viewport 讓網頁能根據使用者使用的裝置顯示正確的排版。由於搜尋引擎演算法近年來對行動裝置的體驗愈加重視，因此妥善設定 Viewport 讓各裝置能正常顯示網頁尺寸與排版是不可少的。
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
</head>
一般未特別處理的網頁，皆會被搜尋引擎爬蟲爬取，後續進行檢索與索引。但若有特殊頁面不希望被爬蟲爬取或顯示於搜尋結果頁上（ex. 開發中的網頁、網站後台等），則可設定 Meta Robots 標籤告知爬蟲，該頁面不希望被檢索／索引。
延伸閱讀：使用 Noindex、Nofollow 語法，解決網站排名下降問題
<head>
<meta name=”robots” content=”noindex,nofollow”>
</head>
若網頁屬於多語種網頁，可以設定 Hreflang Tag 來告知搜尋引擎，讓不同地區的使用者能獲得對應的語種內容。
<link rel=”alternate” href=”網頁 URL” hreflang=”語言代碼”>
介紹完重要的 7 個 Meta 標籤，最後提供一個過往很重要、但已被演算法淘汰的 Meta 標籤給讀者們參考－Meta Keyword。看到「Keyword」很快能聯想到跟關鍵字有關，但既然跟關鍵字有關，對 SEO 來說不是很重要嗎？
Meta Keyword 的確有段時間是搜尋引擎爬蟲參考網頁的重要依據之一，但因為設置容易且不影響閱讀體驗，Meta Keyword 標籤後期很常遭到濫用，被惡意操作塞入關鍵字，在 2009 年之後遭到 Google 棄用。因此目前就算有設定 Meta Keyword，對於網頁的 SEO 也不會有太大的幫助囉。
本文介紹到的不同 Meta Tags 能夠讓搜尋引擎爬蟲獲得網頁不同面向的資訊，運用得當則能為 SEO 大大的加分！其中最重要的兩個標籤－Meta Title＆Meta Description 更是兩大重點，各位 SEOer 千萬不能忽略！
Ranking SEO 工具除了上面提到文案規劃工具，能幫助使用者在撰寫文章時一併規劃 Meta 標籤的內容外，另有網頁評測功能協助使用者檢查已上線網頁的 Meta Title 與 Meta Descriprion 是否符合格式；批量評測更能一次檢測多個網頁，協助用戶省下時間！若想體驗 Ranking SEO 強大火力，快點擊註冊，免費試用！
期許用深入淺出的方式帶你進入 SEO 世界，提供實用性高的優質文章，簡化 SEO 複雜流程及技術，讓每個人都能快速理解 SEO 行銷，一起登上 Ranking 火箭讓排名再創高峰！※若有行銷相關問題或者業務合作歡迎隨時與我們聯繫！