itemprop

itemprop 全域性屬性 用於向專案新增屬性。每個 HTML 元素都可以指定 itemprop 屬性，並且 itemprop 由一個名稱-值對組成。每個名稱-值對稱為一個屬性，一個或多個屬性的組合形成一個專案。屬性值可以是字串或 URL，並且可以與非常廣泛的元素相關聯，包括 <audio>、<embed>、<iframe>、<img>、<link>、<object>、<source>、<track> 和 <video>。

示例

下面的示例顯示了一組使用 itemprop 屬性標記的元素的原始碼，以及一個顯示結果結構化資料的表格。

HTML

html
<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>
    Director:
    <span itemprop="director">James Cameron</span>
    (born August 16, 1954)
  </span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">
    Trailer
  </a>
</div>

結構化資料

專案
itemprop 名稱 itemprop 值
itemprop 名稱 阿凡達
itemprop 導演 詹姆斯·卡梅隆
itemprop 型別 科幻
itemprop 預告片 ../movies/avatar-theatrical-trailer.html

屬性

屬性的值可以是字串或 URL。當字串值為 URL 時，它使用 <a> 元素及其 href 屬性、<img> 元素及其 src 屬性或其他連結到或嵌入外部資源的元素來表示。

三個值為字串的屬性

html
<div itemscope>
  <p>My name is <span itemprop="name">Neil</span>.</p>
  <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
  <p>I am <span itemprop="nationality">British</span>.</p>
</div>

一個屬性“image”，其值為 URL

html
<div itemscope>
  <img itemprop="image" src="google-logo.png" alt="Google" />
</div>

當字串值不容易被人理解和閱讀時（例如，一長串數字和字母），可以使用 data 元素的 value 屬性顯示它，並在元素的內容中提供更容易被人理解的版本（這並不屬於結構化資料 - 請參見下面的示例）。

一個屬性值為產品 ID 的專案

ID 對人並不友好，因此改為使用產品的名稱。

html
<h1 itemscope>
  <data itemprop="product-id" value="9678AOU879">The Instigator 2000</data>
</h1>

對於數值資料，可以使用 meter 元素及其 value 屬性。

一個 meter 元素

html
<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Panasonic White 60L Refrigerator</span>
  <img src="panasonic-fridge-60l-white.jpg" alt="" />
  <div
    itemprop="aggregateRating"
    itemscope
    itemtype="http://schema.org/AggregateRating">
    <meter itemprop="ratingValue" min="0" value="3.5" max="5">
      Rated 3.5/5
    </meter>
    (based on <span itemprop="reviewCount">11</span>
    customer reviews)
  </div>
</div>

類似地，對於日期和時間相關資料，可以使用 time 元素及其 datetime 屬性。

一個專案，有一個屬性“birthday”，其值為日期

html
<div itemscope>
  I was born on
  <time itemprop="birthday" datetime="1984-05-10">May 10th 1984</time>.
</div>

屬性也可以是名稱-值對的組，方法是在宣告該屬性的元素上放置 itemscope 屬性。每個值可以是字串或名稱-值對的組（即專案）。

一個代表人的外部專案，以及一個代表樂隊的內部專案

html
<div itemscope>
  <p>Name: <span itemprop="name">Amanda</span></p>
  <p>
    Band:
    <span itemprop="band" itemscope>
      <span itemprop="name">Jazz Band</span>
      (<span itemprop="size">12</span> players)
    </span>
  </p>
</div>

上面的外部專案有兩個屬性，“name”和“band”。“name”是“Amanda”，“band”本身就是一個專案，有兩個屬性，“name”和“size”。樂隊的“name”是“Jazz Band”，“size”是“12”。此示例中的外部專案是頂級微資料專案。不屬於其他專案的專案稱為頂級微資料專案。

所有屬性與其專案分離

此示例與前一個示例相同，但所有屬性都與其專案分離。

html
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
  <p>Band: <span itemprop="name">Jazz Band</span></p>
  <p>Size: <span itemprop="size">12</span> players</p>
</div>

這與前一個示例產生相同的結果。第一個專案有兩個屬性，“name”，設定為“Amanda”，以及“band”，設定為另一個專案。第二個專案還有兩個屬性，“name”，設定為“Jazz Band”，以及“size”，設定為“12”。

一個專案可以有多個具有相同名稱但不同值的屬性。

帶有兩種口味的冰淇淋

html
<div itemscope>
  <p>Flavors in my favorite ice cream:</p>
  <ul>
    <li itemprop="flavor">Lemon sorbet</li>
    <li itemprop="flavor">Apricot sorbet</li>
  </ul>
</div>

這將導致一個專案有兩個屬性，都名為“flavor”，分別具有“Lemon sorbet”和“Apricot sorbet”的值。

引入屬性的元素也可以一次引入多個屬性，以避免在某些屬性具有相同值時出現重複。

一個專案有兩個屬性，“favorite-color”和“favorite-fruit”，都設定為值“orange”

html
<div itemscope>
  <span
    itemprop="favorite-color
    favorite-fruit"
    >orange
  </span>
</div>

注意：微資料與標記微資料的文件內容之間沒有關係。

以兩種不同方式標記的相同結構化資料

以下兩個示例之間沒有語義差異

