Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Breadcrumbs on current page

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?

like image 748
OuberThat Avatar asked Apr 23 '15 07:04

OuberThat


1 Answers

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.

like image 70
Franz Avatar answered Oct 07 '22 11:10

Franz