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

SEOSEO 教學精選教學

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 絕對是非常重要。

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

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

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 不一定要加?

3. canonical

基於多種原因,一個網頁可能會多種網址,例如在 example.com,網址亦可以是:

  • www.example.com
  • example.com/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. charset

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

HTML 例子

 <meta charset="UTF-8"> 

5. viewport

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

HTML 例子

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

6. robot

搜尋引擎會透過爬蟲程式(crawler/ spider)讀取網頁資訊,然後為網頁索引。一般而言,如果網頁沒有設定 robot 的話,就會接受所有搜尋引擎索引,在搜尋結果出現。除非網頁不宜在搜尋引擎中展示,否則毋須使用 robot 標籤。

然而,Google 已表明 robot 只供參考,並不一定跟從,即使網頁已加入以上標籤,仍有機會在搜尋結果中呈現。

HTML 例子

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

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/ysnweb.net/wp-content/uploads/2019/09/adsense.jpeg?fit=900%2C450&ssl=1" />

HTML 例子 (Twitter)

<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/ysnweb.net/wp-content/uploads/2019/09/adsense.jpeg?fit=900%2C450&ssl=1" />

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

特別記念:keywords

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

<meta name="keywords" content="HTML,CSS,XML,JavaScript">

想關注更多 SEO (搜尋引擎優化)的消息嗎?記得關注本網 Facebook 或透過 Feedly 訂閱來取得更新!

最新出版!認識 SEO 的新手入門書!

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

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

作者: 福田多美子

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

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

立即購買