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

那這些詞彙怎麼編碼呢? 我今天就以 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 是電影名稱。

看懂了上方範例後，就要來說明今天的兩個重點，itemtype 與 itemprop。 Schema.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 也是基於 itemtype 與 itemprop 來標記訊息， 所以只要看一下編碼的用法，很快就可以上手。

延伸閱讀

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