Pour améliorer la visibilité sur les réseaux sociaux, vous pouvez également ajouter des balises Open Graph et des données structurées (Schema.org) à votre page.
Les données structurées
L’utilisation de données structurées sur une page HTML a pour objectif d’aider les moteurs de recherche et autres services en ligne à mieux comprendre, interpréter et afficher le contenu d’une page web.
Les données structurées permettent de fournir des informations supplémentaires sur le contenu de la page, telles que le type d’objet (par exemple, un article, un événement ou une recette), ses propriétés (comme l’auteur, la date de publication ou la durée) et les relations entre différents objets.
Pour ajouter des données structurées à une page HTML, on utilise généralement des formats spécifiques, tels que JSON-LD, Microdata ou RDFa. L’un des vocabulaires les plus populaires et largement adoptés pour décrire les données structurées est Schema.org, qui a été développé en collaboration par Google, Bing, Yahoo! et Yandex.
Exemple d’utilisation des balises Schema.org
L’ajout de données structurées à une page HTML se fait en intégrant des balises spécifiques ou en ajoutant des scripts JSON-LD dans le code source de la page.
Par exemple, pour décrire un recette de cuisine avec Schema.org, on pourrait utiliser les balises JSON-LD (format recommandé par Google) suivantes :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recette de la tarte aux pommes - Les Gourmandises de Sophie</title>
<meta name="description" content="Découvrez notre délicieuse recette de la tarte aux pommes, simple et rapide à réaliser.">
<!-- Données structurées de la page -->
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Recipe",
"name": "Tarte aux pommes",
"author": {
"@type": "Person",
"name": "Sophie"
},
"datePublished": "2020-10-05",
"description": "Une délicieuse recette de tarte aux pommes, simple et rapide à réaliser.",
"prepTime": "PT30M",
"cookTime": "PT45M",
"totalTime": "PT1H15M",
"recipeYield": "8 parts",
"image": "https://www.example.com/images/tarte-aux-pommes.jpg",
"recipeIngredient": [
"1 pâte brisée",
"4 pommes",
"50 g de sucre",
"2 œufs",
"20 cl de crème fraîche",
"1 cuillère à café de cannelle"
],
"recipeInstructions": [
{
"@type": "HowToStep",
"text": "Préchauffez le four à 180°C (thermostat 6)."
},
{
"@type": "HowToStep",
"text": "Étalez la pâte brisée dans un moule à tarte et piquez le fond avec une fourchette."
},
{
"@type": "HowToStep",
"text": "Pelez et coupez les pommes en fines lamelles, puis disposez-les sur la pâte."
},
{
"@type": "HowToStep",
"text": "Dans un bol, mélangez les œufs, le sucre, la crème fraîche et la cannelle, puis versez le mélange sur les pommes."
},
{
"@type": "HowToStep",
"text": "Enfournez la tarte et faites cuire pendant 45 minutes, jusqu'à ce qu'elle soit dorée."
}
],
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.5",
"ratingCount": "120"
}
}
</script>
<!-- Fin données structurées -->
</head>
<body>
<!-- Contenu de la page : titre, recette, instructions, etc. -->
</body>
</html>Dans cet exemple, j’ai utilisé la syntaxe JSON-LD et le vocabulaire Schema.org pour décrire une recette de tarte aux pommes. Les informations structurées incluent le nom de la recette, l’auteur, la date de publication, la description, les temps de préparation et de cuisson, les ingrédients, les instructions et la note globale.
En utilisant une vraie image, avec l’outil de prévisualisation proposé par Google, le résultat ressemblerait à cela dans les moteurs de recherche (en utilisant une vraie image) :
En bref
En utilisant des données structurées, on permet aux moteurs de recherche et aux services en ligne de mieux comprendre le contenu de la page, ce qui peut améliorer la visibilité et le référencement de la page, ainsi que la présentation des informations dans les résultats de recherche, les extraits enrichis et les plateformes de partage sur les réseaux sociaux.
Ressources externes complémentaires :
audreytips.com/donnees-structurees/ www.hostinger.fr/tutoriels/balisage-schema-org/ blog.hubspot.fr/marketing/schema-org fr.semrush.com/blog/guide-balisage-schema/
Les balises Open Graph, pour maitriser le contenu des partages sur les réseaux sociaux
Les balises Open Graph sont des méta-balises spécifiques utilisées pour décrire et structurer le contenu d’une page web, principalement pour optimiser sa représentation sur les réseaux sociaux comme Facebook, Twitter et LinkedIn.
Lorsqu’un utilisateur partage un lien vers une page web contenant des balises Open Graph, ces plateformes utilisent les informations fournies pour créer une prévisualisation riche et attrayante du contenu.
Exemple d’utilisation des balises Open Graph
Voici un exemple concret d’application des balises Open Graph pour partager une recette de cuisine sur les réseaux sociaux :
<!DOCTYPE html>
<html lang="fr" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recette de la tarte aux pommes - Les Gourmandises de Sophie</title>
<meta name="description" content="Découvrez notre délicieuse recette de la tarte aux pommes, simple et rapide à réaliser.">
<!-- Balises Open Graph -->
<meta property="og:title" content="Recette de la tarte aux pommes - Les Gourmandises de Sophie">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.example.com/recettes/tarte-aux-pommes">
<meta property="og:image" content="https://www.example.com/images/tarte-aux-pommes.jpg">
<meta property="og:description" content="Découvrez notre délicieuse recette de la tarte aux pommes, simple et rapide à réaliser.">
<meta property="og:site_name" content="Les Gourmandises de Sophie">
<meta property="article:published_time" content="2020-10-05T12:00:00+01:00">
<meta property="article:author" content="Sophie">
<!-- Fin balises Open Graph -->
</head>
<body>
<!-- Contenu de la page : titre, recette, instructions, etc. -->
</body>
</html>Dans cet exemple, j’ai ajouté les balises Open Graph pour décrire une recette de tarte aux pommes. Ces balises permettent aux plateformes de réseaux sociaux (comme Facebook, Twitter, LinkedIn, etc.) d’afficher un aperçu optimisé lorsqu’un utilisateur partage l’URL de la page.
Les balises Open Graph incluent le titre, le type de contenu (article, dans cet exemple), l’URL, l’image, la description, le nom du site et des informations supplémentaires spécifiques à l’article, comme la date de publication et l’auteur.
Voici, par exemple, à quoi ressemblerait une page html utilisant les balises Open Graph partagée sur les réseaux sociaux :
En bref
En intégrant ces balises Open Graph, vous assurez une meilleure présentation et visibilité de votre contenu lorsqu’il est partagé sur les réseaux sociaux. L’objectif est clairement d’améliorer l’engagement des utilisateurs et le trafic vers votre site.
Ressources externes complémentaires
www.referenseo.com/guide-seo/open-graph/ smartkeyword.io/seo-on-page-open-graph-twitter-card/ blog.hubspot.fr/marketing/open-graph-facebook