1

SEO新手需知:Schema 結構化資料標記是什麼?

 1 year ago
source link: https://www.yesharris.com/seo-basic/schema/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

為什麼要談結構化資料標記(或有些人會稱為Schema)呢?因為Google 搜尋結果頁在近幾年變得愈來愈多元,出現像是食譜、書籍、電影輪播、商品資訊…….等各式各樣的搜尋結果,如果想讓網站在搜尋結果上呈現出這些豐富的功能、引起使用者的目光與興趣,就要做好結構化資料標記(Schema) 設定。結構化資料標記是 SEO 中相當重要的項目,我們實務上為網站健診時也會對此檢查優化,這篇文章會分享 Google 結構化資料標記是什麼、有哪些種類、作法指南、以及新手常見迷思提醒。

這篇文章會由 Harris 先生的顧問團隊維護、並且由 Harris 進行監修。

最後編修日期:2023 年 5 月

結構化資料標記是什麼?

結構化資料標記是什麼?

結構化資料標記是一種語法、並且有很多種的格式,正確使用的話可以幫助搜尋引擎更好的了解我們網頁的內容,並有機會在搜尋結果頁上出現多元的樣貌 (搜尋結果頁又稱為 Search Engine Result Page , 縮寫為 SERP),如上圖範例,也就是我們常見的「複合式搜尋結果」。

photo_harris.png
SERP是專家們常用的說法跟名詞,大家可以稍微記一下唷。

結構化資料標記最早期的格式規範叫做 Schema,Schema 是由曾經的三大搜尋引擎 Google、Bing、Yahoo 共同制訂,是早期各家搜尋引擎使用的結構化資料標記格式,Schema 相關的格式規範都在 Schema.org

所以要精準來說的話,結構化資料標記並不等於 Schema,Schema 只是早期的統一格式。但 Google 現在已經漸漸發展出自己的格式規範了,Google 現在採用的格式未必會跟當初大家一起制定的 Schema 格式一樣。因此 Google官方也還是建議現在做 SEO 應該以 Google 公布的為主。

photo_harris.png
在職場上,大多都還是習慣把”結構化資料標記“稱呼為Schema(畢竟Schema是早期的通用格式跟名詞)

因此,我們在提到”Schema”或是”結構化資料標記“時,通常都是在講同一件事情,大家不太需要特別在名詞上刁鑽或執著,跟別人溝通時大家都聽得懂就好 : )

搜尋引擎看到的結構化資料(Schema

大家不用擔心,不用會寫程式,透過以下範例也能很簡單知道什麼是結構化資料標記。

那麼結構化資料標記是什麼呢?

舉例來說,如果網站的標題是「Brownie(布朗尼)」

未使用結構化資料標記的網頁,程式碼中會這樣呈現:<h1> Brownie </h1>

搜尋引擎看到的Schema結構化資料

未使用結構化資料標記時,搜尋引擎只會知道「Brownie 」是這個網頁的標題,但不會知道 Brownie 代表的是布朗尼食譜做法、還是商品資訊、甚至可能是書名或是一家店名?

搜尋引擎看到的Schema結構化資料

使用結構化資料標記後,即可提醒 Google ,網頁上的 Brownie 究竟是哪一種類型的內容,就能更容易讓網頁內容以相符的模式出現在搜尋結果上。

小提醒:即使設定了結構化資料標記,也不一定會在 SERP 呈現複合式搜尋結果,大家可以把結構化資料標記想成是加分項目,讓 Google 更了解我們網站內容,但最終會不會照我們設定的來呈現,還是取決於 Google 喔!

如果有用結構化資料標記(Schema),搜尋結果上會怎麼呈現呢?

 結構化資料可能聽起來很陌生,但你一定在搜尋結果頁看過它。看起來很華麗的複合式搜尋結果,背後功臣都是仰賴結構化資料標記喔!這邊舉例幾個常見的結構化資料標記:

1. Product 產品:

Product結構化資料

產品結構化資料是電商網站常見的類型,讓使用者在 Google 搜尋想購買的產品時,可以在搜尋結果頁中直接查看產品規格、價錢、評分、供貨狀況,不僅能完整展現產品資訊,也能增加使用者對網站的信任感。在設置產品結構化資料時,要注意產品資訊的準確性與即時性,讓使用者找到符合需求、且仍有庫存的品項。

2. FAQ 常見問題:

FAQ結構化資料

FAQ 結構化資料是針對特定主題的問答集,是內容型網站常使用的類型,讓使用者無需點開網頁便能獲得相關資訊解惑。FAQ 問答不僅能吸引讀者者目光、加強使用體驗,另外在問答中加入網站連結,還能讓讀者產生興趣閱讀更多,是提升互動與點擊的小撇步 ^^

2023 年 5 月 – 資訊補充:
2023 年 5 月時有專家們發現 FAQ 結構化資料出現在搜尋結果的比例大幅降低,而官方並沒有正式公告是否停用 FAQ 功能。目前 FAQ Schema 還是可以設定使用、也能被 Google 偵測到,只是不一定會在 SERP 出現了。

3. Article 文章:

NewsArticle結構化資料

文章結構化資料常應用在新聞媒體、體育報導、網址文章等內容型網頁中,可以強化文章標題、圖片、日期、作者等資訊,有機會在搜尋結果頁佔有更多版面,比起沒有文章結構化資料的網頁,增加了更多曝光點擊優勢。

結構化資料標記對SEO有幫助嗎?

當然是有幫助的  : ) 

