Comment afficher un bloc FAQ sur Google grâce aux données structurées ?

Les données structurées pour les FAQ ou « comment occuper plus de place dans la SERP ».

J’aimerais vous parler du bloc FAQ, un petit bijou pour les experts SEO, mais rarement bien exploité par les éditeurs de SaaS.

Je ne parle pas seulement de la page FAQ générique où vous recensez toutes les questions de vos prospects et clients, mais bien de « mini » FAQ utilisables sur la plupart des pages de votre site. Il vous reste maintenant à savoir comment elles seront utiles pour votre SEO.

C’est quoi les données structurées ?

Les données structurées sont des informations, qui, correctement balisées, permettent à Google et aux autres moteurs de recherche, de mieux interpréter le contenu de ces informations.

Il en existe une grande variété et la majorité d’entre elles ne permettent pas d’afficher d’informations supplémentaires dans la page de résultats de Google.

Cependant quelques-unes d’entre elles permettent d’afficher des informations complémentaires et je vais parler ici des « FAQPages ». Les fameuses foires aux questions (Frequently Asked Question en anglais).

Voici une petite démonstration de ce à quoi ça peut ressembler sur Google :

Quels standards utiliser pour mettre en place des données structurées ?

Google, Bing, Yandex et Yahoo se sont réunis pour mettre en place une standardisation de ce format. Et c’est tant mieux, ça évite que chacun fasse ça de son côté et qu’on soit obligé d’implémenter des données structurées différentes pour chaque moteur.

Ce standard, c’est Schema.org. Une ressource inépuisable de données qu’il est possible de structurer sur un site. Ce standard évolue (heureusement) et de nouveaux types de données sont régulièrement ajoutés.

Pour vous donner une idée de l’étendue de schema.org, il sera bientôt prévu de pouvoir baliser des données sur les toilettes publiques. Voilà pour l’anecdote.

Les consignes à respecter

Comme pour la plupart des fonctionnalités fournies par Google, certains ont essayé d’abuser des FAQ pour en tirer profit.

Google a donc dû sévir et les blocs FAQ s’affichent un peu moins souvent qu’au lancement de cette fonctionnalité.

Cela étant, il est toujours possible de les avoir et je vais vous indiquer les consignes à suivre pour ne pas les voir disparaître (ou ne pas s’afficher du tout).

• Les questions et leurs réponses doivent être intégralement balisées (ne pas baliser uniquement une partie de la réponse par exemple)
• Le contenu doit être visible sur la page (dans un accordéon ça fonctionne aussi bien sûr)
• Ne pas l’utiliser dans un but publicitaire (vous l’interprétez comme vous voulez 😊)
• Ne pas tenir de propos « obscènes, violents, haineux, offensants », etc.
• Ne pas utiliser la même FAQ sur l’ensemble du site (ce serait trop simple)
• De ce que j’ai pu constater, le bloc FAQ ne s’affiche pas pour une page d’accueil (votredomaine.com par exemple). Si vous avez des contre-exemples, ça m’intéresse !

Maintenant qu’on a vu les consignes, passons à la pratique !

Il y a plusieurs méthodes pour mettre en place les données structurées et Google en recommande deux d’entre elles. Voici donc les deux méthodes pour intégrer une FAQ sur votre site et la faire apparaître dans les résultats de recherche de Google.

Ajouter les données structurées de type FAQ via JSON-LD

La syntaxe JSON-LD est l’une des deux syntaxes recommandées par Google (avec les microdonnées que l’on verra dans le point suivant). Cette syntaxe, combinée au vocabulaire de schema.org, permet aux moteurs de recherche de mieux comprendre les données présentes sur votre site.

La syntaxe JSON-LD est l’acronyme de JavaScript Object Notation for Linked Data et se présente sous la forme d’un « script » à insérer sur le site.

Je rassure les non-développeurs qui me liront, pas besoin de savoir coder pour le mettre en place. Sauf si bien sûr vous voulez automatiser sa mise en place sur des milliers de pages, mais dans ce cas, parlez-en à vos développeurs, ils sauront comment faire 😊

