web-dev-qa-db-fra.com

Aide à la navigation à l'aide d'extraits enrichis de Schema.org

J'ai des problèmes pour mettre en œuvre les extraits enrichis du fil d'Ariane de schema.org. Lorsque je construis mon fil d'Ariane à l'aide de la commande documentation et que je l'utilise via outil de test de Google Rich Snippet , le fil d'Ariane est identifié mais n'apparaît pas dans l'aperçu.

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Page</title>
  </head>
  <body itemscope itemtype="http://schema.org/WebPage">     
      <strong>You are here: </strong>
      <div itemprop="breadcrumb">
        <a title="Home" href="/">Home</a> >
        <a title="Test Pages" href="/Test-Pages/">Test Pages</a> >
      </div>
  </body>
</html>

Si je change pour utiliser les extraits de data-vocabulary.org, les extraits enrichis s'affichent correctement dans l'aperçu.

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Page</title>
  </head>
  <body>
      <strong>You are here: </strong>
      <ol itemprop="breadcrumb">
        <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          <a href="/" itemprop="url">
            <span itemprop="title">Home</span>
          </a>
        </li>
        <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          <a href="/Test-Pages/" itemprop="url">
            <span itemprop="title">Test Pages</span>
          </a>
        </li>
      </ol>
  </body>
</html>

Je souhaite que le fil d'Ariane soit affiché dans le résultat de la recherche plutôt que dans l'URL de la page.

Étant donné que Schema.org est la méthode recommandée pour utiliser des extraits enrichis, je préférerais utiliser cette méthode. Toutefois, comme le fil d'Ariane ne s'affiche pas dans l'aperçu du résultat de la recherche à l'aide de cette méthode, je ne suis pas convaincu que cela fonctionne correctement.

Est-ce que je fais quelque chose de mal dans le balisage pour Schema.org par exemple?

microdatarich-snippetsbreadcrumbsgoogle-rich-snippets-toolschema.org
9
Adam Jenkin

Avec cette implémentation:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">Dresses</span>
  </a> &gt;
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">Real Dresses</span>
  </a> &gt;
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    <span itemprop="title">Real Green Dresses</span>
  </a>
</div>

Vous aurez le fil d'Ariane suivant dans Google:

Dresses > Real Dresses > Real Green Dresses
3
Ranaivo

J'ai fait des recherches à ce sujet récemment.

Il s'avère que ce que Google recommande pour la chapelure ne fonctionne pas. Lorsque j'ai regardé il y a quelques semaines, leur propre exemple a échoué dans l'outil Rich Snippet de Google. Il semble que Google soit un peu en retard mais toujours en avance sur les autres.

Data-vocabulary.org est la norme acceptée et de facto même si Schema.org l'aurait remplacé par Data-vocabulary.org comme étant déprécié. Cependant, la réalité ne correspond pas à la rhétorique. L'intention était que Schema.org remplace Data-vocabulary.org et il se peut que cela se produise. Pourtant, j'ai trouvé un extrait (jeu de mots intentionnel) quelque part mentionnant que Google n'a pas encore modifié son code pour reconnaître Schema.org.

Ceci dit, c’est l’exemple que j’ai trouvé qui fonctionne dans Google et Bing, bien que Bing ait quelque peu modifié les choses récemment, aussi faites preuve de prudence si Bing est important pour vous.

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/"><span itemprop="title">Home</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/marvel/"><span itemprop="title">Marvel Comics</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/fantastic-four/"><span itemprop="title">Fantastic Four</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/fantastic-four/58/"><span itemprop="title">Fantastic Four #48: The Coming of Galactus</span></a></span>

J'espère que cela t'aides.

1
closetnoc

Il me semble que le problème vient de la documentation schema.org elle-même. Voici quelques liens éducatifs:

Je les ai classés comme les plus utiles en premier lieu, essentiellement, ils sont finalement tous liés les uns aux autres. L'action à ce sujet est prévue pour la fin du mois, mais il semble que le résultat sera le même que dans votre deuxième exemple.

C'est dommage car le code HTML finit par être plus compliqué qu'il ne le devrait réellement, mais nous y sommes.

J'espère que cela pourra aider!

1
Stuart Burrows

(Laissant de côté le soutien aux consommateurs.)

Le vocabulaire Schema.org propose deux manières de fournir des chemins de navigation pour un WebPage (et ses sous-types):

Utiliser du texte est facile, mais non structuré (plus difficile à analyser pour les consommateurs).
Utiliser BreadcrumbList est plus complexe, mais permet de spécifier explicitement tout ce qui est nécessaire (plus facile à analyser pour les consommateurs).

En prenant votre exemple, utiliser BreadcrumbList pourrait ressembler à ceci:

<body itemscope itemtype="http://schema.org/WebPage">     
  <strong>You are here: </strong>
  <div itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">

    <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <meta itemprop="position" content="1" />
      <a itemprop="item" href="/">
        <span itemprop="name">Home</span>
      </a>
    </span> 

    &gt;

    <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <meta itemprop="position" content="2" />
      <a itemprop="item" href="/Test-Pages/">
        <span itemprop="name">Test Pages</span>
      </a>
    </span>

  </div>
</body>

(Vous devrez peut-être déplacer des éléments si les espaces sont une préoccupation.)

1
unor