現在的網站內容五花八門,像是文章、食譜、書籍、商品資訊等等……太多太多了,只要有結構化資料標記,就像是在網站放上路標,主動告訴 Google 你的網頁內容是什麼類型,讓 Google 不會迷路並更快理解網站架構,在  SERP(搜尋引擎結果頁) 上就能有機會以多元的複合式搜尋結果呈現。

photo_harris.png
結構化資料標記也是Google官方正式聲明過,是搜尋排名的訊號之一。

雖然 Google 沒有證明使用結構化資料會直接影響 SEO 排名,但官方有提到,使用結構化資料可以在 SERP 佔有更多版位、幫助讀者辨識資訊、抓住使用者目光,進而獲得更多互動與點擊。根據 Google 官方表示,和沒有使用結構化資料的網頁相比,加入結構化資料的網頁高出 25% 的點閱率,讓互動與流量有顯著的成長。

結構化資料使用對比

國外的 SEO 權威 Neil patel 也在文章中提到,第三方數據表示有使用結構化資料標記的網站,比其他網站平均高 4 個排名。而目前僅有不到三分之一的網站有使用結構化資料標記來強化搜尋結果,也就是說有大約 70% 的網站還未取得這個 SEO 優勢 —— 越早使用結構化資料,有機會讓你的網站在排名競爭中佔更多優勢。

結構化資料標記有哪些?

目前 Google 搜尋引擎常見的結構化資料標記有 32 種,以下為大家簡單分類,可以看看你的網站有沒有對應的頁面類型:

常用:

  • Article 文章 
  • Breadcrumb 導覽標記(麵包屑)
  • FAQ 常見問題
  • QA Page問與答
  • Local Business 當地商家
  • Logo 標誌
  • Sitelinks Searchbox 網站連結搜尋框
  • Carousel 輪轉介面

電商:

  • Book 書籍
  • Product 產品 
  • Review 評論摘錄

生活類:

  • Video 影片
  • Movie 電影 
  • Recipe 食譜 

活動相關:

  • Course 課程
  • Event 活動
  • Home Activity 居家活動

求職相關:

  • EmployerAggregateRating 雇主評分
  • Occupation 預估薪酬
  • JobPosting 工作機會 

教育相關:

  • Education QA 教育問與答
  • Learning Video 教學影片
  • Math Solver 數學解題工具
  • Practice Problems 練習題

其他:

  • Datast 資料集
  • Fact Check 事實查核
  • How-to 作法步驟 
  • Image License Metadata 圖片中繼資料
  • Software App 軟體應用程式(Beta版)
  • Paywelled Content 訂閱和付費牆內容
  • Speakable 支援朗讀服務內容 (Beta版)
  • COVID-19 公告(Beta版)

如果想了解各項結構化資料的呈現樣式跟語法資訊,可以參考 Google 官方指南喔!

結構化資料執行步驟

08%E7%B5%90%E6%A7%8B%E5%8C%96%E8%B3%87%E6%96%99%E5%9F%B7%E8%A1%8C%E6%AD%A5%E9%A9%9F-2.png

結構化資料標記主要分成 3 個步驟:

  1. 確認網頁類型
  2. 選擇並建立結構化資料標記
  3. 測試檢查 – 結構化資料測試工具

如果你也想讓網站在 SERP 有多樣的複合式搜尋結果,可以繼續往下看看結構化資料要怎麼做,如果不會寫程式也不用擔心,下面有新手友善的設定方法  : ) 

Step 1. 確認網頁類型

