使用Microdata開始使用schema.org

大多數網站管理員都熟悉其網頁上的HTML標記。通常，HTML標記告訴瀏覽器如何顯示標記中包含的信息。例如，<h1>Avatar</h1>告訴瀏覽器以標題1格式顯示文本字符串“Avatar”。但是，HTML標記沒有提供有關該文本字符串含義的任何信息 - “阿凡達”可以引用非常成功的3D電影，或者它可以引用一種類型的個人資料圖片 - 這可能使搜索更加困難引擎智能地向用戶顯示相關內容。

Schema.org提供了一組共享詞彙表，網站管理員可以使用這些詞彙表以主要搜索引擎可以理解的方式標記他們的頁面：Google，Microsoft，Yandex和Yahoo!

您可以使用schema.org詞彙表以及Microdata，RDFa或 JSON-LD格式向Web內容添加信息。本指南將幫助您快速了解Microdata和schema.org，以便您可以開始向網頁添加標記。

雖然本指南側重於Microdata，但schema.org網站上的大多數示例也顯示了RDFa和JSON-LD中的示例。這裡介紹的基本思想（類型，屬性等）與Microdata相關 - 請參閱示例以了解詳細信息的比較。

1.如何使用微數據標記您的內容

1A。為什麼要使用微數據？

您的網頁具有人們在閱讀網頁時理解的潛在含義。但搜索引擎對這些頁面上討論的內容的理解有限。通過在網頁的HTML中添加其他標籤 - 標籤，即“嘿搜索引擎，此信息描述此特定電影，地點，人物或視頻” - 您可以幫助搜索引擎和其他應用程序更好地了解您的內容並以有用，相關的方式顯示它。Microdata是一組HTML5引入的標籤，允許您這樣做。

1B。itemscope和itemtype

讓我們從一個具體的例子開始。想像一下，你有一個關於電影阿凡達的頁面 - 一個帶有電影預告片鏈接的頁面，有關導演的信息，等等。您的HTML代碼可能如下所示：

<DIV>
 <H1>頭像</ H1>
 <span>導演：詹姆斯卡梅隆（1954年8月16日出生）</ span>
 <span>科幻小說</ span>
 <a href="../movies/avatar-theatrical-trailer.html">預告片</a>
</ DIV>

首先，確定頁面中關於電影“阿凡達”的部分。為此，請將itemscope元素添加到HTML標記中，該標記包含有關項目的信息，如下所示：

<div itemscope >
  <H1>頭像</ H1>
  <span>導演：詹姆斯卡梅隆（1954年8月16日出生）</ span>
  <span>科幻小說</ span>
  <a href="../movies/avatar-theatrical-trailer.html">預告片</a>
</ DIV>

通過添加itemscope，您指定<div>...</div>塊中包含的HTML 是關於特定項目的。

但是，指定正在討論的項目而不指定它是什麼類型的項目並不是那麼有用。您可以在使用itemtype後立即使用該屬性指定項目類型itemscope。

<div itemscope itemtype =“http://schema.org/Movie” >
  <H1>頭像</ H1>
  <span>導演：詹姆斯卡梅隆（1954年8月16日出生）</ span>
  <span>科幻小說</ span>
  <a href="../movies/avatar-theatrical-trailer.html">預告片</a>
</ DIV>

這指定div中包含的項實際上是一個Movie，如schema.org類型層次結構中所定義。在這種情況下，項目類型以URL的形式提供http://schema.org/Movie。

回到頂部

1C。itemprop

我們可以向搜索引擎提供有關電影“阿凡達”的更多信息嗎？電影有很有趣的屬性，如演員，導演，收視率。要標記項的itemprop屬性，請使用該屬性。例如，要識別電影的導演，請添加itemprop="director"到包含導演姓名的元素。（在http://schema.org/Movie上有一個可以與電影關聯的所有屬性的完整列表。）

<div itemscope itemtype =“http://schema.org/Movie”>
  <h1 itemprop =“name” >頭像</ h1>
  <span>導演：<span itemprop =“director” >詹姆斯卡梅隆</ span>（1954年8月16日出生）</ span>
  <span itemprop =“genre” >科幻小說</ span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">預告片</a>
</ DIV>

請注意，我們添加了其他<span>...</span>標記以將itemprop 屬性附加到頁面上的相應文本。<span>標籤不會改變Web瀏覽器呈現頁面的方式，因此它們是一個方便的HTML元素itemprop。

搜索引擎現在不僅可以理解http://www.avatarmovie.com是一個URL，而且還可以理解它是由James Cameron執導的科幻電影“阿凡達”的預告片的URL。

回到頂部

1D。嵌入式物品

有時，item屬性的值本身可以是具有自己的屬性集的另一個項。例如，我們可以指定電影的導演是Person類型的項目，Person具有屬性name和birthDate。要指定屬性的值是另一個項目，請itemscope在相應的項目後立即開始新項目itemprop。

