HTML itemprop屬性用法及代碼示例

HTML itemprop 屬性是一個全局屬性，主要用於向項目添加屬性。這用於向網頁添加額外信息，以便搜索引擎可以更相關且更具體地搜索該網頁。

用法:

<div itemscope itemtype="URL">
   <span itemprop="itemNumber1">name of the item</span>
   <span itemprop="itemNumber2">name of the item</span>
</div>

以下示例演示了 HTML itemprop 屬性：

示例 1：在此示例中，項目屬性attribute 用於指定span 元素的屬性。它可以幫助搜索引擎理解 div 中的項目是關於 “geeksforgeeks” 的，其說明為“GeeksForGeeks 是一個很棒的網站，涵蓋了計算機科學領域大多數主題的文章”，並且有文章 “Dynamic programming”。

HTML


<!DOCTYPE html>
<html>
<body>
    <h1>GeeksForGeeks</h1>
    <h4>Articles</h4>
    <div itemscope itemtype=
         "http://geeksforgeeks.org">
        <span itemprop="description">
            GeeksForGeeks is an awesome 
            website that covers
            articles on majority of the 
            topics on Computer Science field
        </span>
        <br><br>
        Article : <span itemprop="article">
        Dynamic programming
      </span>
    </div>
</body>
</html>

輸出：

HTML itemprop 屬性

示例 2：在此示例中，搜索引擎可以理解給定的 div 具有包含 “Information” 的 URL，該 URL 涉及一部名為 “Avengers” 的電影，該電影屬於 “Action” 類型，由 “Russo Brothers” 執導。

HTML


<!DOCTYPE html>
<html>
<body>
    <div itemscope itemtype=
"https://en.wikipedia.org/wiki/Film">
        <h1 itemprop="name">Avengers</h1>
        <br>
        <span>Directors : 
            <span itemprop="Directors">
              Russo Brothers
            </span>
        </span> 
        <br>
        <span>Genre :
            <span itemprop="genre"> 
              Action 
            </span>
          </span>
        <br>
        <a itemprop="Information"
           href=
"https://en.wikipedia.org/wiki/Avengers_(Marvel_Cinematic_Universe)">
            Information 
        </a>
    </div>
</body>
</html>

輸出：

HTML itemprop 屬性

支持的瀏覽器：

穀歌瀏覽器
Microsoft Edge 12 及更高版本
Firefox
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自kamabokogonpachiro大神的英文原創作品 HTML itemprop Attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。