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

Les richs snippets ou données structurées sont devenues indispensables pour le SEO. Utilisez-les sur votre site Webflow pour booster vos performances !

18 Mai 2022
5 min
Auteur
Benoît Eveillard
Co-fondateur de Justa
S'inscire à notre newsletter
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Partager l'article
https://justa.fr/articles/integrer-les-donnees-structurees-sur-webflow

Les richs snippets ou données structurées permettent au moteur de recherche de mieux comprendre votre contenu, de mieux l’indexer. Ils sont régis par le standard schema.org.

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.

capture d'écran d'une recherche Google

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

exemple de données structurées sur Google

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 car 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": "Première question",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "La réponse à ma première question"
    }
  },{
    "@type": "Question",
    "name": "Deuxième question",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "La réponse à la deuixème question"
    }
  }]
}
</script>

Copier le script ci-dessus

{{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>

Copier le script ci-dessus

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

Capture d'écran de l'intégration de schema.org sur Webflow

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 :

Vous souhaitez progresser sur Webflow ?

Recevez nos articles & guides. 1 fois par mois seulement.