主頁> SEO >充分認識這 8 個 meta tag,讓你的網站 SEO 更勝一籌!

充分認識這 8 個 meta tag,讓你的網站 SEO 更勝一籌!

留言
分享文章:

HTML 的 meta tag (中繼標籤)是網站 SEO (搜尋引擎優化)的重要一環,設置得宜的話有助網頁的排名及點擊率提升,讓大家的優質內容更容易呈現於搜尋者眼前。除了 <title> 和 meta description 之外,還有很多值得大家留意。

meta tag 是甚麼?

metadata 中文可譯作「元數據」,意思是「描述其他數據的數據(data about data)」。故此 HTML 中的 meta 標籤,就是描述網頁檔案的數據。

描述網頁檔案的數據不會直接於網頁中呈現,但有助搜尋引擎了解網頁的內容。因此,在 SEO 的角度中,良好的 meta 標籤設定是十分重要的。該些 meta 標籤在 HTML 的 <head>部分出現,其中包括:

1. <title>

<title> 是一個網頁的標題,會在瀏覽器的分頁以及搜尋結果顯示。這是一個重要的標籤,讓搜尋引擎和用戶了解網頁的內容。<title> 內包含關鍵字對 SEO 有一定的幫助;而如果 <title> 的構思能夠別出心裁,亦有助勾起用戶興趣,提高點閱率。因此,一個良好的 <title> 絕對是非常重要。

在 Google 搜尋結果(SERP)中,<title> 可顯示的字數有限,最高只能展示 600 px,即約 30 中文字或 60 英文字左右。然而,大家亦不必局限 <title> 不要超過特定數目,反而將重要的字眼而置於開首來吸引關注才是重點。

網頁的 Title 於 Google 搜尋結果呈現

近年,Google 的標題連結不一定再利用 <title> 元素的內容,亦會參考網頁上的主要文字、h1 標籤、錨點文字等來生成,但總括而言,<title> 元素的內容仍是協助使用者掌握網頁內容的重要部份。

Google 大幅修改搜尋結果標題,SEO 要注意的 5 個事項

HTML 例子

<title>よしのん的網站教室 | 集合科技新聞、網站制作、SEO、社交媒體經營的文章</title>

[教學]網頁標題(title)怎樣才達到 SEO 效果?

2. description

meta description 是對網頁的簡短形容,會在搜尋結果中顯示。與 <title> 不同,description 雖然都有字數限制,但彈性就大得多,會視乎關鍵字而改變長度。

如 description 的字眼與搜尋字眼吻合,就會以另一種顏色突顯。因此,description 的內容亦值得花時間研究以提高點擊率。

網頁的 meta description 於 Google 搜尋結果呈現

要注意的是,Google 並不會因為 description 的內容而提高排名。第二,搜尋引擎並不一定會使用 description 的字眼作為搜尋結果的摘要。在適合的情況下,搜尋引擎會因應搜尋字眼而在網頁擷取相關文字來展示。

最後,description 並非強制的選項。在某些時候,由搜尋引擎自行從網頁擷取交字的較果會更好。例如一些網頁的內容並非集中於兩三個關鍵字,而是以長尾關鍵字為目標時,由搜尋引擎自行產生網頁形容可近貼近搜尋者的需要。

HTML 例子

<meta name="description"  content="不少人都會在網誌(blog)上加入 AdSense 廣告以賺取額外收入,但到底 AdSense 收入可以達到甚麼水平?這筆收入是不是十分可觀?其實對一般網誌而言,AdSense 的收入只是聊勝於無,如要依賴 AdSense 收入過日子,網站必須極具規模。" />

SEO 常識被推翻? Meta description 不一定要加?

由於 Google 多數會自動從擷取網頁的文字產生摘要,因此有時候可能會出現意想不到的情況,例如使用在頁腳、導覽列等不相關的文字。這時候便可以在相關的 <div><span><section>標籤中使用 data-nosnippet 屬性。

3. canonical

