Intégrer les données structurées sur Webflow [Guide 2023]

Données structurées : késako ?

Les rich snippets sont une façon de donner du contexte à Google sur le contenu d’une page. Cela permet aussi à votre site de s’afficher d’une manière différente sur les moteurs de recherche. On les retrouve beaucoup pour les recettes de cuisine, les événements ou les FAQ.

Par exemple, quand je tape “pâte à crêpes” sur Google, il me donne différentes réponses sous une forme différentes que les résultats de recherche classique. Ce sont les données structurées.

‍

‍

Autre exemple ici avec les événements. Quand je tape "concert paris" j'ai à nouveau des réponses sous une certaine forme :

‍

‍

Intégrer les données structurées sur Webflow vous permettra de :

1. Mieux se positionner car le contenu est plus facilement compréhensible et donc indexable par Google
2. Améliorer votre taux de clics parce que le contenu est sous un format particulier.

Cela peut aussi aider à être en position 0 sur certaines requêtes. On avait mis cela en place chez Skello et ça nous a permis de grappiller des positions !

Comment intégrer les données structurées sur Webflow ?

Les données structurées impliquent l’utilisation d’un petit bout de code. Les différents types de données structurées sont disponibles sur Schema.org, qui est le standard des extraits enrichis.

On peut les intégrer au format JSON-LD (voir la doc pour plus d’infos au sujet de JSON-LD) très facilement sur Webflow. Vous intégrerez le petit bout de code dans le body de votre page.

L’intérêt de le mettre sur une page template dans Webflow, pour un article de blog par exemple, c’est que vous pouvez intégrer les variables (nom, image, auteur etc..). Ainsi, vous intégrez le code une fois et il sera disponible sur toutes les pages template.

Exemples :

Pour une FAQ au sein d’une page, vous intégrerez ce qui suit :

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Question 1",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Réponse 1"
      }
    },
    {
      "@type": "Question",
      "name": "Question 2",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Réponse 2"
      }
    }
  ]
}
</script>

‍

{{newsletter-blog}}

‍

Pour un article d’un blog vous intégrerez ce qui suit :

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Article",
  "author": "Benoît Eveillard",
  "headline": "Intégrer les données structurées sur Webflow [Guide 2022]",
  "image": "https://assets.website-files.com/620cca8ef774f039ab1c22cf/62c8ae694df59b296a3f27c9_blog-scripts.jpeg",
  "datePublished": "2022-07-25T22:00:00.000Z",
  "publisher": {
    "@type": "Organization",
    "name": "Benoît Eveillard de Justa",
    "logo": {
      "@type": "ImageObject",
      "url": "https://assets.website-files.com/620a9f02ae04dbaf6215a432/6218e0669a0ee9b44f441232_logo-justa.svg"
    }
  },
  "dateModified": "2022-07-25T22:00:00.000Z",
  "description": "Les richs snippets ou données structurées sont devenues indispensables pour le SEO. Utilisez-les sur votre site Webflow pour booster vos performances !"
}
</script>

‍

Pour l’article de blog, c’est intéressant de le mettre sous forme de variables sur Webflow, comme ci-dessous :

‍

‍

Une fois que vous avez mis cela en place, pensez à bien tester grâce à cet outil de Google.

Pour construire vos données structurées, inutile de le faire manuellement, vous pouvez utiliser :

• L’outil de Rankranger
• L’outil de Technicalseo
• Utiliser Sneaps