Fermer

mai 9, 2019

Guide de l’écriture de données structurées pour les référenceurs (JSON-LD)


Le vocabulaire de Schema.org est la collabelle ultime .

Grâce à une poignée de main commune entre Google, Microsoft, Yahoo et Yandex, nous disposons d'une bibliothèque de champs que nous pouvons utiliser pour mettre en évidence et mieux définir les informations des pages Web. En utilisant des données structurées, nous fournissons aux moteurs de recherche plus de confiance (c'est-à-dire une meilleure compréhension du contenu de la page), comme l'explique Alexis Sanders dans ce magnifique podcast . Cela peut avoir un certain nombre d'effets positifs, notamment des affichages SERP accrocheurs et un classement amélioré.

Si vous êtes un SEO, avez-vous confiance dans l'audit ou la création de balises de données structurées à l'aide du vocabulaire Schema.org? Si vous venez de vous installer mal à l'aise, ce guide est pour vous. Mon objectif est de démystifier une partie de la syntaxe de JSON-LD et de partager des conseils utiles sur la création de données structurées pour les pages Web.

Comprendre la syntaxe de JSON-LD

Bien que vous puissiez peut marquer le contenu de la page, ce guide se concentrera sur le format préféré par Google; JSON-LD. En outre, nous n'entrerons pas dans toutes ses complexités, mais plutôt dans les cas les plus couramment rencontrés et utiles pour les référenceurs.

Accolades

La ​​première chose que vous remarquerez après le tag d'ouverture une accolade fermée.

Toutes nos données structurées vivront à l'intérieur de ces deux accolades. Au fur et à mesure que nous élaborons notre balisage, nous verrons probablement des accolades supplémentaires, et c’est là que l’indentation aide vraiment à éviter les confusions!

Guillemets

La ​​prochaine chose que vous remarquerez est les guillemets. Chaque fois que nous appelons un type de schéma, ou une propriété, ou remplissons un champ, nous encapsulons les informations entre guillemets.

Colons

Les suivants sont des deux-points (sans rire). Fondamentalement, chaque fois que nous appelons un type ou une propriété, nous devons ensuite utiliser deux points pour continuer à entrer des informations. C'est un séparateur de champ.

Virgules

Les virgules servent à définir si une autre valeur (informations supplémentaires) est attendue.

Notez que lorsque le champ informationnel de la propriété "logo" est rempli, pas de virgule. C'est parce qu'il n'y a pas d'informations supplémentaires à indiquer.

Supports

Lorsque nous appelons une propriété qui comprend deux entrées ou plus, nous pouvons utiliser un support ouvert et un support fermé.

Vous voyez comment nous avons inclus les profils Facebook et Twitter de Go Fish Digital dans la propriété «sameAs»? Comme il y a plus d’une entrée, nous plaçons les deux entrées entre crochets (j’appelle cela un tableau). Si nous n'incluions que l'URL de Facebook, nous n'utiliserions pas de crochets. Nous encapsulons simplement la valeur (URL) entre guillemets.

Accolades internes

Chaque fois que nous appelons une propriété ayant un «type» attendu, nous utilisons des accolades internes pour entourer les informations.

Dans l'image ci-dessus, la propriété «contactPoint» a été appelée. Cette propriété particulière a un type attendu de «ContactPoint». N’est-ce pas si agréable et déroutant? Nous y reviendrons plus en détail plus tard, mais pour l’instant, remarquez qu’après l’appel de la propriété «contactPoint», une accolade interne a été ouverte. Sur la ligne suivante, vous verrez le type ContactPoint appelé. Les propriétés de ce type ont été définies («telephone» et «contactType»), puis les accolades internes ont été fermées.

Il y a quelque chose d'autre dans ce cas d'utilisation qui, si vous pouvez comprendre maintenant, vous épargnera pas mal d'ennuis à l'avenir:

