当前页面上的面包屑

Posted 2021-04-07

我目前实现了像这样的面包屑：

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="HOME URL" itemprop="url">
        <span itemprop="title">HOME TITLE</span>
    </a> > 
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="1ST LEVEL URL" itemprop="url">
        <span itemprop="title">1ST LEVEL TITLE</span>
    </a> > 
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <span itemprop="title">CURRENT TITLE</span>
</div>

如您所见，我没有为当前页面指定一个URL，这将是多余的。但是当我尝试使用Google testing tool时，我收到一条错误消息，指出当前页面痕迹的网址丢失了。

鉴于此，我有三个选择，我可以想到。

我为当前页面指定了一个url：

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="HOME URL" itemprop="url">
        <span itemprop="title">HOME TITLE</span>
    </a> > 
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="1ST LEVEL URL" itemprop="url">
        <span itemprop="title">1ST LEVEL TITLE</span>
    </a> > 
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="CURRENT LEVEL URL" itemprop="url">
        <span itemprop="title">CURRENT TITLE</span>
    </a>
</div>

我只是显示当前页面标题而不将其包含在结构化数据标记中：

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="HOME URL" itemprop="url">
        <span itemprop="title">HOME TITLE</span>
    </a> > 
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="1ST LEVEL URL" itemprop="url">
        <span itemprop="title">1ST LEVEL TITLE</span>
    </a> > 
</div>
<span>CURRENT TITLE</span>

我没有在面包屑中显示当前级别（我不想这样做，我必须说）：

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="HOME URL" itemprop="url">
        <span itemprop="title">HOME TITLE</span>
    </a> > 
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="1ST LEVEL URL" itemprop="url">
        <span itemprop="title">1ST LEVEL TITLE</span>
    </a>
</div>

您认为我应该做什么最好？

答案

解决方案是使用<meta>标签。

因此，您的痕迹中的最后一项应如下所示：

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <span itemprop="title">CURRENT TITLE</span> <meta itemprop="url" content="CURRENT URL" /> </div>

这将验证Google testing tool并实现您的目标，即构建有效的面包屑而不“显示”冗余链接。

供参考：Getting started with schema.org using Microdata

3C。缺失/隐含信息：将元标记与内容一起使用

有时，网页上的信息对于标记很有价值，但由于页面上显示的方式，信息无法标记...在这些情况下，请使用元标记和内容属性指定信息。

为了完整起见，必须添加为Google SERP提供格式正确的痕迹，根据他们当前的specs，您的示例代码应如下所示：

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" id="a" itemref="b">
    <a href="HOME URL" itemprop="url">
        <span itemprop="title">HOME TITLE</span>
    </a> 
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" id="b" itemprop="child" itemref="c">
    <a href="1ST LEVEL URL" itemprop="url">
        <span itemprop="title">1ST LEVEL TITLE</span>
    </a>
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" id="c" itemprop="child">
    <span itemprop="title">CURRENT TITLE</span>
    <meta itemprop="url" content="CURRENT URL" />
</div>

请记住，谷歌面包屑文档很快就会进行审核，因为谷歌最近似乎采用了schema.org标记来获取面包屑，这可以从Google官方网站管理员中心的“Better presentation of URLs in search results”帖子中推断出来。博客和讨论。

另一答案

我会选择只显示标题，当前级别不包括在标记中，如下所示。恕我直言，你不必在面包屑中包含当前页面，因为SERP无论如何都会指向当前页面。从高于当前页面的一个级别提供面包屑是有意义的。希望这可以帮助。顺便说一句，我们已经在我们的组织中做到了这一点。

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="HOME URL" itemprop="url">
        <span itemprop="title">HOME TITLE</span>
    </a> > 
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="1ST LEVEL URL" itemprop="url">
        <span itemprop="title">1ST LEVEL TITLE</span>
    </a> > 
</div>
<span>CURRENT TITLE</span>