基於多種原因,例如使用各種追蹤參數,或者傳送參數至網站後端處理時,一個網頁可能會多種網址。例如在 example.com,網址亦可以是:

  • www.example.com(多了 www 子域名)
  • example.com/index.html(多了 index.html)
  • example.com/?param=a(多了參數)

在搜尋引擎的角度,這樣會構成內容重複的問題。

為了避免內容重複導致搜尋引擎懲罰,每個網頁都應加入 canonical 網址,讓搜尋引擎識別不同網址但網頁內容相同的唯一「標準」網址。

這樣,即使搜尋引擎檢索了 example.com/index.html 和 example.com/?param=a,它亦能透過 canonical 已宣告的網址,而知道所有的網址均是代表 example.com。這樣搜尋引擎就不會誤當重複內容,亦不會選擇 example.com 以外的網址來呈現於搜尋結果之中。

HTML 例子

<link rel="canonical" href="https://ysnweb.net/2019/12/web-monetisation/google-adsense-how-much-income/" />

4. robots

robots 可以控制搜尋引擎如何檢索我們的網頁。

大家最熟悉的參數莫過於 index/ noindex 和 follow/ nofollow。搜尋引擎會透過爬蟲程式(crawler/ spider)讀取網頁資訊,然後為網頁索引。一般而言,如果網頁沒有設定 robots 的話,就會接受所有搜尋引擎索引,在搜尋結果出現。除非網頁不宜在搜尋引擎中展示,否則毋須使用 robot 標籤。然而,Google 已表明 robots 只供參考,並不一定跟從,即使網頁已加入以上標籤,仍有機會在搜尋結果中呈現。

HTML 例子

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

但除此之外,有其餘三個參數亦值得大家注意,分別是 max-snippet:max-image-preview: max-video-preview:

max-snippet: 可控制搜尋結果所能顯示的文字摘要之字元數目,其中 -1 表示由搜尋引擎自動決定。max-image-preview: 可設定網頁在搜尋結果中的圖片預覽大小上限,可選擇 none、standard 和 large 三個值。max-video-preview: 可設定搜尋結果為網頁上的影片顯示最多甚麼秒數的影片摘要,-1 表示沒有限制。

HTML 例子

<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />

5. viewport

搜尋引擎偏好支援流動裝置的網頁,其中又以回應式網頁設計(Responsive Web Design)最為可取。如要網頁在各裝置中正確呈現,就必須有正確的 viewport 設定。

HTML 例子

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

6. charset

charset 指定瀏覽器展示網頁時的採用的字元編碼,雖然與 SEO 無關,但亦是必要的標籤。現時,大部分的網頁都採用 UTF-8,但某些時候會採用其他編碼,如 GBK 等。

HTML 例子

<meta charset="UTF-8">

7. hreflang

如果網頁設有多種語言,就需要 hreflang 來提示搜尋引擎展示正確的網頁給不同地區的訪客。

HTML 例子

<link rel="alternate" href="http://example.com" hreflang="en-us" />

8. og

og (Open Graph)並非用於 SEO 中,但對網頁於 Facebook、LINE 等社交媒體正確地呈現有莫大幫助,其中 og:title、og:description、og:image 至為重要,分別決定了網頁於社交媒體分享時顯示的標體、形容和縮圖。

HTML 例子 (Facebook、Plurk、LINE 等)

<meta property="og:type" content="article" />
<meta property="og:title" content="Google AdSense 可以帶來多少「被動收入」?(附記錄)" />
<meta property="og:description" content="不少人都會在網誌(blog)上加入 AdSense 廣告以賺取額外收入,但到底 AdSense 收入可以達到甚麼水平?這筆收入是不是十分可觀?其實對一般網誌而言,AdSense 的收入只是聊勝於無,如要依賴 AdSense 收入過日子,網站必須極具規模。" />
<meta property="og:url" content="https://ysnweb.net/2019/12/web-monetisation/google-adsense-how-much-income/" />
<meta property="og:site_name" content="よしのん的網站教室" />
<meta property="og:image" content="https://i0.wp.com/backend-wp.ysnweb.net/wp-content/uploads/2019/09/adsense.jpeg?fit=900%2C450&amp;ssl=1" />

