3

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?

  • It looks good to me. It is a total mystery. – closetnoc Dec 12 '14 at 1:02
  • Please include a minimal example (i.e., only what is needed to see the error) of the HTML+RDFa code. – unor Dec 12 '14 at 10:44
  • posted minimum example code – Bogdan Dec 12 '14 at 16:15
  • 1
    You are using Microdata, not RDFa (see their differences). I edited your question accordingly. – unor Dec 12 '14 at 21:35
1

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.

  • seems to work, I replaced itemprop="image" with itemprop="photo" and I get no more errors. The issue I see is that the photo doesn't render in the testing tool. here is the example – Bogdan Dec 15 '14 at 16:26
  • I don't think it's meant too on the preview tool. Remember, richsnippet is a markup/organizational data structure. It's not meant to be rendered / interpreted as executable code for processes but instead is meant specifically for allowing special code to rapidly examine and catalog specific data types while ignoring other code not relavent (like css). Thus its normal to record the image src path and not try to render it. Glad it's working for you. – DMSJax Dec 15 '14 at 16:39
2

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.

  • I followed the link the OP provides google.com/webmasters/tools/… and scrolled to the bottom and followed the link google.com/support/webmasters/bin/… which defines the times just as the OP has used. Please edit your answer to give samples of how the OP's times are wrong with correct samples and explain a bit. Simply saying the times are wrong does not help the OP. Thanks in advance! – closetnoc Dec 12 '14 at 1:21
  • Ok. Give me min to type it out. – DMSJax Dec 12 '14 at 1:32
  • That's cool. I get to learn something too! – closetnoc Dec 12 '14 at 1:34
  • I spoke too soon on my inital answer, i have editied it though, but i might be on wrong track here... so... with humility I edited it and hang my head :) – DMSJax Dec 12 '14 at 1:56
  • Hey! Smelly stuff happens!! Nothing to be a shamed of. We have all gone through this before. One up-vote. Thanks for the obviously hard work. – closetnoc Dec 12 '14 at 2:41
1

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" />
  • Does boilerplate.test exist? – Steve May 4 '18 at 21:34
  • @Steve as i mentioned in my answer above, its a "localhost" .test domain. After Google takeover the .dev tld, we have limited option to use localhost domain tld. .test is used by developers to create a localhost environment. – Rao Abid May 7 '18 at 9:26
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.