Rich Snippets Breadcrumb in a Recipe

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>

Solution

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.