食谱中的丰富片段面包屑

Question

我正在更新食谱页面上的丰富网页摘要，并在 Google 结构化数据测试工具 (https://developers.google.com/structured-data/testing-tool/) 中测试结果。由于面包屑在食谱的范围内，我得到了一些错误。

这是阻塞错误吗？决议是什么？面包屑部分周围的一些额外标记？

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

Answer 1

将 http://data-vocabulary.org/Breadcrumb 项嵌套在 http://schema.org/Recipe 项中不是问题。微数据不关心 HTML5 嵌套，除非使用属性 (itemprop).

您的问题是您的第二个和第三个面包屑项（具有 child 属性）未嵌套在 http://data-vocabulary.org/Breadcrumb 项中，而是嵌套在 http://schema.org/Recipe 项。这样他们就和食谱联系起来了，这当然是不正确的。

所以解决方案是嵌套面包屑项，而不是使用 itemref。

Answer 2

<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

seo

breadcrumbs

microdata

rich-snippets