L’avantage du JSON-LD par rapport aux microdonnées est qu’il « suffit » d’ajouter un script sur la page, vous n’avez pas besoin de modifier le balisage du site. Vous pouvez par exemple simplement présenter vos questions dans des balises paragraphe ou div ou ce que vous voulez.

Tant que le contenu est identique à celui indiqué dans le JSON-LD (et qu’il respecte les consignes du point précédent), Google fera le rapprochement et le prendra en compte pour l’afficher sur sa page de résultats.

Voici un code que vous pouvez réutiliser sur votre site en adaptant les contenus bien entendu. Ce code peut-être ajouté dans la partie <head> ou <body> de la page. Vous faites comme vous préférez, mais personnellement je préfères le placer avant la balise de fermeture </body>.

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [{
        "@type": "Question",
        "name": "Votre question N°1",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "<p>La réponse à la question N°1 avec du <strong>gras ici</strong> et pourquoi pas un lien <a href=https://hello-papaye.com>ici</a> ou <a href=https://hello-papaye.com>là</a> ;)</p>"
        }
      }, {
        "@type": "Question",
        "name": "Votre question N°2",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "<p>La réponse à la question N°2 <br /> et un saut de ligne au milieu !</p>"
        }
      }, {
        "@type": "Question",
        "name": "Votre question N°3",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "La réponse à la question 3 avec une liste à puce <ul><li>Puce 1</li><li>Puce 2</li><li>Puce 3</li></ul>"
        }
      }]
    }
</script>
Langage du code : JSON / JSON avec commentaires (json)

Ajouter les données structurées de type FAQ via les microdonnées

Une autre syntaxe utilisée pour les données structurées et la syntaxe des microdonnées (ou microdata en anglais).

Les microdonnées sont en quelques sortes, des attributs qui viennent compléter les balises HTML classiques. Si vous voyez des attributs du type « itemscope », « itemtype » ou encore « itemprop » dans le code source d’un site, c’est qu’il utilise des microdonnées (voir le code que je vous partage un peu plus bas).

Ces microdonnées ne sortent pas de nulle part. Elles sont également utilisées conjointement au vocabulaire de Schema.org dont j’ai parlé dans la partie « standards » de cet article.

Peut-être un peu plus complexe à mettre en place au début (car il faut créer le template de code ou copier celui que je vous partage juste en dessous), ces microdonnées permettent de se passer de JSON-LD.

C’est très pratique par exemple dans le cas où vous ne pourriez pas injecter facilement de JSON-LD sur vos pages, mais que vous pouvez modifier des portions de HTML.

Voici à nouveau un code, très différent, mais avec exactement les mêmes informations que dans le code précédent et que Google comprendra de la même manière :

<div itemscope="" itemtype="https://schema.org/FAQPage">
    <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
        <h3 itemprop="name">Votre question N°1</h3>
        <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
            <div itemprop="text">
                <p>La réponse à la question N°1 avec du <strong>gras ici</strong> et pourquoi pas un lien <a href="https://hello-papaye.com">ici</a> ou <a href="https://hello-papaye.com">là</a> ;)</p>
            </div>
        </div>
    </div>
    <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
        <h3 itemprop="name">Votre question N°2</h3>
        <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
            <div itemprop="text">
                <p>
                    La réponse à la question N°2 <br />
                    et un saut de ligne au milieu !
                </p>
            </div>
        </div>
    </div>
    <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
        <h3 itemprop="name">Votre question N°3</h3>
        <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
            <div itemprop="text">
                La réponse à la question 3 avec une liste à puce
                <ul>
                    <li>Puce 1</li>
                    <li>Puce 2</li>
                    <li>Puce 3</li>
                </ul>
            </div>
        </div>
    </div>
</div>
Langage du code : HTML, XML (xml)

Mettre en place une FAQ de type accordéon sans JavaScript

Si vous ne pouvez pas ou ne souhaitez pas mettre en place une FAQ de type accordéon avec JavaScript et bien voici une bonne nouvelle, c’est possible avec de simples balises HTML.

Ces balises encore trop méconnues pourraient pourtant permettre d’alléger de nombreux sites.

