web-dev-qa-db-fra.com

Erreur de l'outil de test Rich Snippets de Google sur la recette

J'ai marqué une page pour Recipe Rich Snippets avec Microdata, mais je reçois une erreur dans l'outil de test de Google:

Erreur: pour générer un aperçu avec des extraits enrichis, il faut au moins deux des champs suivants: temps de préparation, temps de cuisson, temps total, calories, classement, nombre de critiques, ingrédients ou image.

Le fait est que j'ai déjà 4 des valeurs ci-dessus qui sont signalées dans le message d'erreur et qu'elles sont également reconnues par l'outil de test comme étant valides.

Voici la sortie de l'outil de test Rich Snippets Testing pour mon code .

Et voici l'exemple de code que j'ai utilisé:

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

Quelqu'un peut-il me donner une idée de ce qui pourrait ne pas se passer ici?

microdatarich-snippetsgoogle-rich-snippets-tool
3
Bogdan

Veuillez modifier itemprop = "image" en itemprop = "photo" et l'outil Google Rich Snippet est satisfait de votre code (minimal nettoyé). itemprop "image" n'est pas valide Le balisage Rich Snippet car "photo" est le nom de la propriété qu'il recherche.

Remarque: comme votre code a été nettoyé et réduit au minimum, je ne suis pas certain que l'ajout de votre code complet ne créera pas le même problème ou un nouveau problème, mais votre code tel que présenté est correct une fois que vous avez effectué ce changement.

1
DMSJax

1.) Je corrige le problème particulier que j’ai déclaré avant d’être un problème de format/heure ISO. Je pense que c'est parce que les schémas sont mélangés.

Après avoir retiré quelque chose de misc du code source pour rendre ce code source OP plus petit, procédez comme suit:

    <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.) Il me semble mélanger des schémas - Cela commence par une déclaration de data-vocabular.org Schema, mais au milieu du format riche, il passe à Schema.org, lors de la programmation en Rich Data, Format indiquant ce qui est inséré dans une propriété donnée, par exemple, le format MICRODATA indique que (cuisson, préparation, durée totale) doit être imbriqué dans la propriété "<span itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">", mais dans ce cas - une déclaration de un changement de schéma et donc ce qui était attendu n'a pas été vu.

Je ne pense pas que vous puissiez mélanger les schémas de cette manière. Au moins, vous ne pouvez pas entrer dans les propriétés d'un schéma et en déclarer un autre. Corrigez-moi si j'ai tort, s'il-vous plait.

2
DMSJax

Si vous avez un domaine dans l'image src qui n'est pas accessible au public, Google donnera une erreur. Exemple: localhost (.test)

Voici le détail:

Dans mon cas, j'utilisais itemprop="image" mais l'outil de test de Google donnait des erreurs.

le code de l'image était:

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

remarquez le boilerplate.test dans le src.

quand j'ai enlevé le boilerplate.test du src, il n'y avait pas d'erreur.

et finalement le code suivant n'a donné aucune erreur:

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

Ici vous allez avec le code de schéma correct:

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

Faites-nous savoir si cela fonctionne.

Remarque: veuillez ajouter les instructions sous itemprop = "recipeInstructions

0
SoftProdigy