web-dev-qa-db-fra.com

Données structurées Erreurs de navigation: le titre et l'URL sont manquants

Je viens d'effectuer un test et j'ai reçu deux erreurs sur toutes les pages de mon produit dans la section du fil d'Ariane (2) du test de Googl Structured Data Tool.

Il est indiqué que Breadcrumb 2 n'a pas de titre ni d'URL.

Quand je clique sur l'erreur, il me faut le code suivant

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">;

Le code brut est configuré comme tel:

{% if settings.product_breadcrumb %}
      <div class="breadcrumb_text">
        <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="url"><span itemprop="title">{{ 'general.breadcrumbs.home' | t }}</span></a></span> 
        &nbsp;<span class="icon-right-arrow"></span>
        <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          {% if collection %}
            <a href="{{ collection.url }}" title="{{ collection.title | escape }}">{{ collection.title }}</a>
          {% else %}
            <a href="/collections/all" title="{{ collections.all.title }}">{{ collections.all.title }}</a>     
          {% endif %}
        </span>

Tout va bien de mon côté ?? Aucune suggestion?

structured-databreadcrumbs
4
Lauren

J'ai bien peur que votre code ne crée pas la structure d'imbrication appropriée pour les microdonnées en ligne. Vous semblez utiliser n'importe quel type de JS-Framework, comme React ou similaire. Pourquoi n'essayez-vous pas de renseigner avec des données un extrait de code JSON-LD? Ça ressemblerait à

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@id": "https://example.com/books",
      "name": "Books",
      "image": "http://example.com/images/icon-book.png"
    }
  },{
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@id": "https://example.com/books/authors",
      "name": "Authors",
      "image": "http://example.com/images/icon-author.png"
    }
  }]
}
</script>

Il peut être implémenté au bas du corps et sera entièrement reconnu par Google, même si vous le remplissez avec des données après onLoad, mais pas trop tard - max. 5 secondes après.

1
Evgeniy

Avant d'entrer dans le code, je pense que la méthode de balisage de chapelure de data-vocabulary.org est probablement en train de devenir obsolète. Dans le passé, il semblait que Google préférait data-vocabulary.org spécifiquement pour la chapelure de chapelure, mais aujourd'hui, si vous examinez leurs spécifications relatives aux données structurées, vous verrez qu'ils aiment schema.org ou JSON-LD. (Plus ici: https://developers.google.com/search/docs/data-types/breadcrumbs .)

Une autre chose à considérer est que le SDTT de Google est confus aussi. Vous utilisez des macros dans votre code et, comme vous le verrez, c'est en partie ce qui génère des erreurs. Cet outil est excellent, mais si vous savez que quelque chose a du sens dans votre code et qu’il est correct, vous devrez peut-être utiliser votre propre code.

Ok, voici votre code. Je l'ai modifié pour le faire fonctionner et l'ai mis en retrait pour plus de clarté:

<div class="breadcrumb_text">
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com" title="{{ shop.name | escape }}" itemprop="url">
      <span itemprop="title">{{ 'general.breadcrumbs.home' | t }}</span>
    </a>
  </span>&nbsp;
  <span class="icon-right-arrow"></span>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          {% if collection %}
    <a href="http://www.example.com" title="{{ collection.title | escape }}" itemprop="url">         
      <span itemprop="title">{{ collection.title }}</span>
    </a>
          {% else %}
    <a href="http://www.example.com" title="{{ collections.all.title }}" itemprop="url">
      <span itemprop="title">{{ collections.all.title }}</span>
    </a>     
          {% endif %}
  </span>
</div>

C'est la seule façon pour moi de vérifier.

En passant, je n’ai omis que la première ligne, {% if settings.product_breadcrumb %} parce qu’elle jetait des erreurs. Supposons que c'est là. J'ai également inclus la balise de fermeture </div>, par souci de complétude.

Lorsque l'erreur dans l'outil de test vous a amené à deux instances de <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">, c'est parce qu'il a identifié les erreurs dans deux blocs commençant par ceci, et non dans ces lignes.

Notez que dans les trois cas, j'ai remplacé votre macro URL par une URL réelle (fausse/exemple) - http://www.example.com . C'est le seul moyen de se débarrasser de ces erreurs. Étant donné que votre macro entraînera des URL réelles, cela devrait aller, espérons-le. (Lorsque vous définissez la page en direct, vérifiez à nouveau en exécutant l'URL de la page, et non le code, via le validateur.) En réalité, l'outil lui-même ne reconnaît que les URL complètes.

Pour votre déclaration conditionnelle, il vous manquait le itemprop="url" sur chaque lien hypertexte. Une fois que cela a été ajouté, le validateur s'est plaint d'un nom manquant. J'ai donc ajouté ces balises <span>, avec itemprop="title" exactement comme vous l'avez dans votre premier bloc de code.

Fondamentalement, vous devez disposer des éléments suivants pour chaque élément de navigation afin de le faire fonctionner:

itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
itemprop="url"
itemprop="title"

La situation de l'URL est celle où vous devrez faire des tests.

1
Henry Visotski