Rich Snippets Breadcrumb in a Recipe

Question

I'm updating Rich snippets on a recipe page and when testing the results in the Google Structured Data testing tool (https://developers.google.com/structured-data/testing-tool/). I get some errors due to the fact that the breadcrumb is in the scope of the recipe.

Is this a blocking error ? What could be the resolution ? Some extra markup around the breadcrumb part ?

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body class="" itemscope itemtype="http://schema.org/Recipe">

    <h1><span itemprop="name">Baked Cheesy Dippers with Nacho Cheese Cheddar</span></h1>
    <div class="extraPropeties">
        <span itemprop="description">A fun way to serve chicken dippers and keep kids interested</span>

        <span itemprop="recipeYield">4 Persons</span>


        <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
            <span itemprop="calories">11</span>

            <span itemprop="fatContent">31</span>

            <span itemprop="proteinContent">41</span>

            <span itemprop="carbohydrateContent">51</span>

            <span itemprop="fiberContent">61</span>

            <span itemprop="cholesterolContent">71</span>

        </span>
    </div>

    <div class="part2">

        <div class="shortInfo">

            <div class="shortInfoTile">
                <div class="key">Preparation time</div>
                <div class="value">
                    <span datetime="PT10M" itemprop="prepTime">10</span><span class="unit">'</span>
                </div>
            </div>

            <div class="shortInfoTile">
                <div class="key">Cooking time</div>
                <div class="value">
                    <span datetime="PT20M" itemprop="cookTime">20</span><span class="unit">'</span>
                </div>
            </div>

            <div class="shortInfoTile">
                <div class="key">Nr of servings</div>
                <div class="value">
                    <span>4</span>
                </div>
            </div>
        </div>
    </div>


    <div class="breadcrumb">
        <div class="wrapper">
            <div class="typoMinusR">
                <span class="word" id='bc_0' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemref='bc_1'>
                    <span class="first"></span>
                    <a href="/" itemprop="url">
                        <span itemprop="title">Home</span>
                    </a>
                    <span class="last"></span>
                </span>

                <span class="word" id='bc_1' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemprop='child' itemref='bc_2'>
                    <span class="first"></span>
                    <a href="/recipes" itemprop="url">
                        <span itemprop="title">Recipes</span>
                    </a>
                    <span class="last"></span>
                </span>

                <span class="word" id='bc_2' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemprop='child'>
                    <span class="first"></span>
                    <a href="/recipes/baked-cheesy-dippers-with-nachos-beans-cheddar" itemprop="url">
                        <span itemprop="title">Baked-Cheesy-Dippers-with-Nacho-Bean-Cheddar</span>
                    </a>
                    <span class="last"></span>
                </span>

            </div>
        </div>
    </div>

</body>
</html>
</html>

score 2 · Accepted Answer · answered Jul 04 '15 at 18:28

2

Nesting the http://data-vocabulary.org/Breadcrumb item in the http://schema.org/Recipe item is not a problem. Microdata does not care about the HTML5 nesting, unless a property is used (itemprop).

The problem in your case is that your 2nd and 3rd breadcrumb items (which have the child property) are not nested in the http://data-vocabulary.org/Breadcrumb item, but in the http://schema.org/Recipe item. This way they get associated with the recipe, which is of course not correct.

So the solution would be to nest the breadcrumb items, instead of using itemref.

answered Jul 04 '15 at 18:28

unor

92,415
26
211
360

The breadcrumb is validated, and the result shows the correct structure in the validator. The recipe is not validated as it doesn't find the child itemprop. – Laurent Lequenne Jul 06 '15 at 10:00
@LaurentLequenne: Yes, this is what I tried to explain in my answer, no? Is something unclear? – unor Jul 06 '15 at 10:07
No it's ok... I embedded all the breadcrumbs in the first item, and that's ok – Laurent Lequenne Jul 06 '15 at 10:29

score 0 · Answer 2 · answered Jul 06 '15 at 11:22

<div class="breadcrumb">
    <div class="wrapper">
        <div class="typoMinusR">

            <span id='bc_0' itemscope itemtype='http://data-vocabulary.org/Breadcrumb'>
                <span class="word">

                    <a href="/" itemprop="url">
                        <span itemprop="title">Home</span>
                    </a>
                    <span class="last"></span>
                </span>

                <span id='bc_1' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemprop='child'>
                    <span class="word">

                        <span class="first"></span>

                        <a href="/range" itemprop="url">
                            <span itemprop="title">Our Range</span>
                        </a>
                        <span class="last"></span>
                    </span>

                    <span id='bc_2' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemprop='child'>
                        <span class="word">

                            <span class="first"></span>

                            <a href="/range/fish2" itemprop="url">
                                <span itemprop="title">Fish</span>
                            </a>
                            <span class="last"></span>
                        </span>

                        <span id='bc_3' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemprop='child'>
                            <span class="word">

                                <span class="first"></span>

                                <a href="/range/fish2/inspirations" itemprop="url">
                                    <span itemprop="title">Inspirations</span>
                                </a>
                                <span class="last"></span>
                            </span>
                        </span>
                    </span>
                </span>
                <span class="word currentitem">
                    <span class="first"></span>
                    <span class="label">Inspirations Fish Chargrills - Sun Ripened Tomato and Oregano</span>
                    <span class="last"></span>
                </span>
            </span>
        </div>
    </div>
</div>

Rich Snippets Breadcrumb in a Recipe

2 Answers2