Regardez comme il n'y a pas de virgule après «service clientèle». C'est parce qu'il n'y a plus d'informations. partager dans cet ensemble. Mais il y a une virgule après l'accolade interne fermée, car il y a plus de données à venir (en particulier, la propriété «sameAs»).

Création d'un balisage de données structuré avec un générateur en ligne

Maintenant, nous en savons un peu. À propos de la syntaxe, commençons par créer un balisage de données structuré.

Les générateurs en ligne sont parfaits pour les débutants ou pour créer un balisage de base à partir duquel construire (et gagner du temps). Mon favori est le générateur de balisage de schéma de Merkle et c’est celui que j’utiliserai pour cette partie du guide.

Ensuite, vous devrez choisir une page et un type de balisage. Pour cet exemple, j’ai choisi https://gofishdigital.com/ comme notre page et Organisation comme notre type de balisage.

Après avoir renseigné certaines informations, notre outil a créé un balisage de base fantastique pour la page d'accueil:

Heureusement, après notre leçon sur la syntaxe, vous pourrez lire la plupart (ou la totalité) de cet exemple sans problème! [19659024] Création d'un balisage de données structuré personnalisé avec un éditeur de texte

Le balisage de base conviendra parfaitement, mais nous pouvons aller au-delà des préréglages du générateur en ligne, prendre le contrôle intégral et écrire de superbes données structurées personnalisées pour notre page. Sur https://schema.org/Organization vous verrez toutes les propriétés disponibles qui appartiennent au type de balisage Organisation. C'est bien plus que l'offre d'outils en ligne, alors retroussons nos manches et avons des ennuis!

Téléchargez un éditeur de texte

À ce stade, nous devons ranger les outils de formation et laisser les outils en ligne derrière vous. (seule déchirure). Nous avons besoin d’un endroit où nous pouvons éditer et créer un balisage personnalisé. Je ne vais pas être gentil à ce sujet – procurez-vous un éditeur de texte NOW. Cela en vaut la peine et vous servira bien au-delà du balisage structuré des données. J'utiliserai mon éditeur de texte préféré, Sublime Text 3.

Conseil professionnel: accédez à Affichage> Syntaxe> Javascript> JSON pour définir votre syntaxe de manière appropriée.

Je suis bien parti et ai collé du balisage d'organisation de base de le générateur en Sublime Text. Voici ce à quoi il ressemble:

Ajout de propriétés: mode simplifié

La ​​page https://schema.org/Organization contient tous les champs disponibles pour le type d’organisation. Notre balise de base ne contient pas d’informations de courrier électronique. J’ai donc examiné la page de schéma et constaté ceci:

La première colonne indique qu’il existe une propriété pour le courrier électronique. But! J'ajouterai une virgule après la parenthèse fermante pour définir l'espoir d'informations supplémentaires, puis j'ajouterai la propriété «email»:

La deuxième colonne de Schema.org correspond au «type attendu». Cette fois, il dit «texte», ce qui signifie que nous pouvons simplement taper l'adresse e-mail. Ça alors, j’adore quand c’est facile.

Continuons. Je veux m'assurer que notre numéro de téléphone fait partie de ce balisage. Voyons s'il existe une propriété pour ce produit…

Bingo. Et le type attendu est simplement «texte». Je vais ajouter une virgule après la propriété «email» et ajouter «téléphone». Inutile de mettre en évidence quoi que ce soit dans cet exemple;

Ajout de propriétés: mode difficile

Nous allons maintenant ajouter une propriété un peu plus compliquée, la propriété «adresse». Tout comme «email» et «téléphone», suivons le suivi sur https://schema.org/Organization .

Je vois donc «text», mais je vois aussi un type de message attendu. “PostalAddress”. Le nom du jeu avec marquage des données est le suivant: si vous pouvez être plus spécifique, soyez plus spécifique. Cliquez sur "PostalAddress" et voyez ce qui se trouve là-bas.

Je vois un certain nombre de propriétés qui nécessitent des valeurs de texte simples. Choisissons certaines de ces propriétés et ajoutons dans notre balisage «adresse»!

