Microdata提供機器化的程式更容易讀取網頁中要表達的內容。除了各大搜索引擎認可外，並且相容RDF與JSON數據格式。

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只會讀取文字敘述，並不會將文字敘述中包含的網頁語法列入考量，所以有些人想要透過加入<strong>或是<b>之類的標籤強化特定文字，對於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>

示範結果

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

JSON for Linking Data

我們會發現，在網頁語法中增加了那麼多的標籤，雖然幫助搜索引擎更瞭解我們的網頁，但是對於網頁畫面呈現於網友面前的結果並不會有不同處，對於html語法有精簡要求的工程師，這時候可以利用JSON for Linking Data將Microdata從html中抽離，透過<script type="application/ld+json">將Microdata宣告在script中，這樣html就少了許多標籤，寫作範例可以參考Google Developers JSON-LD。

<script type="application/ld+json">
 {
 "@context":"https://schema.org",
 "@type":"ProfessionalService",
 "@id":"www.cadch.com.tw",
 "name": "文網股份有限公司",
 "image":"https://www.cadch.com.tw/themes/CADCH_00013A/images/logo.png",
 "priceRange":"66000",
 "address":{
 "@type":"PostalAddress",
 "streetAddress":"環南路二段195號1樓",
 "addressLocality":"平鎮區",
 "addressRegion":"桃園市",
 "postalCode":"32443",
 "addressCountry":"TW"
 },
 "url": "https://www.cadch.com.tw/",
 "logo": "https://www.cadch.com.tw/themes/CADCH_00013A/images/logo.png",
 "description": "文網股份有限公司是一家網頁設計公司，以嚴謹的網頁語法協助國內外公司行號設計網站。",
 "email": "admin@cadch.com",
 "faxNumber": "034020420",
 "telephone": "034681000"
 }
 </script>

總結這一篇文章的教學，似乎其實就是為了SEO而寫，其實筆者並不鼓勵，網頁主要還是給使用者看的，增加第三方使用不外乎以行銷為出發，使用現行的HTML5標籤在網頁語法的設計面其實較為正確，但是為了網站的曝光量，還是得增加這些標籤。

• publisher:
• 文網股份有限公司
• 

  圖片尺寸240*240pixel