Breadcrumbs on current page
Asked Answered
S

2

8

I have currently implemented my breadcrumbs like this:

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

As you can see, I haven't specified a url for the current page, which would be redundant. But when I try the Google testing tool, I get an error saying that the url is missing for the current page breadcrumb.

Given that, I have three options that I can think of.

I specify a url for the current page:

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

I just display the current page title without including it in the structured data markings:

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

I don't display the current level in the breadcrumbs (I don't want to do that I must say):

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

What do you think it's best I should do?

Simmonds answered 23/4, 2015 at 7:32 Comment(4)
I don't get what you're trying to do...Thermogenesis
I just want to know what I should do for the breadcrumbs of the current page: structured data with link? No link and no structured data? Nothing at all?Simmonds
I don't think it matters, the point of breadcrumbs is to allow the user to go back if he goes into multi level pagination or browsing through categories, if it needs to be there then put it, if it doesn't need to be there then don't put it.Thermogenesis
Yes I know that, but I'm not overly fond of Google telling me there are errors in my code if you see what I mean ^^ That's why I'd like to know what to do in that particular case.Simmonds
H
13

The solution is to use the <meta> tag.

So, the last item in your breadcrumb should look like this:

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

This will validate on the Google testing tool and achieve your desired goal to construct a valid breadcrumb without "displaying" a redundant link.

For reference: Getting started with schema.org using Microdata

3c. Missing/implicit information: use the meta tag with content

Sometimes, a web page has information that would be valuable to mark up, but the information can't be marked up because of the way it appears on the page... In these cases, use the meta tag along with the content attribute to specify the information.

Have to add that for sake of completeness that to have a properly formatted breadcrumb for Google SERP, according to their current specs, your example code should look like this:

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

Bear also in mind that the Google breadcrumb documentation is due for review shortly, since it seems that, at last, Google has adopted the schema.org markup for breadcrumbs from what can be inferred from the "Better presentation of URLs in search results" post in the Official Google Webmaster Central Blog and discussion on it.

Helenhelena answered 23/4, 2015 at 14:7 Comment(2)
Note that you have to use link instead of meta if the value is a URI.Abduce
Thanks that's exactly what I need! Thank you for the other info, I'll keep an eye on this.Simmonds
R
1

I would go with the option of just showing the title, current level not included in the markup as below. IMHO you don't have to include the current page in breadcrumb, as the SERP will anyway point to the current page. It makes sense to provide breadcrumb from one level higher than the current page. hope this helps. BTW, we have done it that in our organization.

<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>
Radiancy answered 23/4, 2015 at 13:32 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.