Microdata是幫助搜索引擎瞭解網頁的重要標籤

在W3C中特別提到

This specification defines the HTML microdata mechanism. This mechanism allows machine-readable data to be embedded in HTML documents in an easy-to-write manner, with an unambiguous parsing model. It is compatible with numerous other data formats including RDF and JSON.

要使用Microdata增加網頁的可讀性，需要有基本HTML概念，如果只會使用Dreamweaver視覺化方式設計網頁，而不會使用文字模式編寫網頁就不適合。

基礎網頁語法

首先需要使用itemscope標籤包裹itemprop屬性。

<div itemscope>
 <p>我的名字叫<span itemprop="name">王大明</span>。</p>
 </div>
 
 <div itemscope>
 <p>作者的名字是<span itemprop="name">張銘倫</span>。</p>
 </div>

在itemprop屬性中如果包含其他html語法不會影響Microdata讀取結果，Microdata只會讀取文字敘述，並不會將文字敘述中包含的網頁語法列入考量，所以有些人想要透過加入或是之類的標籤強化特定文字，對於Microdata來說是多餘的。

進階Typed items語法
有些第三方單位，特別將Microdata進行了分類，以便更清楚的將資訊顯示在他們的數據庫中，這時候我們需要使用itemtype這個標籤將第三方的類別網址引入，最具指標性的單位就是Schema.org。
在Schema.org的網站中提到：
Schema.org is sponsored by Google, Microsoft, Yahoo and Yandex. The vocabularies are developed by an open community process, using the public-schemaorg@w3.org mailing list and through GitHub.
目前較知名的搜索引擎 Google, Microsoft, Yahoo 和 Yandex都支持Schema.org。

所以為了讓這幾個搜索引擎更方便瞭解我們的網頁，似乎itemtype這個標籤是很重要的，我們可以進入schema.org的Full Hierarchy查看支援那些分類項目。

<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">CADCH牌攝影機</span>
<img src="CADCH-camera.jpg" alt="照片描述">
<div itemprop="aggregateRating"
itemscope itemtype="http://schema.org/AggregateRating">
<meter itemprop="ratingValue" min=0 value=6 max=10>分數 6/10</meter>
(根據 <span itemprop="reviewCount">19</span> 個網友的評價)
</div>
</div>

示範結果

CADCH牌攝影機
分數 6/10 (根據 19 個網友的評價)

因為每個分類項目有不同的itemprop屬性需求，我們可以利用Google提供的結構化資料測試工具或複合式搜尋結果測試測試我們寫的網頁是否有缺漏的宣告或是該分類有建議的itemprop屬性，透過線上檢測工具可以針對結果改善網頁設計。

JSON for Linking Data
我們會發現，在網頁語法中增加了那麼多的標籤，雖然幫助搜索引擎更瞭解我們的網頁，但是對於網頁畫面呈現於網友面前的結果並不會有不同處，對於html語法有精簡要求的工程師，這時候可以利用JSON for Linking Data將Microdata從html中抽離，透過

上一篇

下一篇

Tag:

網站排名