在 HTML 中使用微資料

微資料是 WHATWG HTML 標準的一部分,用於在網頁的現有內容中巢狀元資料。搜尋引擎和網路爬蟲可以從網頁中提取和處理微資料,並將其用於為使用者提供更豐富的瀏覽體驗。搜尋引擎從直接訪問這些結構化資料中受益匪淺,因為它使搜尋引擎能夠理解網頁上的資訊併為使用者提供更相關的結果。微資料使用支援詞彙表來描述一個專案,並使用名稱-值對來為其屬性賦值。微資料試圖提供一種宣告式的方式,用機器可讀的標籤來註釋 HTML 元素,而不是使用 RDFa 和經典微格式的類似方法。

從宏觀角度看,微資料由一組名稱-值對組成。這些組被稱為專案,每個名稱-值對都是一個屬性。專案和屬性由常規元素表示。

  • 要建立一個專案,可以使用 itemscope 屬性。
  • 要向專案新增屬性,可以在專案的後代元素上使用 itemprop 屬性。

詞彙表

Google 和其他主要搜尋引擎支援 Schema.org 詞彙表用於結構化資料。該詞彙表定義了一組標準的型別名稱和屬性名稱,例如,Schema.org 音樂活動 表示一場音樂會表演,具有 startDatelocation 屬性來指定音樂會的主要細節。在這種情況下,Schema.org 音樂活動 將是 itemtype 使用的 URL,而 startDatelocation 將是 Schema.org 音樂活動 定義的 itemprop

注意: 有關 itemtype 屬性的更多資訊,請參閱 https://schema.org/Thing

微資料詞彙表提供了專案的語義或含義。Web 開發人員可以設計自定義詞彙表,也可以使用 Web 上可用的詞彙表,例如廣泛使用的 schema.org 詞彙表。Schema.org 提供了一系列常用的標記詞彙表。

常用詞彙表

Google、Microsoft 和 Yahoo! 等主要搜尋引擎運營商依賴 schema.org 詞彙表來改進搜尋結果。對於某些目的,臨時詞彙表就足夠了。對於其他目的,則需要設計詞彙表。在可能的情況下,鼓勵作者重用現有詞彙表,因為這使得內容重用更容易。

本地化

在某些情況下,覆蓋特定區域的搜尋引擎可能會提供特定於本地的微資料擴充套件。例如,俄羅斯的主要搜尋引擎 Yandex 支援 hCard(公司聯絡資訊)、hRecipe(食譜)、hReview(市場評論)和 hProduct(產品資料)等微格式,並提供自己的術語和百科全書文章定義格式。此擴充套件是為了解決西裡爾字母和拉丁字母之間的音譯問題。由於實施了 Schema 詞彙表的額外標記引數,俄語網頁中的資訊索引變得更加成功。

全域性屬性

itemid – 專案的唯一全域性識別符號。

itemprop – 用於向專案新增屬性。每個 HTML 元素都可以指定一個 itemprop 屬性,其中 itemprop 由一個名稱-值對組成。

itemref – 不帶 itemscope 屬性的元素的後代屬性可以使用 itemref 與專案關聯。itemref 提供了一個元素 ID 列表(不是 itemid),其中包含文件中其他位置的其他屬性。

itemscopeitemscope 屬性(通常)與 itemtype 一起使用,以指定塊中包含的 HTML 是關於特定專案的。itemscope 屬性建立專案並定義與之關聯的 itemtype 的範圍。itemtype 屬性是詞彙表(例如 schema.org)的有效 URL,用於描述專案及其屬性上下文。

itemtype – 指定將用於定義資料結構中 itemprop(專案屬性)的詞彙表的 URL。itemscope 屬性用於設定 itemtype 設定的詞彙表在資料結構中將活動的範圍。

示例

HTML

html
<div itemscope itemtype="https://schema.org/SoftwareApplication">
  <span itemprop="name">Angry Birds</span> - REQUIRES
  <span itemprop="operatingSystem">ANDROID</span><br />
  <link
    itemprop="applicationCategory"
    href="https://schema.org/SoftwareApplication" />

  <div
    itemprop="aggregateRating"
    itemscope
    itemtype="https://schema.org/AggregateRating">
    RATING:
    <span itemprop="ratingValue">4.6</span> (
    <span itemprop="ratingCount">8864</span> ratings )
  </div>

  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    Price: $<span itemprop="price">1.00</span>
    <meta itemprop="priceCurrency" content="USD" />
  </div>
</div>

結構化資料

itemscope itemtype 軟體應用程式 (https://schema.org/SoftwareApplication)
itemprop name 憤怒的小鳥
itemprop 作業系統 安卓
itemprop 應用類別 軟體應用程式 (https://schema.org/SoftwareApplication)
itemscope itemprop[itemtype] aggregateRating [聚合評分]
itemprop 評分值 4.6
itemprop 評分計數 8864
itemscope itemprop[itemtype] offers [優惠]
itemprop 價格 1.00
itemprop 貨幣 美元

結果

注意: 一個用於從 HTML 中提取微資料結構的便捷工具是 Google 的 結構化資料測試工具。請在上面顯示的 HTML 上試用它。

另見