schema.org SiteNavigationElement的正确用法是什么？

Question

在SEO方面......

是否最好将该方案放在包含所有链接的父级上？

<nav itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</nav>

......或者每个链接应该被视为它自己的元素吗？

<nav>
    <span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
        <a itemprop="url" href="#">
            <span itemprop="name">Link 1</span>
        </a>
    </span>
    <span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
        <a itemprop="url" href="#">
            <span itemprop="name">Link 2</span>
        </a>
    </span>
    <span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
        <a itemprop="url" href="#">
            <span itemprop="name">Link 3</span>
        </a>
    </span>
</nav>

Answer 1

如果SiteNavigationElement用于整个导航（即导航链接列表），那么您的第一个示例是正确的。

如果SiteNavigationElement用于单个导航条目（即导航链接列表中的链接），则第二个示例是正确的。

我认为Schema.org没有明确定义哪个变体意味着什么，因为他们只说：

页面的导航元素。

但是，父类型WebPageElement定义为：

网页元素，如表格或图像

此外，所有其他子类型（如Table或WPFooter）似乎都用于整个事物，而不是事物的特定部分。

所以这似乎表明应该标记整个导航，而不是每个单独的链接：

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
  <li><a href="/link-1">Link 1</a></li> <!-- don’t use the 'url' or 'name' property here! -->
  <li><a href="/link-2">Link 2</a></li>
</ul>
</nav>

在这种情况下，所有属性都属于整个导航，因此这意味着url属性将指定此导航的URL（而不是此导航中链接的URL！）。

Answer 2

根据Search Engine Land，它应该看起来像这样：

<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
    <li itemprop="name">
        <a itemprop="url" href="#">Link 1</a>
    </li>
    <li itemprop="name">
        <a itemprop="url" href="#">Link 2</a>
    </li>
    <li itemprop="name">
        <a itemprop="url" href="#">Travel Resources</a>
    </li>
</ul>

Answer 3

第一个答案是正确的，但我将两者混合为（HTML5-）语义：

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
    <ul>
        <li>
            <a itemprop="url" href="http://example.com/">
                <span itemprop="name">Link 1</span>
            </a>
        </li>
    </ul>
</nav>

Answer 4

<nav role="navigation">

    <ul role="menubar" aria-activedescendant="">

        <li role="presentation" itemscope itemtype="https://schema.org/SiteNavigationElement">
            <a href="" role="menuitem" tabindex="-1" itemprop="url">
                <span itemprop="name">Link 1</span>
            </a>
        </li>   

    </ul>

</nav>

Answer 5

schema.org/SiteNavigationElement扩展了WebPageElement，可用于标记链接，这通常会产生良好的上下文链接。您可以将此架构用于页面菜单。

<nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
    <li>
        <a href="https://yoursite.com/" title="Link to Home" itemprop="url">
            <span itemprop="name">Home</span>
        </a>
    </li>
    <li>
        <a href="https://yoursite.com/sample-page" title="Link to sample page" itemprop="url">
            <span itemprop="name">sample page</span>
        </a>
    </li>
</ul>

Answer 6

我认为最优雅的解决方案是使用hasPart属性。

<nav itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
  <a itemprop="hasPart" href="/link1.html">Link 1</a>
  <a itemprop="hasPart" href="/link2.html">Link 2</a>
  <a itemprop="hasPart" href="/link3.html">Link 3</a>
</nav>

使用Google的Structure Data Testing Tool通知这些链接是SiteNavigationElement的一部分，Google应该关注这些项目的链接：

Answer 7

请考虑以下从habd.as的页面源改编的代码片段：

<nav itemscope itemtype="https://schema.org/SiteNavigationElement">
  <meta itemprop="name" content="Main Menu">
  <a itemprop="url" class="active" href="/">habd.as</a>
  <a itemprop="url" href="/code/">Code</a>
  <a itemprop="url" href="/post/">Posts</a>
  <a itemprop="url" href="/site/">Sites</a>
  <a itemprop="url" href="/talk/">Talks</a>
</nav>
<nav itemscope itemtype="https://schema.org/SiteNavigationElement">
  <meta itemprop="name" content="Utility Menu">
  <a itemprop="url" href="/about/">About</a>
  <a itemprop="url" href="/contact/">Contact</a>
</nav>

当如上所示存在多个导航时，使用SiteNavigationElement对导航项进行分组可以使用name，从而可以对分组本身进行标记。可以使用链接本身的内容来获得组内各个项目的标签。

因此，尽管有相反的断言，你的第一个例子更正确。

Answer 8

OP的原始问题包含一个很好的代码示例。虽然没有答案......

似乎每个人都有一个随机的答案...您可以使用以下官方谷歌工具search.google.com/structured-data/testing-tool测试您的架构微数据代码。

如果你在这个工具中运行建议的答案，你会注意到没有给你预期的结果：一个名字和网址的SiteNavigationElement列表

有些人可能认为整个菜单可能被视为“导航元素”，但我认为这种面额指定单个导航链接更有意义。另外，如果我们使用SiteNavigationElement作为整个菜单的标记，我们无法将名称与html中的URL相关联。

为了达到这个目的，你需要用itemscope属性封装每个链接，并且它们都需要有自己的name和url itemprop（这些是@David Harkness所提到的单例，所以它们每个itemprop只出现一次）

<nav>
    <ul>
        <li  itemscope itemtype="http://schema.org/SiteNavigationElement">
            <a itemprop="url" href="http://example.com/link-1">
                <span itemprop="name">Link 1</span>
            </a>
        </li>
        <li  itemscope itemtype="http://schema.org/SiteNavigationElement">
            <a itemprop="url" href="http://example.com/link-2">
                <span itemprop="name">Link 2</span>
            </a>
        </li>
    </ul>
</nav>

上面的代码将使用两个不同的导航元素，每个导航元素都有一个名称和一个URL。

注意：itemprop="url"属性使用锚点的href属性作为值