Google's Rich Snippets testing tool error on Recipe

Question

I marked up a page for Recipe Rich Snippets with Microdata, however I'm getting an error in Google's Testing Tool:

Error: In order to generate a preview with rich snippets, at least 2 of the following fields are needed: prep time, cook time, total time, calories, rating, review count, ingredients, or image

The thing is that I already have 4 of the above values that are being signaled in the error message and they are also recognized by the Testing Tool as being valid.

Here is the Rich Snippets Testing Tool output for my code.

And here's the sample code I used:

<div class="pd_main_wrapper" itemscope="" itemtype="http://data-vocabulary.org/Recipe">
    <div class="pd_main_image">
        <div id="main_image_container">
            <div id="divProductPic3422">
                <img id="ProductPic3422" style="cursor:hand;cursor:pointer;" onClick="picShowOverlayBox(imgPathLarge_3422())" title="Seafood Paella Recipe - Click to enlarge" src="https://www.example.com/images/Product/medium/xspanish-seafood-paella-recipe-1S-3422.jpg.pagespeed.ic.GtxjaJwlho.jpg" itemprop="image" alt="Seafood Paella Recipe"/>
            </div>
        </div>
    </div>

    <div class="pd_cart_details">
        <h1>
            <span itemprop="name">Spanish Seafood Paella Recipe
        </h1>
        <span class="pd_subtitle">by 
        <span itemprop="author">GourmetFood
        <time itemprop="published" datetime="11/3/2014 11:13:10 AM"></time>

        <div class="recipe_intro" itemprop="summary">This classic Spanish seafood paella is prepared in two stages: the seafood cooked first to preserve the texture and reserved, then the rice is cooked al dente and all the ingredients mixed.<br><br>
            <strong>Prep Time: </strong>
            <time datetime="PT30M" itemprop="prepTime">30 minutes</time><br><strong>Cook Time: </strong>
            <time datetime="PT25M" itemprop="cookTime">25 minutes</time><br><strong>Total Time: </strong>
            <time datetime="PT55M" itemprop="totalTime">55 minutes</time><br><strong>Yield: </strong>
            <span itemprop="yield">6 servings
        </div>
        <div class="pd_add_cart_container">
            <span class="pd_print_recipe_button">
                <input type="button" name="btnBuy" id="btnBuy" value="PRINT RECIPE" class="btn btn-prntrecipe btn-prntrecipec" onClick="return printManager.printRecipe();">
        </div>
    </div>

    <div id="tabs_container">
        <h2>Spanish Seafood Paella Recipe Instructions</h2>
        <span itemprop="instructions"><strong>Ingredients</strong><br/>
        <ul>
            <li>18 mussels (cleaned and scrubbed)</li>
            <li>12 clams (cleaned and scrubbed)</li>
        </ul>
    </div>
</div>

Can someone give me some idea on what could be wrong here?

Answer 1

1.) I stand corrected on the particular problem i stated before being an ISO time/format issue. I think its because the Schemas are being mixed together.

After some removal of misc stuff from source code to make this smaller OP source code is as follows:

    <div itemtype="http://data-vocabulary.org/Recipe" itemscope="" class="pd_main_wrapper">
    <img alt="Seafood Paella Recipe" itemprop="image" src="/images/Product/medium/spanish-seafood-paella-recipe-1S-3422.jpg" title="Seafood Paella Recipe - Click to enlarge" id="ProductPic3422"><div class="pic_thumbnails">
<span itemprop="name">Spanish Seafood Paella Recipe</span>
<span itemprop="author">GourmetFoodStore.com</span>
<time datetime="11/3/2014 11:13:10 AM" itemprop="published"></time>
<div itemtype="http://schema.org/AggregateRating" itemscope="" itemprop="aggregateRating" class="ratings_line"> 
<span itemprop="ratingValue">5.00</span>)&nbsp;&nbsp;&nbsp;# of Ratings:
<span itemprop="reviewCount">1</span>&nbsp;&nbsp;&nbsp;<b>Log in to rate this item.</b></div>
<div itemprop="summary" class="recipe_intro">This classic Spanish seafood paella is prepared in two stages: the seafood cooked first to preserve the texture and reserved, then the rice is cooked al dente and all the ingredients mixed.<br><br><strong>Prep Time: </strong>
<time itemprop="prepTime" datetime="PT30M">30 minutes</time><br><strong>Cook Time: </strong><time itemprop="cookTime" datetime="PT25M">25 minutes</time><br><strong>Total Time: </strong><time itemprop="totalTime" datetime="PT55M">55 minutes</time><br><strong>Yield: </strong><span itemprop="yield">6 servings</span></div>

1.) It appears to me to be mixing Schemas - It starts out with a declaration of data-vocabular.org Schema, but in the middle of the Rich Format it switches to Schema.org, When coding in Rich Data there is a particular format as to what is NESTED within any given property, for example the MICRODATA format states the (cook,prep,total time) should be nested within the "<span itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">" property, but in this case - there was a declaration of a schema change and so what was expected was not seen.

I don't think you can can mix schema's like this, at least you can't be inside the properties of one schema and declare another schema within it. Please correct me if I'm wrong.

Answer 2

Please change itemprop="image" to itemprop="photo" and Google Rich Snippet tool is satisfied with your (cleaned-up minimal) code. itemprop "image" is not valid Rich Snippet markup as "photo" is the property name it looks for.

Please note: As your code was cleaned up and minimized I am not certain adding in your full code won't create the same or new problem, but your code as presented is fine once you make that change.

Answer 3

if you have domain in the image src that is not public accessible, google will give error. Example: localhost (.test)

Here is detail:

In my case, i was using itemprop="image" but google testing tool was giving errors.

the image code was:

<img itemprop="image" src="http://boilerplate.test/wp-content/uploads/2018/04/test.jpg" alt="test recipe" class="recipe-img" />

notice the boilerplate.test in the src.

when i removed the boilerplate.test from the src, there was no error.

and finally the following code gave no error:

<img itemprop="image" src="/wp-content/uploads/2018/04/test.jpg" alt="test recipe" class="recipe-img" />

Answer 4

Here you go with correct schema code:

 <div itemscope itemtype="http://schema.org/Recipe">
  <span itemprop="name">Spanish Seafood Paella Recipe
  By <span itemprop="author">GourmetFood,
  <meta itemprop="datePublished" content="2014-03-11">March 11, 2014
  <img itemprop="image" src="https://www.example.com/images/Product/medium/xspanish-seafood-paella-recipe-1S-3422.jpg.pagespeed.ic.GtxjaJwlho.jpg"
       alt="Seafood Paella Recipe"  />
  <span itemprop="description">This classic Spanish seafood paella is prepared in two stages: the seafood cooked first to preserve the texture and reserved, then the rice is cooked al dente and all the ingredients mixed.

  Prep Time: <meta itemprop="prepTime" content="PT15M">PT30M
  Cook time: <meta itemprop="cookTime" content="PT1H">PT25M
  Total time: <time datetime="PT1H30M" itemprop="totalTime">PT55M</time>

  Yield: <span itemprop="recipeYield">6 servings
    Ingredients:
  - <span itemprop="ingredients">18 mussels (cleaned and scrubbed)
  - <span itemprop="ingredients">12 clams (cleaned and scrubbed)
  - <span itemprop="ingredients">3/4 cup of sugar
  ...
  Spanish Seafood Paella Recipe Instructions
  <span itemprop="recipeInstructions">
  Please add instructions here!

 </div>

Let us know if it works.

Note: Please add instructions under itemprop="recipeInstructions