【HTML Meta Tags 攻略】掌握重要 SEO Meta 標籤,搶佔排名高位!

2023/08/26
技術SEO

SEO 操作上重要的 HTML 之一就是 Meta Tags(Meta 標籤)!但 Meta Tags 是什麼?對 SEO 有哪些影響?又該怎麼妥善設定 Meta Tags 呢?一起進入文章一探究竟吧!

HTML Meta Tags 是什麼?藏在網站後的 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基礎知識教學

 

影響 SEO Meta Tags 有哪些?7 個常見 Meta 標籤總整理!

了解 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-判斷網頁主題的關鍵 Meta 標籤

Meta Title 即是網頁標題,是判斷網頁主題相當重要的 Meta Tag。除了在 HTML 語法中影響爬蟲的解讀外,Meta Title 也會顯示於搜尋結果頁中,是決定使用者是否點擊網頁的關鍵因素!

值得注意的是,Meta Title 並不直接等於文章標題,但兩者通常會是相同的。在發想完一個好的文章標題後,也要再回頭確認 Meta Title 是否有同步設定好。

Meta SEO 標籤:Meta Title

 

Meta Title 實際 HTML 語法撰寫的方式如下:

<head>

<title>網頁標題</title>

</head>

HTML Meta Tags 語法範例:Meta Title

 

Meta Description-網頁內容精華摘要

另一個常和 Meta Title 一起討論的標籤是 Meta Description。Meta Description 可視為網頁內容的精選摘要,和 Meta Title 一樣,也會顯示於搜尋結果頁中。

Meta SEO 標籤:Meta Description

 

Meta Description 實際 HTML 語法撰寫的方式如下:

<head>

<meta name=”description” content=”網頁內容敘述”>

</head>

HTML Meta Tags 語法範例:Meta Description

 

網頁標題和網頁描述在使用者體驗上扮演舉足輕重的角色,在設計和撰寫上也有許多需要留意的小細節,所以大家如果想要操作 SEO,不要忘記搭配 Rankking 另外撰寫的 Meta Title Meta Description 教學文章一起閱讀喔!

 

Meta Charset-字元編碼

Charset 用以指定瀏覽器展示網頁內容時採用的字元編碼,主流網頁使用的字元編碼為 UTF-8。若未正確使用字元編碼,會讓使用者在瀏覽網頁時出現亂碼、影響使用者體驗。

 

<head>

<meta charset=”UTF-8”>

</head>

HTML Meta Tags 語法範例:Meta Charset HTML UFT-8

 

Canonical-網頁識別

Canonical 中文譯為「標準的;權威的」,Canonical Tag 在 SEO 領域則是用來處理無法避免的類似內容問題,設置這個 Meta Tag 可以告訴爬蟲在幾個類似頁面中何者才是最主要的網頁內容,並顯示於相關的搜尋結果頁中,以減少因搜尋引擎誤認重複內容而懲罰的可能性。

想進一步了解 Canonical 標籤,可以參考 Rankking 部落格獨立撰寫的 Canonical URL 教學文章喔!

延伸閱讀:重複內容全指南:一篇教你避免重複內容瓜分網站 SEO 排名

 

<link rel=”canonical”  href=”網頁 URL”>

HTML Meta Tags 語法範例:Canonical

 

Viewport-裝置顯示

Meta Viewport 讓網頁能根據使用者使用的裝置顯示正確的排版。由於搜尋引擎演算法近年來對行動裝置的體驗愈加重視,因此妥善設定與裝置顯示相關的 Meta Tag Viewport 讓各裝置能正常顯示網頁尺寸與排版是不可少的。

 

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1”>

</head>

HTML Meta Tags 語法範例:Meta Viewport

 

Robots-拒絕檢索/索引

一般未特別處理的網頁,皆會被搜尋引擎爬蟲爬取,後續進行檢索與索引。但若有特殊頁面不希望被爬蟲爬取或顯示於搜尋結果頁上(ex. 開發中的網頁、網站後台等),則可設定 Robots.txt 或 noindex 語法告知爬蟲,該頁面不希望被檢索/索引。

 

<head>

<meta name=”robots” content=”noindex,nofollow”>

</head>

HTML Meta Tags 語法範例:Meta Robots

 

Hreflang-語種設定

若網頁屬於多語種網頁,可以設定 Hreflang Tag 來告知搜尋引擎,讓不同地區的使用者能獲得對應的語種內容。

 

<link rel=”alternate”  href=”網頁 URL” hreflang=”語言代碼”>

HTML Meta Tags 語法範例:hreflang

 
 

過往重要 Meta Tag 參考:Meta Keyword

介紹完重要的 7 個 Meta 標籤,最後提供一個過往很重要、但已被演算法淘汰的 Meta 標籤給讀者們參考-Meta Keyword。看到「Keyword」很快能聯想到跟關鍵字有關,但既然跟關鍵字有關,對 SEO 來說不是很重要嗎?

Meta Keyword 的確有段時間是搜尋引擎爬蟲參考網頁的重要依據之一,但因為設置容易且不影響閱讀體驗,Meta Keyword 標籤後期很常遭到濫用,被惡意操作塞入關鍵字,在 2009 年之後遭到 Google 棄用。因此目前就算有設定 Meta Keyword,對於網頁的 SEO 也不會有太大的幫助囉。

 

結語:善用 Meta Tags、搶佔 SEO 高位

本文介紹到的不同 Meta Tags 能夠讓搜尋引擎爬蟲獲得網頁不同面向的資訊,運用得當則能為 SEO 大大的加分!其中最重要的兩個標籤-Meta Title&Meta Description 更是兩大重點,各位 SEOer 千萬不能忽略!

Rankking SEO 工具除了上面提到文案規劃工具,能幫助使用者在撰寫文章時一併規劃 Meta 標籤的內容外,另有網頁評測功能協助使用者檢查已上線網頁的 Meta Title 與 Meta Descriprion 是否符合格式;批量評測更能一次檢測多個網頁,協助用戶省下時間!若想體驗 Rankking SEO 強大火力,快點擊註冊,免費試用!

Rankking 行銷顧問團隊

Rankking 行銷顧問團隊

由專攻 SEO/GEO 搜尋行銷的資深編輯、技術、網站、行銷團隊共同組成,為你分享 SEO/GEO 行銷的「最新市場洞察、實戰策略」,更簡化艱澀複雜的專有名詞,讓你輕鬆理解 SEO/GEO 行銷!

自動接收 SEOxGEO 情報

自動接收 SEOxGEO 情報