<div itemscope itemtype =“http://schema.org/Movie”>
  <h1 itemprop =“name”>頭像</ h1>
  <div itemprop =“director”itemscope itemtype =“http://schema.org/Person” >
  導演：<span itemprop =“name”> James Cameron </ span>（出生<span itemprop =“birthDate” > 1954年8月16日</ span>）
  </ DIV>
  <span itemprop =“genre”>科幻小說</ span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">預告片</a>
</ DIV>

回到頂部

2.使用schema.org詞彙表

2A。schema.org類型和屬性

並非所有網頁都與電影和人物有關 - 除了第1部分中描述的電影和人物類型之外，schema.org還描述了各種其他項目類型，每種類型都有自己的一組屬性，可用於描述項目。

最寬的項類型是東西，它具有四個屬性：name，description，url，和image。更具體的類型與更廣泛的類型共享屬性。例如，Place是更具體的Thing類型，LocalBusiness是更具體的Place類型。更具體的項繼承其父項的屬性。（實際上，LocalBusiness是一種更具體的Place類型和更具體的Organization類型，因此它從兩種父類型繼承屬性。）

這是一組常用的項目類型：

創意作品：CreativeWork，Book，Movie，MusicRecording，Recipe，TVSeries ......
嵌入的非文本對象：AudioObject，ImageObject，VideoObject
事件
組織
人
Place，LocalBusiness，餐廳 ......
產品，優惠，AggregateOffer
評論，AggregateRating

您還可以在單個頁面上查看所有項目類型的完整列表。

回到頂部

2B。預期的類型，文本和URL

在向您的網頁添加schema.org標記時，請記住以下幾點注意事項。

除隱藏文本外，更多更好。通常，您標記的內容越多越好。但是，作為一般規則，您應該僅標記訪問網頁的人可見的內容，而不是隱藏div或其他隱藏頁面元素中的內容。
預期類型與文本。瀏覽schema.org類型時，您會注意到許多屬性具有“預期類型”。這意味著屬性的值本身可以是嵌入項（請參閱第1d節：嵌入項）。但這不是一個要求 - 只包括常規文本或URL。此外，只要指定了預期的類型，嵌入一個作為期望類型的子類型的項也是可以的。例如，如果期望的類型是Place，則嵌入LocalBusiness也可以。
使用url屬性。有些網頁是關於特定項目的。例如，您可能有一個關於單個人的網頁，您可以使用“人員”項目類型進行標記。其他頁面上有一系列描述的項目。例如，您的公司站點可以有一個列出員工的頁面，其中包含指向每個人的個人資料頁面的鏈接。對於具有項目集合的此類頁面，您應該單獨標記每個項目（在本例中為一系列人員），並將url屬性添加到每個項目的相應頁面的鏈接，如下所示：
```
<div itemscope itemtype =“http://schema.org/Person”>
  <a href="alice.html" itemprop="url"> Alice Jones </a>
</ DIV>
<div itemscope itemtype =“http://schema.org/Person”>
  <a href="bob.html" itemprop="url"> Bob Smith </a>
</ DIV>
```

回到頂部

2C。測試你的標記

就像Web瀏覽器對於測試Web頁面佈局的更改非常重要，並且代碼編譯器對於測試您編寫的代碼非常重要，您還應該測試schema.org標記以確保它正確實現。Google提供了豐富的代碼段測試工具，您可以使用它來測試標記並識別任何錯誤。

3.高級主題：機器可理解的信息版本

許多頁面可以僅使用來描述itemscope，itemtype和itemprop屬性（在部分1中所描述）與schema.org定義的類型和屬性沿（在部分2中所述）。

然而，有時一個物品屬性很難讓機器理解而沒有額外的消歧。本節介紹在標記頁面時如何提供機器可理解的信息版本。

日期，時間和持續時間：使用time標籤datetime
枚舉和規範引用：使用link標記href
缺失/隱含信息：使用meta標記content。

回到頂部

3A。日期，時間和持續時間：將時間標記與日期時間一起使用

機器難以理解日期和時間。考慮日期“04/01/11”。這是指2004年1月11日嗎？2011年1月4日？還是2011年4月1日？要使日期明確無誤，請將time標記與datetime屬性一起使用。datetime屬性的值是使用YYYY-MM-DDformat 指定的日期。下面的HTML代碼明確指定日期為2011年4月1日。

<time datetime =“2011-04-01”> 04/01/11 </ time>

您還可以使用hh:mm或hh:mm:ss格式指定一天內的時間。時間以字母為前綴，T可以與日期一起提供，如下所示：

<time datetime =“2011-05-08T19：30”> 5月8日，晚上7:30 </ time>

讓我們在上下文中看到這一點。這是一些描述2011年5月8日舉行的音樂會的HTML。事件標記包括事件的名稱，描述和事件的日期。

