HTML 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	name	阿凡達
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	country	愛爾蘭
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. 一個已定義的屬性名稱，或者
2. 一個有效的 URL，它引用詞彙表定義，或者
3. 一個有效的 URL，用作專有專案屬性名稱（即，未在公共規範中定義的名稱），或者
如果專案不是型別化專案，則必須是
1. 一個不包含 .（U+002E 句號）字元和 : 字元（U+003A 冒號）的字串，並用作專有專案屬性名稱（同樣，未在公共規範中定義的名稱）。

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

值

名稱-值對的屬性值按照以下列表中的第一個匹配情況給出

如果元素具有 itemscope 屬性
- 該值是元素建立的專案
如果元素是 meta 元素
- 該值是元素的 content 屬性的值
如果元素是 audio、embed、iframe、img、source、track 或 video 元素
- 該值是解析元素 src 屬性的值相對於元素節點文件（微資料 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	author	Jonathan C Slaght
	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 # 名稱：-itemprop-屬性

另見

其他不同的全域性屬性
其他與微資料相關的全域性屬性

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 2025 年 7 月 9 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題