logo标签列表

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

htmlseoschema.org
45

在 SEO 方面...

把 scheme（协议）放在包含所有链接的父元素中是最好的吗？

<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>
10个回答
25

如果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！）。
3
根据您的回答，这个Microdata只是向搜索引擎介绍菜单，而不是菜单的结构！ - user3307827
@chharvey：是的。在非HTML上下文或特殊情况下，这可能是有意义的，但对于典型的Web页面，我不会使用WebPageElement及其子类型，如SiteNavigationElement。 - unor
如果有一个带有微数据的body标签：<body id="app-layout" itemscope itemtype="http://schema.org/WebPage">，那么我是否需要在导航中添加itemprop？如果是的话，导航中的itemprop值应该是什么？ - alex
@alex：如果您想提供一个“SiteNavigationElement”项，您可以使用“hasPart”属性：WebPage hasPart SiteNavigationElement。但是，除非您有特定的原因，我建议不要提供任何“SiteNavigationElement”。 - unor
为什么你不推荐使用 SiteNavigationElement？使用它有什么问题吗？ - alex
2
@alex: 这通常是没有用的。请参见我上面评论中的链接。还可以查看此答案或这个答案。我还为Schema.org创建了一个问题。 - unor
14

根据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>
2
这个回答为什么会有两个踩却没有解释是哪里不正确呢？ - John R Perry
1
url 表示 URL，name 表示名称（即链接2）。所以，它们不是占位符。 - John R Perry
1
问题在于url和name是SiteNavigationElement的单例属性。这个标记有三个，使它们变得模糊不清。搜索引擎应该使用哪个单一的name和url？ - David Harkness
1
这是 Google 结构化数据工具所识别和接受的结构。 - IXN
“name”可以从“a”的内容中推断出来，因此无需特别标记。此外，在导航中不需要使用“li”，尽管它可能对可访问性API有一些好处。同时应该使用“nav”元素作为包装器。 - vhs
显示剩余2条评论
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>
4
这样做会生成一系列URL和名称，它们都在同一组中，但是单个URL和名称之间没有任何关联。我认为应该有一种方法来表明每个列表元素都是一个单独的实体，具有一个URL和一个名称。 - Oiva Eskola
2
一般来说，你当然是正确的。但是我们现在谈论的是导航，我假设这些链接都有某种联系，对吧？ - Stephan Weinhold
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>
毫无疑问！就是这样。 - ThomasB
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>

2

OP的原始问题包含了一个很好的代码示例，但是没有任何答案给出相应的代码...

似乎每个人都随意地给出了答案... 您可以使用以下 官方谷歌工具 search.google.com/structured-data/testing-tool 来测试您的模式化数据代码。

如果您在此工具中运行所提供的答案，您会注意到没有一个答案能够给出预期结果：一个带有名称和URL的SiteNavigationElement列表。

有些人可能会认为整个菜单可以被视为“导航元素”，但我认为这个术语更适用于指定单个导航链接。此外，如果我们将SiteNavigationElement用作整个菜单的标记，我们就无法在HTML中将名称与URL关联起来。

为了实现这一点，您需要让每个链接都被一个itemscope属性封装，并且它们都需要有自己的name和urlitemprop（正如@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属性作为值。

在Yandex上尝试一下，看看是否会得到类似于这个的东西。 - vhs
我得到了一个不同的结果，但它仍然有意义。我找不到任何关于使用Yandex schema.org阅读器引擎的工具的信息。我假设Google提供的那个是显而易见的选择，但也许出于某种原因，专注于Yandex可能更有意义？对此有什么建议吗？ - Mathieu VIALES
我最好的建议是，在规范被修订为明确无歧义之前，选择使用最常见的方法。对我来说，将站点导航命名为导航a体已经包含文本节点以命名导航链接是最有意义的。我尝试寻找百度工具，但我不精通中文。我觉得ARIA在未来将在所有这些方面发挥作用。 - vhs
2
你的回答很正确，应该使用结构化数据测试工具，因此我点了个赞，你不应该被踩。在我的icalculator上，我使用itemprop="url"和itemprop="name"（请参见左侧菜单上的源代码示例，https://www.icalculator.info/）。这是验证支持在Google和Bing的搜索结果下链接到相关页面的正确方法（实施后，他们会在4-6周后在搜索引擎上进行测试，更改是显著的）。 - Pete - iCalculator
1
考虑以下代码片段，它是从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来标记分组。可以使用链接内容获取组内各个项目的标签。因此，尽管有不同的说法，您的第一个示例更为正确。
0

以下是来自Google支持网站的一篇文章中的引用：

我们正在考虑实施网站导航模式https://schema.org/SiteNavigationElement

如果有架构，谷歌会尊重它并显示站点链接吗？还是它会按照自己的方式做？ 这有意义吗？

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

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

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的一部分，具有url和name。我认为这是最好的选择。

但是搜索引擎需要这样冗余的标记吗？他们已经知道<a href="">中的href是url，并且在标签<a>name</a>内部是name。你对此有什么看法？

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>

使用谷歌的结构化数据测试工具可以得知这些链接是SiteNavigationElement的一部分，Google应该跟随这些链接到这些项目：

Google's Structured Data Testing Tool's result

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接