[SEO] 開發人員必懂的 SEO 第九集 - Schema 語意標記
今天講的是如何讓搜尋引擎了解網頁的內容,而這就一定要提到 Schema.org。 Schema.org 這個組織呢,他們定義的統一詞彙,我們稱之為 Schema 語意標記(Schema Semantic Markup),這些詞彙可以讓搜尋引擎了解網頁的內容。 將這些詞彙編碼成搜尋引擎可以看懂的方式有 Microdata、JSON-LD 或 RDFa 等等…
那這些詞彙怎麼編碼呢? 我今天就以 Microdata 來說明,請參考下方 HTML
- html
1 | <div itemscope itemtype ="http://schema.org/Movie"> |
這段 HTML 有三個重點,首先是 itemscope
,用來說明這各 div 底下的資訊都是同一個範圍。 第二個重點是 itemtype
,用來定義這個資訊是屬於哪一種類別,以上方範例來說是電影的類別,最後是 itemprop
,用來定義這段文字的資訊是屬於什麼,例如 <h1 itemprop="name">Avatar</h1>
就是說明 Avatar 是電影名稱。
看懂了上方範例後,就要來說明今天的兩個重點,itemtype
與 itemprop
。 Schema.org 定義了 itemtype
有哪些,且每一個 itemtype
底下都有屬於它的 itemprop
。
接下來讓我來說明,怎麼看 Schema.org 所列的 itemtype
使用方式,該網頁列出了所有的 itemtype
,如下圖紅色框起來的地方。
如果我們想要標明這段訊息是屬於遊戲,就可以去找 itemtype
是否有遊戲這個分類,然後你就會找到他有一個 Game 的分類,如下圖
所以這時候你就可以使用
itemtype ="http://schema.org/Game"
來表示我這段訊息是遊戲。 我們點下 Game 連結後,就可以看到 Game 有哪些 itemprop
可以使用例如,我想要說明這個遊戲是幾個人玩的,我們可以使用 Game 提供的 property
numberOfPlayers
如下方的寫法
- html
1 | <section itemscope itemtype="http://schema.org/Game"> |
詳細範例可以參考這裡 https://schema.org/Game#examples
小結
今天只說明了 Microdata 的用法,但是只要知道其他的編碼方式,如 JSON-LD 也是基於 itemtype
與 itemprop
來標記訊息, 所以只要看一下編碼的用法,很快就可以上手。
延伸閱讀
[Getting started with schema.org using Microdata]
[A free guide to HTML5 head elements]