Actualités

[08/09/2017] Breaking news ! Smile décroche le label Happy Trainees 2018

Après le label HappyAtWork, Smile s’offre celui décerné par ses stagiaires et alternants !

[21/07/2017] Smile lance les premiers vélos solaires connectés à l’occasion du Sun Trip Tour 2017

Smile, leader des solutions IoT et open source, confirme sa solide expertise sur le marché de l’embarqué en participant activement à la course de vélos solaires du Sun Trip Tour.

[03/07/2017] Smile remporte le Drupagora d'Or 2017 du meilleur site e-commerce

Le vendredi 30 juin, la 3ème édition des Drupagora d'Or s'est déroulée à Paris.

Toutes les actualités picto
       

Vous avez besoin de mettre à jour votre Lecteur Flash Flash 7

Guillemet ouvrant l'actualité des solutions
et des technologies open source Guillemet fermant
picto

Petit Guide d’implémentation du schéma "Howto" de Google

À la recherche des résultats les plus pertinents et des meilleurs moyens de satisfaire ses utilisateurs Google et consorts ont adopté les Rich Snippets de schema.org et notamment le schéma "HowTo".

À la recherche des résultats les plus pertinents et des meilleurs moyens de satisfaire ses utilisateurs Google et consorts ont adopté les Rich Snippets de schema.org et notamment le schéma "HowTo".

Pourquoi ce schéma est-il important ? Parce qu’un résultat est jugé pertinent quand il répond à une question et qu’il est rapide. Ce schéma est d’autant plus important qu’il s’agit d’un schéma spécifique à la mobilité qui génère une grande quantité des requêtes actuelles. De plus, 30% de la navigation se fera sans écran d’ici 1 an à travers les assistants vocaux. Il paraît essentiel d’optimiser son site, non seulement pour les premières positions, mais également pour la position 0. Sur les assistants vocaux, tels Google Home, Alexa ou Cortana, ce sera même le seul et unique résultat.

Vous connaissez tous les Featchured Snippets dans la recherche Google. Vous savez, ce sont ces petites boites qui contiennent des réponses rapides sous forme de réponses directes, listes, tableaux, questions.

Mais que faut-il faire pour se positionner sur de telles positions ?

Après un accord entre les trois principaux moteurs de recherche Google, Yahoo et Bing un standard commun intitulé "Schema.org" a vu le jour dès 2011.

Schema.org fournit une collection de vocabulaires partagés, les entités nommées,que les webmasters peuvent utiliser pour baliser leurs pages d'une manière qui peut être comprise par les principaux moteurs de recherche, dont Google, Yahoo et Bing.

Parmi ces fragments d’encodage, un nouveau type d’extraits/fragments (snippets) de codes permettent de donner des instructions qui expliquent comment obtenir un résultat en exécutant une séquence d'étapes. Ces extraits sont nommés "HowTo".

Les requêtes vocales représentent une part grandissante des recherches sur les moteurs et sont de plus en plus formulées sous forme de questions. Le balisage HowTo est donc un must have sur votre site, et même un impératif si vous visez la position 0.

Les extraits "HowTo" visent à fournir des instructions étape par étape directement dans les SERPs pour les requêtes basées sur des instructions. Il existe deux types d'extraits :

  1. Une vue standard en accordéon des instructions
  2. Un carrousel d’images montrant chaque étape individuellement

Une question vient alors à l’esprit : “Quel type d'extrait HowTo est le plus pertinent pour mon public ?” En effet, cela dépend de votre cible et de l’expérience que vous souhaitez leur apporter.

Par exemple, si on cible un public plutôt sensible à l’image, il est préférable d'utiliser des extraits riches en images. Surtout, n’hésitez pas à le tester et à le modifier en fonction de vos résultats.

Source : Outils de recherche Google pour développeurs

Pour un certain nombre de raisons, l’accordéon est le plus répandu :

  • Il est plus facile à baliser
  • Pour expliquer l'étape, chaque élément de la liste peut simplement comporter quelques lignes de texte
  • Les gens reconnaissent les featured snippets et le résultat standard "HowTo" ne perturbe pas l’expérience utilisateur

A part la différence visuelle, la seule différence entre le carrousel et l’accordéon après avoir cliqué, est que le carrousel permet de définir une ancre de lien à chaque étape, ce qui n’est pas possible pour l’accordéon.

Les Featured Snippets peuvent changer l’engagement des utilisateurs. Il s’agit donc d’un élément à suivre du point de vue du SEO et de l’UX.

La meilleure source d'information pour comprendre les objets du schéma "HowTo" restent les outils de développement de la recherche Google.

Cependant, pour des SEO moins techniques la complexité des informations disponibles pourrait en dissuader plus d’un pour la mise en œuvre et les tests.