<div itemscope itemtype =“http://schema.org/Event” >
  <div itemprop =“name” > Spinal Tap </ div>
  <span itemprop =“description” >有史以來最響亮的樂隊之一
  重聚一場難忘的為期兩天的演出。</ span>
  活動日期：
  <time itemprop =“startDate”datetime =“2011-05-08T19：30”> 5月8日，7 ：30 </ time> 
</ div>

可以使用time帶有datetime屬性的標記以類似的方式指定持續時間。持續時間以字母為前綴P（代表“期間”）。以下是如何指定1½小時的食譜烹飪時間：

<time itemprop =“cookTime” datetime =“PT1H30M” > 1 1/2小時</ time>

H用於指定小時數，M用於指定分鐘數。

日期，時間和持續時間標準由ISO 8601日期/時間標準指定。

回到頂部

3B。枚舉和規範引用：使用與href的鏈接

枚舉

某些屬性只能使用一組有限的可能值。程序員經常將這些稱為“枚舉”。例如，要出售的物品在線商店可以使用優惠項目類型指定要約的細節。該availability屬性通常只能有幾個可能的值-之一In stock，Out of stock，Pre-order，等等。與項類型指定為URL非常相似，schema.org上枚舉的可能值也可以指定為URL。

這是一個待售商品，標有要約類型和相關屬性：

<div itemscope itemtype =“http://schema.org/Offer”>
  <span itemprop =“name”> Blend-O-Matic </ span>
  <span itemprop =“price”> 19.95美元</ span>
  <span itemprop =“availability”>今天上市！</ span>
</ DIV>

這裡是相同的項目，但使用link和href明確指定可用性作為允許值之一：

<div itemscope itemtype =“http://schema.org/Offer”>
  <span itemprop =“name”> Blend-O-Matic </ span>
  <span itemprop =“price”> 19.95美元</ span>
  <link itemprop =“availability”href =“http://schema.org/InStock”/>今天上市！
</ DIV>

Schema.org提供了少數屬性的枚舉 - 通常在屬性的典型值有限的任何地方，schema.org中都指定了相應的枚舉。在這種情況下，可能的值availability在ItemAvailability中指定。

規範參考

通常，使用<a>元素指定鏈接。例如，以下HTML鏈接到“麥田裡的守望者”一書的維基百科頁面。

<div itemscope itemtype =“http://schema.org/Book”>
  <span itemprop =“name”>麥田裡的守望者</ span>  - 
  通過<span itemprop =“author”> JD Salinger </ span>
  這是本書的<a itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">維基百科頁面</a>。
</ DIV>

如您所見，itemprop="url"可用於指定指向另一個站點（在本例中為Wikipedia）討論相同項目的頁面的鏈接。指向第三方網站的鏈接可以幫助搜索引擎更好地理解您在網頁上描述的項目。

但是，您可能不希望在頁面上添加可見鏈接。在這種情況下，您可以使用link元素，如下所示：

<div itemscope itemtype =“http://schema.org/Book”>
  <span itemprop =“name”>麥田裡的守望者</ span>  - 
  <link itemprop =“url”href =“http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye”/>
  通過<span itemprop =“author”> JD Salinger </ span>
</ DIV>

回到頂部

3C。缺失/隱含信息：將元標記與內容一起使用

有時，網頁包含有助於標記的信息，但由於信息在頁面上的顯示方式，因此無法標記信息。信息可以在圖像中傳達（例如，用於表示5分中4分的圖像）或Flash對象（例如，視頻剪輯的持續時間），或者可以暗示但未明確說明在頁面上（例如，價格的貨幣）。

在這些情況下，請使用meta標記和content屬性來指定信息。考慮這個例子 - 該圖像向用戶顯示4星評價為5星：

<div itemscope itemtype =“http://schema.org/Offer”>
  <span itemprop =“name”> Blend-O-Matic </ span>
  <span itemprop =“price”> 19.95美元</ span>
  <img src =“four-stars.jpg”/>
  基於25個用戶評分
</ DIV>

這裡再次舉例說明了評級信息。

<div itemscope itemtype =“http://schema.org/Offer”>
  <span itemprop =“name”> Blend-O-Matic </ span>
  <span itemprop =“price”> 19.95美元</ span>
  <div itemprop =“reviews”itemscope itemtype =“http://schema.org/AggregateRating” >
    <img src =“four-stars.jpg”/>
    <meta itemprop =“ratingValue”content =“4”/> 
    <meta itemprop =“bestRating”content =“5”/> 
    基於<span itemprop =“ratingCount” > 25 </ span>用戶評分
  </ DIV>
</ DIV>

應該謹慎使用這種技術。僅用於meta內容以獲取無法以其他方式標記的信息。

回到頂部

3D。擴展schema.org

大多數網站和組織都沒有理由擴展schema.org。但是，schema.org提供了為現有類型指定其他屬性或子類型的功能。如果您對此感興趣，請閱讀有關schema.org擴展機制的更多信息。

阿拉丁酒瓶雕刻生日禮物結婚禮物

生日禮物結婚禮物阿拉丁瓶雕

2018年7月29日星期日