44

在搜索引擎优化方面...

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

<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>
4

10 回答 10

25

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

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

我认为 Schema.org 并没有明确定义是指哪个变体，因为他们只说：

页面的导航元素。

但是，父类型WebPageElement定义为：

网页元素，例如表格或图像

此外，所有其他子类型（如Tableor 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！）。

于 2014-03-02T21:40:08.280 回答
15

根据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>
于 2015-09-28T13:30:58.680 回答
11

第一个答案是正确的，但我会混合使用（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>
于 2014-01-22T12:45:40.100 回答
5 
<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>
于 2014-11-13T00:31:27.003 回答
2

考虑以下改编自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提供了 这样的使用，以便可以标记分组本身。可以使用链接本身的内容获得组内各个项目的标签。

因此，尽管断言相反，您的第一个示例更正确。

于 2019-01-13T20:11:33.087 回答
2

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>

于 2016-08-29T11:40:51.103 回答
1

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

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

如果您在此工具中运行建议的答案，您会注意到没有一个给您预期的结果：SiteNavigationElement带有名称和 url的列表

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

为了实现这一点，您需要将每个链接都封装在一个itemscope属性中，并且它们都需要拥有自己的nameand 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属性作为值

于 2018-12-18T15:37:39.747 回答
0

我认为最优雅的解决方案是使用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 的结构数据测试工具会通知这些链接是 SiteNavigationElement 的一部分，并且 Google 应该遵循这些项目的链接：

谷歌结构化数据测试工具的结果

于 2019-03-06T04:33:20.810 回答
0

这是谷歌支持网站上一篇文章的引述，说：

我们正在考虑实施站点导航架构 https://schema.org/SiteNavigationElement

如果架构存在，谷歌会尊重它并显示附加链接，还是它会做自己的事情？我有一点吗？

此类顶级当前不支持 Google。事实上，这种类型甚至没有范围定义。尚不清楚这种类型是否会影响一个组，例如导航菜单或仅一个链接。

这证实了我对他们丰富的结果测试的经验：只识别面包屑。Yandex 可以很好地验证我的微数据。因此SiteNavigationElement，在您的页面上似乎无用但有效。

于 2020-07-23T18:56:11.773 回答
0

综合以上几点，我得出以下结论：

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
  <ul>
   <li itemprop="hasPart">
     <a href="/" itemprop="url"><span itemprop="name">Home</span></a>
   </li>
</nav>

因此，每个<li>都是SiteNavigationElement具有urland的部分name。我认为这是最好的选择。

但是搜索引擎需要这样的冗余标记吗？他们已经知道hrefin<a href="">是url，而标签里面<a>name</a>是name。你怎么看待这件事？

于 2020-02-27T11:52:08.643 回答