html
<figure>
  <img src="castle.jpeg" />
  <figcaption>
    <span itemscope><span itemprop="name">The Castle</span></span> (1986)
  </figcaption>
</figure>
html
<span itemscope><meta itemprop="name" content="The Castle" /></span>
<figure>
  <img src="castle.jpeg" />
  <figcaption>The Castle (1986)</figcaption>
</figure>

兩者都有一個帶有標題的圖形，並且兩者都與圖形完全無關，都包含一個名稱-值對的專案，名稱為“name”，值為“The Castle”。唯一的區別是，如果使用者將 figcaption 從文件中拖出，則該專案將包含在拖放資料中。與該專案關聯的影像將不會包含在內。

名稱和值

屬性是一組無序的唯一標記，這些標記區分大小寫並表示名稱-值對。屬性值必須至少包含一個標記。在下面的示例中，每個資料單元格都是一個標記。

名稱示例

專案
itemprop 名稱 itemprop 值
itemprop 國家 愛爾蘭
itemprop 選項 2
itemprop https://www.flickr.com/photos/nlireland/6992065114/ 凱里環
itemprop img https://www.flickr.com/photos/nlireland/6992065114/
itemprop 網站 flickr
itemprop （標記） （標記）

標記可以是字串或 URL。如果專案是 URL，則稱為型別化專案。否則，它是一個字串。字串不能包含句點或冒號（見下文）。

  1. 如果專案是型別化專案，則它必須是：
    1. 一個已定義的屬性名稱，或者
    2. 一個有效的 URL，它引用詞彙表定義，或者
    3. 一個用作專有專案屬性名稱的有效 URL（即未在公共規範中定義的 URL），或者
  2. 如果專案不是型別化專案，則它必須是：
    1. 一個不包含“.”（U+002E FULL STOP）字元和“:”（U+003A COLON）字元的字串，並用作專有專案屬性名稱（同樣，未在公共規範中定義）。

注意：上述規則不允許非 URL 值中使用“:”字元，因為否則無法將其與 URL 區分。包含“.”字元的值保留供將來擴充套件使用。空格字元不允許使用，因為否則值將被解析為多個標記。

值

名稱-值對的屬性值如下列列表中第一個匹配的情況所示：

  • 如果元素具有 itemscope 屬性
    • 該值為元素建立的專案
  • 如果元素是 meta 元素
    • 該值為元素 content 屬性的值
  • 如果元素是 audio、embed、iframe、img、source、track 或 video 元素
    • 該值為解析元素 src 屬性的值（相對於元素的節點文件（Microdata DOM API 的一部分））在設定該屬性時獲得的結果 URL 字串
  • 如果元素是 a、area 或 link 元素
    • 該值為解析元素 href 屬性的值（相對於元素的節點文件）在設定該屬性時獲得的結果 URL 字串
  • 如果元素是 object 元素
    • 該值為解析元素 data 屬性的值（相對於元素的節點文件）在設定該屬性時獲得的結果 URL 字串
  • 如果元素是 data 元素
    • 該值為元素 value 屬性的值
  • 如果元素是 meter 元素
    • 該值為元素 value 屬性的值
  • 如果元素是 time 元素
    • 該值為元素的 datetime 值

否則

  • 該值為元素的textContent。

如果屬性的值是 URL，則必須使用 URL 屬性元素指定該屬性。URL 屬性元素是 a、area、audio、embed、iframe、img、link、object、source、track 和 video 元素。

名稱順序

名稱彼此之間是無序的，但如果特定名稱具有多個值，則它們確實具有相對順序。

在下面的示例中，“a”屬性的值為“1”和“2”，按此順序，但“a”屬性是否在“b”屬性之前並不重要。

html
<div itemscope>
  <p itemprop="a">1</p>
  <p itemprop="a">2</p>
  <p itemprop="b">test</p>
</div>

以下是一些等效示例

html
<div itemscope>
  <p itemprop="b">test</p>
  <p itemprop="a">1</p>
  <p itemprop="a">2</p>
</div>
html
<div itemscope>
  <p itemprop="a">1</p>
  <p itemprop="b">test</p>
  <p itemprop="a">2</p>
</div>
html
<div id="x">
  <p itemprop="a">1</p>
</div>
<div itemscope itemref="x">
  <p itemprop="b">test</p>
  <p itemprop="a">2</p>
</div>

表示書籍的結構化資料

此示例使用微資料屬性來表示以下結構化資料

itemscope itemtype: itemid https://schema.org/Book: urn:isbn:0-374-22848-5
itemprop title 東部冰原上的貓頭鷹
itemprop 作者 喬納森·C·斯萊特
itemprop 出版日期 2020-08-04

HTML

html
<dl
  itemscope
  itemtype="https://schema.org/Book"
  itemid="urn:isbn:0-374-22848-5<">
  <dt>Title</dt>
  <dd itemprop="title">Owls of the Eastern Ice</dd>
  <dt>Author</dt>
  <dd itemprop="author">Jonathan C Slaght</dd>
  <dt>Publication date</dt>
  <dd>
    <time itemprop="datePublished" datetime="2020-08-04">August 4 2020</time>
  </dd>
</dl>

結果

規範

規範
HTML 標準
# names:-the-itemprop-attribute

另請參閱