Nous décomposons ici chaque élément du schéma et tentons d’expliquer ce qu'il signifie pour permettre à tous de mieux comprendre et appliquer les bonnes pratiques.

Type : Ceci définit uniquement le type de schéma que vous utilisez sur la page. Dans le cas présent, nous allons utiliser le type "HowTo".

Nom : Considérez ceci comme le titre de votre extrait. En termes SEO de base, c'est l'équivalent de l'attribut de titre de page d'une page web normale.

Description : Il s’agit de décrire ce que vous allez décomposer en étapes. Restez bref, précis et suffisamment intéressant pour encourager le clic.

HowToStep : Le "HowToStep" est l'endroit où nous disons à Google que nous sommes sur le point de tracer une étape numérotée pour apparaître dans les SERPs. Google compte les instances du "HowToStep" pour comprendre combien de pas il y a au total.

Texte : Celui-ci se trouve sous le "HowToStep", "HowToDirection" ou "HowToTip". Ceci est votre explication de base de l'un des trois éléments "HowTo" mentionnés ci-dessus.

HowToDirection : C'est là que cela peut devenir délicat. Utiliser le "HowToDirection" vous permet de définir des étapes secondaires, plutôt que d'utiliser un seul paragraphe. Cependant "HowToStep" est l'élément le plus facile à mettre en œuvre.

URL : La meilleure approche est d'ajouter des liens ancrés à chaque étape de vos "How-to" Snippets. Il n'est utilisé que pour des résultats riches en images. Donc, si vous utilisez l'accordéon, ajoutez simplement l'URL de la page principale à cet élément.

Objet Image : Cela peut être utilisé pour définir l'image principale de votre extrait. Il peut également être utilisé pourremplir les étapes du carrouselque l'on trouve dans le schéma "How-to" riche en images.

Temps total(format ISO 8601) : C'est un élément essentiel. Le temps définit, pour votre utilisateur dans les SERPs est le temps qu’il faudra pour réaliser l’action.

 

Créez votre propre balisage "HowTo" simplement en laissant Google faire le travail difficile pour vous. Vous n’avez pas besoin d'être un développeur web à part entière pour travailler avec le balisage Schema.org.

Vous pouvez commencer par utilisez le code généré dans l'exemple de Google et l'ajuster comme bon vous semblera.

Résultat enrichi standard pour un guide avec une seule image dans l’outil de test Google.

Et voilà le code source de l’exemple du carrousel d’images de Google avec plusieurs images.

<html>

<head>

<title>How to tie a tie</title>

</head>

<body>

<script type="application/ld+json">

{

  "@context": "http://schema.org",

  "@type": "HowTo",

  "image": {

    "@type": "ImageObject",

    "url": "https://example.com/1x1/photo.jpg"

  },

  "name": "How to tie a tie",

  "description": "The four-in-hand knot is a great look for any occasion. From formal suits to casual jacket and tie affairs, it’s a simple way to quickly look great. Once you have mastered the knot you can tie it in just a minute, so it’s also great when you’re in a pinch too. ",

  "totalTime": "PT2M",

  "video": {

    "@type": "VideoObject",

    "name": "Tie a Tie",

    "description": "How to tie a four-in-hand knot.",

    "thumbnailUrl": "https://example.com/photos/photo.jpg",

    "contentUrl": "http://www.example.com/videos/123_600x400.mp4",

    "embedUrl": "http://www.example.com/videoplayer?id=123",

    "uploadDate": "2019-01-05T08:00:00+08:00",

    "duration": "P1MT10S"

  },

  "supply": [

    {

      "@type": "HowToSupply",

      "name": "A tie"

    }, {

      "@type": "HowToSupply",

      "name": "A collared shirt"

    }

  ],

  "tool": [

    {

      "@type": "HowToTool",

      "name": "A mirror"

    }

  ],

  "step":[

    {

      "@type": "HowToStep",

      "name": "Preparations",

      "text": "Button your shirt how you’d like to wear it, then drape the tie around your neck. Make the thick end about 1/3rd longer than the short end. For formal button down shirts, it usually works best with the small end of the tie between 4th and 5th button.",

      "image": "https://example.com/1x1/step1.jpg",

      "url": "https://example.com/tie#step1"

    }, {

      "@type": "HowToStep",

      "name": "Crossing once",

      "text": "Cross the long end over the short end. This will form the basis for your knot.",

      "image": "https://example.com/1x1/step2.jpg",

      "url": "https://example.com/tie#step2"

    }, {

      "@type": "HowToStep",

      "name": "Second crossing",

      "text": "Bring the long end back under the short end, then throw it back over the top of the short end in the other direction.",

      "image": "https://example.com/1x1/step3.jpg",

      "url": "https://example.com/tie#step3"

    }, {

      "@type": "HowToStep",

      "name": "Loop in",

      "text": "Now pull the long end through the loop near your neck, forming another loop near your neck.",

      "image": "https://example.com/1x1/step4.jpg",

      "url": "https://example.com/tie#step4"

    }, {

      "@type": "HowToStep",

      "name": "Pull and tighten",

      "text": "Pull the long end through that new loop and tighten to fit!",

      "image": "https://example.com/1x1/step5.jpg",

      "url": "https://example.com/tie#step5"

    }

  ]

}

