|
操作 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 火箭讓排名再創高峰!※若有行銷相關問題或者業務合作歡迎隨時與我們聯繫!