每個產業適合的結構化資料標記都不太相同,建議你先了解各個 Schema 的意思與呈現樣式,再根據你的網站內容,選擇對應的 Schema 標記。(可以參考上一段的介紹:結構化資料標記有哪些,或是  Google 官方指南

舉例來說,賣運動鞋的產業,所需要的 Schema 標記可能會有 Product 產品、FAQ 常見問題,但不會有 Recipe 食譜,因為食譜與運動鞋網頁上能呈現的內容較無關聯。反之,如果是媒體內容網站,就比較會用到 Recipe 食譜、Article 文章等結構化資料標記,而不太會用到 Product 產品標記。

Step 2. 選擇並建立結構化資料標記(免寫程式)

確認好網頁類型後,第二步要來建立結構化資料標記。

Google 支援的結構化資料格式語法主要有 3 種:JSON-LD、Microdata 微資料、RDFa

程式語法對於行銷人可能會較為複雜,因此在介紹這 3 種程式語法前,我們先來看看不用寫程式也能建立結構化資料的 2 個方法:

免寫程式方法1:WordPress Schema 外掛

Wordpress Schema外掛

如果你的網站是使用像 WordPress 這樣的內容管理平台(CMS),只要在外掛市集中搜尋 Schema 外掛插件,安裝後就能快速幫網站設定結構化資料標記囉。需要注意的是,各個外掛插件支援的 Schema 類型可能不同,大家可以依照網站需求安裝適合的外掛。

使用 WordPress Schema 的好處是,即使不會寫程式也能幫網頁增加結構化資料標記,設定上簡單快速,對行銷人和文案編輯來說十分方便。以 Rank Math SEO 外掛舉例,在文章編輯後台,點開 設定> 外掛 Rank Math > Schema Generator,就可以選擇想要的 Schema 類型進行設定。

設定完成後,建議使用結構化資料測試工具,來檢查有沒有設定成功。

免寫程式方法2:結構化資料標記協助工具

如果你的網站不支援 Schema 外掛插件,這邊還有另一個免寫程式的方法:Google 官方推出的結構化資料標記協助工具。不過此工具只能協助產出 Schema 語法,你還需要自行把語法貼到網頁 HTML 原始碼中,才算標記完成。(比較麻煩一點點,不像 WordPress 外掛可以幫網頁直接完成設定)

結構化資料標記協助工具

以下是結構化資料標記協助工具的步驟教學

  1. 選擇 Schema 類型(此工具目前支援 14 種)。
  2. 貼上要進行資料標記網頁的網址,開始進行標記。
  3. 反白要標記的內容,並選擇類型。
    標記後會顯示在右側欄位,其中「必要」的項目必須填滿,如果想填的是網頁上沒有的內容,請點擊「新增缺少的資料」來新增內容。
  4. 點擊「建立 HTML」就能產出 Schema 程式碼囉,最後需要再把這段程式碼貼到網頁 HTML 原始碼中,才算標記完成。

接著會介紹 3 種結構化資料程式碼,如果是看到程式就頭痛的人,可以快轉到下個步驟:結構化資料測試工具

Step 2. 選擇並建立結構化資料標記(需要工程師協助)

Schema 語法格式介紹

Schema語法 1. JSON-LD

Google 支援的結構化資料格式語法為 JSON-LD、Microdata 微資料、RDFa 三種。

其中  JSON-LD 是 Google 官方最推薦使用的結構化資料語法,上面介紹的 Rank Math 外掛、結構化資料標記協助工具也都是使用  JSON-LD 格式。

JSON-LD 的特色與優點是,它位於網頁 HTML <head> 區塊中,不會和讀者在前台網頁看到的內容相互影響,方便撰寫與修改,不怕更動到既有的網頁內容。

此外,如果我們想在網頁增加 Schema 程式碼,因為涉及網頁前後端程式,通常會需要工程師的協助,但 JSON-LD 可以透過 GTM (Google 代碼管理工具)進行設定新增,跟較為複雜的 Microdata 和 RDF 相比,JSON-LD 對行銷人員是較好理解上手的語法。

以 FAQ 常見問題為例, JSON-LD 程式碼範例呈現如下: 

JSON-LD 程式碼範例

程式碼乍看之下有點複雜,讓我們拆解成兩個部分來看,幫助你理解:

(這邊只會簡單說明 JSON-LD 的語法結構,如果想了解完整教學,可以參考官方說明

1. 紅字部分:告訴 Google 你正在使用 Schema 結構化資料,以及使用的類型
@context”: “http://schema.org, (固定格式)
@type”: “FAQPage”, (此處填入你的 Schema 類型,例如 Product, Recipe…)

2. 綠字部分:增加 Schema 所需的相關內容
“@type”: “Question”, (內容的類型,例如 Question, Answer)
“name”: “結構化資料標記是什麼?”, (填入問題內容)

(小提醒:各個 Schema 需必填內容類型都不同,請參考 Google 的說明指南。內容類型盡量要填寫完整,如果資訊缺漏可能會讓 Google 無法判讀呈現)

Schema語法 2. Microdata 微資料

Microdata 微資料是增加在網頁既有的 HTML 內容中,不像 JSON-LD 是獨立的一段語法,因此在撰寫與修改上要比較仔細處理,以免更動到讀者可見的網頁內容。

我們一樣以 FAQ 常見問題為例, Microdata 程式碼範例呈現如下: 

Microdata 微資料

灰色字是既有的網頁內容,紅字與綠字是我們增加的 Microdata 語法:

1. 紅字:一樣要先告訴 Google 你正在使用 Schema 結構化資料,以及使用的類型

在 Microdata 中是以 itemscope itemtype 來表示

2. 綠字:以  itemprop=”mainEntity” , itemprop=”acceptedAnswer” 來標示此段內容的類型是屬於問題還是答案;以 itemprop=”name” , itemprop=”text” 來標示問題與答案的內容

Schema語法 3. RDFa

和 Microdata 微資料類似,RDFa 也是增加在網頁既有的 HTML 內容中,撰寫和修改時要特別注意。

繼續以 FAQ 常見問題為例,RDFa 程式碼範例呈現如下:

RDFa

RDFa 的語法結構和 Microdata 類似,灰色字是既有的網頁內容,紅字與綠字是我們增加的 語法:

1. 紅字:先以 vocab=”http://schema.org/” 告訴 Google 你正在使用 Schema 結構化資料,並以 typeof=”FAQPage” 表示你使用的 Schema 類型

2. 綠字:以 typeof 標示類型、property 標示敘述內容

Step 3. 結構化資料測試工具

建立好 Schema 語法後,來到最後一個步驟「檢查」。

剛開始設定結構化資料標記,若不熟悉難免會有程式碼錯誤的情況發生,為了避免設定錯誤,可以使用 Google 官方提供的複合式搜尋結果測試 Schema.org 工具進行結構化資料測試。(不論你在步驟二是使用哪種方法建立 Schema 語法,都建議要做檢查確認)

Google 複合式搜尋結果測試

Google 複合式搜尋結果測試

Google 官方提供的複合式搜尋結果測試,可以針對「網址」「代碼」進行檢查:

1. 網址:貼上已發布網頁的網址,檢查是否能被 Google 偵測到結構化資料標記

2. 代碼:若是自行撰寫生成的 Schema 程式碼,可以在頁面發布前,先把程式碼貼上檢查是否正確

Schema.org 結構化資料測試工具

Schema.org 結構化資料測試工具

Schema.org 主要可以檢查 Schema 程式碼是否有寫錯或是缺漏,如果工程師夥伴在結構化資料標記上較不熟悉,只要將網址或是程式碼貼上測試,就可以檢查 Schema 是否有標記錯誤、或是需要修改的地方(對於剛開始接觸 Schema 的人是個很實用的抓 bug 工具)

使用結構化資料常犯的2個錯誤

在網站 SEO 優化項目中,結構化資料標記涉及了較多程式碼相關知識,對於初次接觸的行銷人來說可能稍微複雜,不過只要理解了 Schema 的語法結構,再搭配官方說明與工具輔助,多試幾次一定能成功 ^^  這邊也整理了幾個新手使用結構化資料時,常見的迷思與誤區,希望能協助你更了解 Schema:

網站內容與Schema標記的內容不符

Google 希望透過多樣的複合式搜尋結果,讓使用者獲得更實用的資訊,如果網站提供的 Schema 無法提供正確有幫助的資訊,反而可能被 Google 認定為錯誤資訊、進而影響到網站的排名與權重。例如將 FAQ 常見問題的提問與回答,置入產品特色的宣傳文字,就不符合 Google 實用內容公正客觀的原則。

將許多無關的Schema標記放置在同一個網頁

Google 結構化資料標記並不是愈多愈好,選擇適合網頁內容的 Schema 類型,對搜尋引擎來說才有參考價值。舉例來說,如果你的網站是產品銷售頁面,就不需要設定到文章、食譜、影片等 Schema 標記。

結論

Google 結構化資料標記在 SEO 上是具有加分效果的重要項目,對於強化品牌信任感、提升用戶點擊互動都很好的效果,如果你有經營網站,了解結構化資料的運作原理、Schema 的類型、挑選適合自身網的設定方法,都是必不可少的重點。希望透過這篇文章,能夠幫助你在使用結構化資料時可以更順利,網站在 SEO 上也更具有競爭力 ^^


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK