首頁 / SEO知識庫 / 【HTML Meta Tags 攻略】掌握 Meta Title & Description,搶佔 SEO 高位!
Ranking 小編
2023/02/02
瀏覽次數

【HTML Meta Tags 攻略】掌握 Meta Title & Description,搶佔 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 TitleMeta Description 兩者最為重要且易操作。7 個 Meta 標籤的整理如下,可以直接點擊表格中的標籤名稱前往查看細節說明與 HTML 實際撰寫的語法範例喔!

 

Meta 標籤名稱 Meta 標籤作用
Meta Title 網頁的標題
Meta Description 網頁的內容摘要
Meta Charset 字元編碼
Canonical 網頁識別
Viewport 各裝置顯示
Robots 拒絕檢索/索引
Hreflang 語種設定

Meta Title-判斷網頁主題的關鍵 Meta 標籤

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

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

Meta SEO 標籤:Meta Title


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

<head>

<title>網頁標題</title>

</head>

HTML Meta Tags 語法範例:Meta Title


Meta Title 該怎麼下標?字數與寫法秘訣一次看

一個好的 Meta Title 是有很大的機會帶來點擊、提升網頁排名的。那要如何寫出好的 Meta Title 呢?可以把握以下幾個重點:

  • 標題簡潔且精準傳達主題
  • Meta Title 中包含關鍵字
  • 字數以 50~64 個字元(約 25~32 個中文字)為佳

Meta Title 建議一定要包含關鍵字,對 SEO 效果與建立議題關聯性是有直接影響的。此外,讓使用者能一眼就從標題了解網頁主題,更能吸引點擊。但千萬別為了塞關鍵字或塞入過多內容而讓 Meta Title 變得冗長。從下方搜尋結果圖可以看到,搜尋結果頁的長度是有限的,若標題過長可能導致 Meta Title 被截斷,讓使用者無法了解原先想傳達的意思。

Meta SEO 標籤:Meta Title


Meta Description-網頁內容精華摘要

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

Meta SEO 標籤:Meta Description

 

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

<head>

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

</head>

HTML Meta Tags 語法範例:Meta Description


Meta Description 怎麼寫?掌握搜尋目標與關鍵字!

  • 能解答使用者搜尋意圖、包含關鍵字
  • 字數以 100~152 個字元(約 50~76 個中文字)為佳
  • 避免濫用關鍵字而被搜尋引擎改寫

Meta Description 的重點在於要讓使用者能透過簡短的敘述產生對文章的興趣,進而想要了解更多資訊並點擊進入文章。建議將關鍵字適當地安排在敘述當中,以符合使用者搜尋的意圖,進而注意到你的網頁。另外,在搜尋結果頁若是 Meta Description 有包含關鍵字會以紅色做重點顯示(參下圖),因此除主要關鍵字外,可以再另包含 1~2 個相關關鍵字,以達到最好的效果!

 

但也要避免濫塞關鍵字,若搜尋引擎判定資訊混亂則有可能會直接改寫 Meta Description。

Meta SEO 標籤:Meta Description


Meta Title 與 Description 的強效助手:Ranking SEO 文案規劃工具

介紹完 Meta Title 與 Meta Description,可以發現要注意的細節頗多,從字數、關鍵字到相關議題都需要妥善規劃。Ranking SEO 的文案規劃工具提供了 SEOer 們一個強效輔助,讓用戶們在撰寫文章時便能同步發想 Meta Title 與 Meta Description,透過智能系統給予議題的字詞建議,讓撰寫標籤內容上更加無負擔。

Meta Title & Meta Description 撰寫範例

體驗強效 SEO 助手:註冊免費體驗 7 天試用



其他 Meta 標籤操作說明與撰寫示意

Meta Charset-字元編碼

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

 

<head>

<meta charset=UTF-8>

</head>

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

Canonical-網頁識別

Canonical 中文譯為「標準的;權威的」,用於 SEO 中是向搜尋引擎說明,有設置這個 HTML 標籤的網頁才是原創內容;或用於解釋同網域下重複內容的關係,以減少因搜尋引擎誤認重複內容而懲罰的可能性。

延伸閱讀:善用 Canonical 語法,避免網站重複內容影響 SEO 排名

 

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

HTML Meta Tags 語法範例:Canonical

Viewport-裝置顯示

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

 

<head>

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

</head>

HTML Meta Tags 語法範例:Meta Viewport

Robots-拒絕檢索/索引

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

延伸閱讀:使用 Noindex、Nofollow 語法,解決網站排名下降問題

 

<head>

<meta name=”robotscontent=”noindex,nofollow>

</head>

HTML Meta Tags 語法範例:Meta Robots

Hreflang-語種設定

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

 

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

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 千萬不能忽略!

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

關於 Ranking 小編:

期許用深入淺出的方式帶你進入 SEO 世界,提供實用性高的優質文章,簡化 SEO 複雜流程及技術,讓每個人都能快速理解 SEO 行銷,一起登上 Ranking 火箭讓排名再創高峰!※若有行銷相關問題或者業務合作歡迎隨時與我們聯繫!

其他人也看了...

想透過 SEO 提升品牌曝光度及網站流量,並獲得更多商機嗎?
SEO 專家|Ranking 提供全方位解決方案,讓你排名一飛沖天!

預約顧問諮詢

請您選擇感興趣的服務,並留下聯繫資訊,我們將於三個工作天內聯繫您,讓你品牌一躍上首頁!