Il s’agit des balises <details> et <summary>. Ces balises permettent de créer un bloc de type « accordéon » en HTML. C’est compatible avec tous les navigateurs modernes et ça fonctionne sans JavaScript. Ajoutez une pincée de CSS pour un rendu plus esthétique et ce sera parfait !

Voici un exemple de code prêt à l’utilisation pour une FAQ enrichie avec des microdonnées. Remplacez simplement les questions/réponses, copiez/collez ça dans le code de la page de votre choix et admirez le résultat.

<div itemscope="" itemtype="https://schema.org/FAQPage">
    <details itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question" class="firstdetail">
        <summary itemprop="name">Votre question N°1</summary>
        <div itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
            <p itemprop="text">
                La réponse à la question N°1 avec du <strong>gras ici</strong> et pourquoi pas un lien <a href="https://hello-papaye.com">ici</a> ou <a href="https://hello-papaye.com">là</a> ;)
            </p>
        </div>
    </details>
    <details itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
        <summary itemprop="name">Votre question N°2</summary>
        <div itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
            <p itemprop="text">
                La réponse à la question N°2 <br /> et un saut de ligne au milieu !
            </p>
        </div>
    </details>
    <details itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
        <summary itemprop="name">Votre question N°3</summary>
        <div itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
            <p itemprop="text">
                La réponse à la question 3 avec une liste à puce
            <ul>
                <li>Puce 1</li>
                <li>Puce 2</li>
                <li>Puce 3</li>
            </ul>
            </p>
        </div>
    </details>
</div>
Langage du code : HTML, XML (xml)

Tester l’implémentation des données structurées de votre FAQ

Mettre en place des données structurées de type FAQ, c’est bien. S’assurer qu’elles fonctionnent, c’est mieux ! Tous les codes que je vous ai fournis un peu plus haut sont 100% fonctionnels, mais ça ne vous empêche pas de vérifier qu’aucune erreur ne s’est glissé entre mon code et vos modifications.

Pour tester la bonne implémentation de vos données structurées, il y a plusieurs méthodes :

Avec l’outil de test des données structurées officiel de Google

 Il y a un outil gratuit fourni par Google. C’est tout simplement « l’outil de test des données structurées ». Il vous suffit alors d’indiquer l’URL de la page à tester dans le champ qui s’affiche et en quelques secondes, vous aurez le résultat.

Vérifier les données structurées avec une extension de navigateur

Si vous préférez ne pas quitter la page et que vous aimez les extensions de navigateurs, il en existe une qui s’appelle « structured data testing tool ». Lorsque vous cliquez sur l’extension, elle va soumettre votre page à l’outil de Google et vous rapporter le résultat d’une façon un peu plus visuelle sans que vous n’ayez besoin de quitter la page.

Au fait, si le sujet vous intéresse, j’ai écrit un article sur les extension de navigateurs pour le SEO.

Vérifier les données structurées avec Screaming Frog

Si vous êtes consultant SEO et que vous avez Screaming Frog, vous pouvez configurer le crawler pour vérifier la présence et la validité des données structurées.

Bonus : le bookmarklet pour aller plus vite.

Enfin, rien que pour vous, je vous donne mon bookmarklet. Un clic sur ce raccourci et vous soumettez la page sur laquelle vous vous trouvez à l’outil de test des données structurées de Google.

Pour l’utiliser, il vous suffit de sélectionner le code ci-dessous et le glisser dans votre barre de raccourci. C’est cadeau 😉

javascript:void(window.open(%27https://search.google.com/structured-data/testing-tool%23url=%27+window.location.href,%27_blank%27));
Langage du code : JavaScript (javascript)

Vous êtes arrivés à la fin de cet article et j’espère que vous avez trouvé les informations que vous cherchiez pour mettre en place de belles FAQ qui apparaitront dans les résultats de recherche de vos prospects.

Pour aller plus loin, voici quelques ressources supplémentaires :

• Le doc de Google sur les FAQ
• La page sur les FAQ chez Schema.org

Pour compléter cet article, j’ai ajouté un bloc FAQ ci-dessous pour que vous puissiez vous rendre compte de ce à quoi ça peut ressembler. J’ai utilisé le 3ème code indiqué avec les balise details et summary en ajoutant une pointe de CSS.