11300 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

les données structurées que j'ai installées avec LD-JSON sur mon site sont maintenant valides, j'utilise "@type": "BlogPosting". J'aimerais y ajouter un fil d'Ariane. Le fil d'Ariane se fait avec "@type": "BreadcrumbList", et ce qui va avec, comme le décrit la page https://developers.google.com/search/docs/advanced/structured-data/breadcrumb?hl=fr

Je ne sais pas comment et où insérer le "@type": "BreadcrumbList" au milieu du code déjà présent. Dois-je le mettre à la fin de mon code déjà en place ? Ou pour simplifier, puis-je créer un second script, comme on le fait en JavaScript avec les balises ouvrantes et fermantes ? Ce qui ferait deux script LD-JSON. Voici la fin de mon code LD-JSON.
}
  },
  "datePublished": "2021-12-25T20:25:25+0000",
  "dateModified": "2021-12-25T22:34:34+0000"
}
    </script>
Bonjour Bongota. Alors :

C'est toi qui a relancé mon intérêt pour les données enrichies. J'en étais resté à ma zone de confort avec les microdata, mais {grâce à toi / à cause de toi } (rayez la mention inutile) et de tes commentaires récents sur le sujet je viens de me pencher sur la question, je me suis documenté un peu et ai commencé à implémenter ce format nouveau pour moi.

Pour cela je te remercie. Maintenant, voici un petit retour d’ascenseur :

En préalable, le JSON-LD, je le mets juste avant la fermeture de la balise body. Le journal "Le Monde" le fait, je l'ai implémenté sur ce modèle et c'est répertorié sans problème par les outils Google et schema.org.

Pour l'implémentation de plusieurs entités/contextes :
- par souci de facilité d'implémentation tu peux créer autant de balises script(type='application/ld+json') que tu veux, avec des instructions conditionnelles pour chaque contexte en fonction de tes pages par exemple. C'est ce que fait le journal précité.
- mais si tu veux tout implémenter dans une seule et unique balise script (à l'exemple d'un gros maniaque comme moi par exemple) c'est tout à fait possible. Pour cela il faut placer les différents modèles contextuels dans un tableau.

Un exemple pour ce dernier cas :
<script type="application/ld+json">[
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [{
      "@type": "ListItem",
      "position": 1,
      "item": {
        "@id": "https://monsiteweb.com",
        "name": "Accueil"
      }
    },{
      "@type": "ListItem",
      "position": 2,
      "item": {
        "@id": "https://monsiteweb.com/articles",
        "name": "Articles"
      }
    },{
      "@type": "ListItem",
      "position": 3,
      "item": {
        "@id": "https://monsiteweb.com/article/1",
        "name": "La légende dorée"
      }
    }]
  },
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "https://monsiteweb.com/article/1"
    },
    "headline": "Article headline",
    "image": [
      "https://monsiteweb.com/photos/1x1/photo.jpg",
      "https://monsiteweb.com/photos/4x3/photo.jpg",
      "https://monsiteweb.com/photos/16x9/photo.jpg"
    ],
    "datePublished": "16/04/2020",
    "dateModified": "16/04/2020",
    "author": {
      "@type": "Person",
      "name": "Henri de Lubac",
      "url": "https://monsiteweb.com/person/1"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Le nom du truc",
      "logo": {
        "@type": "ImageObject",
        "url": "https://monsiteweb.com/logo.jpg"
      }
    }
  }
]</script>

Modifié par Olivier C (06 May 2022 - 00:22)
On est au moins deux à se pencher sur le problème (il y en a certainement plus...)
J'avais aussi commencé avec shema.org et les données structurées dans le html. C'est assez galère et source d'erreurs. Avec LD-JSON, c'est bien plus facile.
Le code que j'ai implanté depuis maintenant plus de deux mois est validé sur tous les tests que j'effectue, mais rien de spécial n'apparaît sur Google au sujet de mon site. Alors que j'ai mis dans le code un fichier image, qui devrait normalement se voir dans un résultat de recherche.
Tu me parles d'un code mis tout à la fin, dans le body. En ce qui me concerne, j'ai mis le code JSON dans le head, juste avant la balise de fermeture </head>
L'erreur ne serait-elle pas là ? Le code est valide mais mal placé ?
Merci pour ton exemple, dans un premier temps, je vais opter pour deux scripts.
Bongota a écrit :
Tu me parles d'un code mis tout à la fin, dans le body. En ce qui me concerne, j'ai mis le code JSON dans le head, juste avant la balise de fermeture &lt;/head&gt;
L'erreur ne serait-elle pas là ? Le code est valide mais mal placé ?

Non, c'est pire hélas, voici la triste vérité : le fait d'avoir un site optimisé nikel... aux p'tits oignons... données enrichies et compagnie... n'est en aucun cas une garantie d’apparaître avec une meilleure présentation dans les résultats Google (je ne parle pas du positionnement du résultat, je parle bien de sa présentation). Il ne reste plus qu'à attendre (encore)... et espérer.
Modifié par Olivier C (06 May 2022 - 00:25)
Je m'en doutais déjà, mais mon code dans le header, c'est mauvais ou pas. Je ne sais plus où j'ai trouvé cette idée/exemple !
Sur Alsa par exemple ? Smiley cligne

Non non, ce n'est pas mauvais, la plupart des supports le préconisent et Google aussi d'ailleurs. Moi je charge à la fin pour raison de performance (peut-être pas justifiée).
Mais c'est bien sûr !
J'ai tant lu d'article sur le sujet que j'en oublie que sur le même forum, il y a tout expliqué.
Je rajoute le "@type": "BreadcrumbList" et je te tiens au courant.
Bonne journée.
Voilà, c'est fait, j'ai opté pour deux scripts. La moindre virgule manquante fait échouer le test, j'ai choisi la prudence.
upload/1651822755-67790-fil-dariane.png
Excepté l'horloge de Google qui n'est pas à l'heure, alors qu'il est 9 h 45 chez moi !
Modifié par Bongota (06 May 2022 - 19:47)