Voici les étapes que j'ai suivies pour ajouter ce balisage:

  • Placez une virgule après la propriété «téléphone»
  • appelée la propriété «adresse».
  • Puisque la propriété "address" a un type attendu, j'ai ouvert des accolades intérieures
  • appelée type "PostalAddress"
  • appelées les propriétés du type "PostalAddress"
  • . Fermez les accolades intérieures [19659053] Pouvez-vous repérer tout cela à partir de l'image ci-dessus? Si oui, alors félicitations – vous avez terminé le mode difficile!

    Création d’un tableau complexe

    Lors de notre discussion sur les crochets, j’ai mentionné un tableau. Les tableaux peuvent être utilisés lorsqu'une propriété (par exemple, «sameAs») comporte deux entrées ou plus

    . C'est un excellent exemple de tableau simple. Mais il y aura des moments où nous devrons créer des tableaux complexes. Par exemple, Go Fish Digital a deux emplacements différents. Comment pourrions-nous créer un tableau pour cela?

    Ce n’est pas si complexe si on le décompose. Après les informations de Caroline du Nord, vous verrez une accolade interne fermée. Je viens d'entrer une virgule, puis j'ai ajouté le même type (PostalAddress) et les propriétés de l'emplacement de Virginie. Étant donné que deux entrées ont été entrées pour la propriété «address», j'ai mis l'intégralité de la chose entre parenthèses.

    Création d'un tableau de noeuds avec @graph

    Le 16 avril 2019, Joost de Valk de de Yoast annonçait l'arrivée de Yoast SEO 11.0, qui se vantait d'un nouveau capacités de balisage de données structurées. Vous pouvez obtenir un aperçu de la mise à jour dans ce post et à partir de cette vidéo . Cependant, j'aimerais approfondir une technique particulière utilisée par Yoast pour offrir aux moteurs de recherche un balisage incroyablement informatif et connecté: créer un tableau de noeuds à l'aide de @graph * (la foule en a le souffle coupé) ).

    Le code s’ouvre avec "@graph" puis un crochet ouvert, qui appelle un tableau. Cette technique est identique à celle utilisée dans la section ci-dessus intitulée " Création d'un tableau complexe ". Le tableau étant ouvert, vous verrez une série de nœuds (ou types de schémas):

    • Organisation
    • WebSite
    • WebPage
    • BreadcrumbList
    • Article
    • Personne

    I ' séparé (voir ci-dessous) afin que vous puissiez facilement voir comment le tableau est organisé. Il existe de nombreuses propriétés appelées dans chaque noeud, mais la vraie magie est avec "@id".

    Sous le noeud Web Site ils appellent "@id" et indiquent l'URL suivante: [19659073] https://yoast.com/#website . Plus tard, après avoir créé le nœud Web Page ils affirment que la page Web fait partie du site Web yoast.com avec la ligne suivante:

    " isPartOf ": {" @id ":" https://yoast.com/#website "} .

    Comment est-ce génial? Ils ont créé des informations sur le site Web et une page Web spécifique, puis ont établi une connexion entre les deux.

    Yoast fait la même chose sous le nœud Article. Premièrement, sous WebPage, ils appellent à nouveau "@id" et déclarent l’URL https://yoast.com/wordpress-seo/#webpage . Ensuite, sous Article, ils indiquent aux moteurs de recherche que l'article (ou l'article de blog) fait partie de la page Web avec le code suivant:

    " isPartOf": {"@ id": " https : //yoast.com/wordpress-seo/#webpage "}

    Lorsque vous lisez le balisage ci-dessous, portez une attention particulière à ces deux choses:

    • Les 6 noeuds répertoriés ci-dessus, chacun séparés pour une meilleure visualisation
    • Les appels "@id" et "isPartOf", qui définissent, établissent et connectent les éléments du tableau

    Bravo, Yoast!

    Page source : https: //yoast.com/wordpress-seo/




    Source link