</script>

</body>

</html>

 

N’hésitez pas, vous pouvez facilement changer tous les éléments d'un Schéma "How-to" valide, généré par Google lui-même.

Certaines des balises "HowTo" peuvent ne pas être pertinentes pour ce que vous essayez de faire, alors, commencez simplement par supprimer les sections qui ne sont pas pertinentes pour votre contenu ou votre cible.

Mais rien de plus parlant qu’un exemple de schéma "HowTo", n’est-ce pas ?

Disons que je possède un blog qui parle de jardinage et que j'ai un article sur la façon d’aménager mon jardin ou terrasse.

Et pour avoir un aperçu de ce que cela donne dans les SERPs, vous n'avez qu'à sélectionner “prévisualiser” le résultat de la recherche dans votre générateur de code et cela vous donnera deux options parmi lesquelles vous pourrez choisir : carrousel ou liste accordéon

Exemple d'images et textes utilisées à des fins éducatives du site blog-jardin.fr.

Dans ce cas, j'ai marqué ma page pour afficher un carrousel.

Attention Schema.org est capricieux et vous allez très vite vous apercevoir d’erreurs de balisage. Une simple faute d'orthographe pourrait désynchroniser tout votre script. Cependant ce n’est pas ce qui devrait vous faire peur car il est aisé de corriger ces erreurs grâce à l’outil de Google. 

Les erreurs les plus courantes proviennent, en général, de propriétés requises manquantes (connues sous le nom de type de classe) ou d’erreurs de syntaxe (erreurs non catégorisées).

Incorrect value type : Ce type d'erreur signifie que vous avez omis ou mal tapé la valeur de votre étape "HowTo". Dans notre cas cela pourrait être les HowToStep, HowToDirection, HowToTip

Parsing error: Missing “,” or “]” in an array declaration : Cela signifie que vous n'avez pas fermé un crochet ouvert quelque part dans votre code. Il faudrait creuser dans le code lui-même pour le trouver. Heureusement, Google met en évidence la ligne dans laquelle l'erreur apparaît sur le générateur de schéma.

Parsing error: Missing “,” or “}” : Très similaire à l'erreur de syntaxe précédente, cette erreur signifie que vous n'avez pas réussi à fermer votre {, ou que vous avez oublié d'ajouter une virgule avant le début de votre prochaine ouverture {.

Mais après autant d’efforts pour rendre votre contenu facilement indexable par les moteurs de recherche il y a aussi une petite récompense. Vous pouvez sauter la file d'attente et demander à Google de parcourir votre URL plus tôt que prévu pour vous assurer qu'il arrive bien à comprendre votre contenu et, on l’espère et on vous le souhaite très fort, trouve votre nouvelle balise "Comment faire" très pertinente.

Le moyen le plus simple est d’utiliser votre Google Search Console et l'outil d'inspection d'URL. L'indexation se fait presque immédiatement ; peu importe la taille de votre site.

Donc, si vous êtes impatient de voir si votre travail acharné a porté ses fruits, c'est un excellent moyen de vérifier que Google a identifié les changements apportés à votre URL. Suivez vos performances dans la Google Search Console également. C’est là que vous pourrez vous rendre compte des performances de votre contenu en termes d’impressions et de clics.

Ce type de balisage est encore un Eldorado car son usage n’est pas encore généralisé malgré les enjeux importants. En étant pionnier dans ce type de balisage, vous pourriez capter beaucoup de visibilité, mais vérifiez toujours si ce balisage est le plus pertinent pour votre site car cette augmentation de visibilité a pour objectif d’améliorer votre contenu et l’expérience utilisateur.

Nous attirons votre attention sur le fait que, si la position 0 vous permet d’améliorer votre visibilité, elle ne permet d’améliorer significativement  votre trafic direct. En effet, Google organise la rétention de l’internaute sur son moteur en apportant directement la réponse sur la page de résultats sans avoir à aller sur le site. En revanche, vous apportez une expérience positive à l’internaute qui sera malgré tout incité à visiter votre site... Et plus si affinité.

Rossitza Mavreau
picto

Commentaires

Soyez la premiere personne à ajouter un commentaire sur cet article.
Ecrire un nouveau commentaire