Ranking 小編
2023/08/26
瀏覽次數

首頁 / SEO知識庫 / 【HTML Meta Tags 攻略】掌握重要 SEO Meta 標籤,搶佔排名高位!

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

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,不要忘記搭配 Ranking 另外撰寫的 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 標籤,可以參考 Ranking 部落格獨立撰寫的 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.txtnoindex 語法告知爬蟲,該頁面不希望被檢索/索引。

 

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

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

關於 Ranking 小編:

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

其他人也看了...

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

預約顧問諮詢

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