今天講的是如何讓搜尋引擎了解網頁的內容,而這就一定要提到 Schema.orgSchema.org 這個組織呢,他們定義的統一詞彙,我們稱之為 Schema 語意標記(Schema Semantic Markup),這些詞彙可以讓搜尋引擎了解網頁的內容。 將這些詞彙編碼成搜尋引擎可以看懂的方式有 MicrodataJSON-LDRDFa 等等…

那這些詞彙怎麼編碼呢? 我今天就以 Microdata 來說明,請參考下方 HTML

Microdata sample
  • html
1
2
3
4
5
6
<div itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

這段 HTML 有三個重點,首先是 itemscope ,用來說明這各 div 底下的資訊都是同一個範圍。 第二個重點是 itemtype,用來定義這個資訊是屬於哪一種類別,以上方範例來說是電影的類別,最後是 itemprop,用來定義這段文字的資訊是屬於什麼,例如 <h1 itemprop="name">Avatar</h1> 就是說明 Avatar 是電影名稱。

看懂了上方範例後,就要來說明今天的兩個重點,itemtypeitempropSchema.org 定義了 itemtype 有哪些,且每一個 itemtype 底下都有屬於它的 itemprop

接下來讓我來說明,怎麼看 Schema.org 所列的 itemtype 使用方式,該網頁列出了所有的 itemtype,如下圖紅色框起來的地方。

Full Hierarchy of itemtypeFull Hierarchy of itemtype

如果我們想要標明這段訊息是屬於遊戲,就可以去找 itemtype 是否有遊戲這個分類,然後你就會找到他有一個 Game 的分類,如下圖

game itemtypegame itemtype

所以這時候你就可以使用 itemtype ="http://schema.org/Game" 來表示我這段訊息是遊戲。 我們點下 Game 連結後,就可以看到 Game 有哪些 itemprop 可以使用
game itempropgame itemprop

例如,我想要說明這個遊戲是幾個人玩的,我們可以使用 Game 提供的 property numberOfPlayers 如下方的寫法

numberOfPlayers
  • html
1
2
3
<section itemscope itemtype="http://schema.org/Game">
<div itemprop="numberOfPlayers">For <span itemprop="minValue">3</span> to <span itemprop="maxValue">5</span> players.</div>.
</section>

詳細範例可以參考這裡 https://schema.org/Game#examples

小結

今天只說明了 Microdata 的用法,但是只要知道其他的編碼方式,如 JSON-LD 也是基於 itemtypeitemprop 來標記訊息, 所以只要看一下編碼的用法,很快就可以上手。

延伸閱讀

[Getting started with schema.org using Microdata]
[A free guide to HTML5 head elements]