2015年8月8日 星期六

Microdata:itemscope 應用


網頁不僅僅是給人觀看的,同時也必須讓搜尋引擎讀懂。
Microdata就是因應這個需求而存在, 是一套由Google、Yahoo、Bing攜手推出的標準格式。
所謂Microdata其實就是HTML的一部分,透過既定格式的標註,
讓搜尋引擎的在檢索你的網站時,能夠透過這些標註了解該段html的內容究竟是在講什麼類型的資訊,進而幫助搜尋引擎建立索引。
例如下方這段HTML
<div >

<h3>網誌標題</h3>

<div>網誌文章內容...</div>

<img src="網誌圖片.jpg" />

</div>

加上Microdata後的HTML
<div itemscope itemtype='http://schema.org/BlogPosting'>

<meta content='2015-08-07T11:21:00-07:00' itemprop='datePublished'/>

<h3 itemprop='headline'>網誌標題</h3>

<div  itemprop='articleBody'>網誌文章內容...</div>

<img itemprop="image" src="網誌圖片內容.jpg" />

</div>
itemscope 若這個DOM要給搜尋引擎識別,必須加上這個屬性
itemtype 通常會放在跟itemscope同一個element,宣告該區內容的類別,Schema.org所制定的類別可以參考 schema.org Vocabulary
itemprop 用來詳細描述這個Type內的屬性的內容,有些Type有必要的itemprop
此外,Google Developer有提供Microdata結構驗證工具,可以驗證你的網頁的microdata寫法是否有誤