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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。