HTML 例子 (X / Twitter)

X 一度在 2023 年 10 月作出變動,分享連結時只會顯示縮圖和網站域名,而不會顯示標題,但 2024 年亦重新把網頁標題加入。因此,大家需密切留意 X 的更新。

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Google AdSense 可以帶來多少「被動收入」?(附記錄)" />
<meta name="twitter:description" content="不少人都會在網誌(blog)上加入 AdSense 廣告以賺取額外收入,但到底 AdSense 收入可以達到甚麼水平?這筆收入是不是十分可觀?其實對一般網誌而言,AdSense 的收入只是聊勝於無,如要依賴 AdSense 收入過日子,網站必須極具規模。" />
<meta name="twitter:image" content="https://i0.wp.com/backend-wp.ysnweb.net/wp-content/uploads/2019/09/adsense.jpeg?fit=900%2C450&amp;ssl=1" />

雖然就算沒有 og:title 和 og:description,Facebook 等都會採用 title 和 description 的內容,但一般建議還是要加,以免發生意想不到的情況。

特別記念:keywords

這本來是讓搜尋引擎了解網頁關鍵字的標籤,但由於遭到濫用,Google 早在 2009 就不再理會。縱使大家仍然可以使用,但不會有實質幫助。事實上,細心留意位居前列的網頁背後的 HTML,亦可見已沒有 keywords。

<meta name="keywords" content="HTML,CSS,XML,JavaScript">
尋找線上學習平台:
Udemyhahow六角學院Coursera

馬上領取Hahow好學校 9 折優惠

去看個書,好不好?

SEO白話文:贏得免費流量,創造長期營收的「SEO行銷指南」

書名:SEO白話文:贏得免費流量,創造長期營收的「SEO行銷指南」

作者:邱韜誠 Frank Chiu

簡介:

★ 無痛上手 SEO 策略!征服 Google 排名,從這裡開始 ★
★ 零基礎、零門檻,獲得免費流量,提升顧客訂單 ★
★ 網路熱銷 SEO 課程講師,超過千人驗證過的學習方法 ★
★ 隨書附贈「SEO 行銷流程圖」,實戰學習更有效 ★

立即購買:博客來金石堂

最親切的SEO入門教室:關鍵字編輯x內容行銷x網站分析

書名:《最親切的SEO入門教室:關鍵字編輯x內容行銷x網站分析》

作者: 福田多美子

簡介:本書是專為想要學習SEO基礎知識,希望自己的網站能出現在搜尋結果前段班的人所撰寫的書籍。藉由本書豐富的圖解以及生動的對話設計,即使在此之前您連搜尋引擎最佳化都沒有聽說過,也能藉由本書快速學到相關的基礎知識與概念。

本書的主題是SEO的基礎知識與須知事項,從中會介紹行動裝置的SEO策略以及語音搜尋、社群搜尋、影片SEO、本地SEO的最新動向。

立即購買:博客來金石堂

第一次學SEO就上手

書名:《第一次學SEO就上手》

作者: 鈴木將司

簡介:本書將會帶領讀者了解搜尋引擎對部落格文章的評分機制,之後再學習文章的寫作方式,以提昇Google與Google搜尋用戶對文章的評價。無論是接下來打算開始經營部落格的初學者,或是完全沒有SEO相關知識的SEO初學者,都可以在本書的引導下從零開始學習。

立即購買:博客來金石堂

Hahow 線上課程

SEO 白話文:不懂程式也能學會的 SEO 秘密

課程名稱:SEO 白話文:不懂程式也能學會的 SEO 秘密

《SEO 白話文:不懂程式也能學會的 SEO 秘密》是一堂最好懂的 SEO 課程之一,幫助你建構 SEO 的運作邏輯、學習方法論,並且可以實務應用到自己的網站跟品牌中。現在就開始以從 Google 索取免費的自然流量!

獲取線上課程:Hahow 好學校

訪客留言