Visibilité sur les réseaux sociaux

Vous pouvez avoir une influence sur l'apparence de votre site lorsqu'il est partagé via les réseaux sociaux en ajoutant quelques lignes de code à chaque page. Cela peut vous aider à attirer plus de visiteurs sur votre site en fournissant des aperçus contenant des informations plus complètes que celles qui seraient disponibles autrement.

Eiji Kitamura

Vous pouvez avoir une influence sur l'apparence de votre site lorsqu'il est partagé via les réseaux sociaux en ajoutant quelques lignes de code à chaque page. Cela peut vous aider à attirer plus de visiteurs sur votre site en fournissant des aperçus contenant des informations plus riches que celles qui seraient disponibles autrement.

Résumé

• Utilisez les microdonnées schema.org pour fournir le titre de la page, la description et une image pour Google+.
• Utilisez le protocole Open Graph (OGP) pour fournir le titre, la description et une image de la page pour Facebook.
• Utilisez les Twitter Cards pour fournir le titre de la page, une description, une image et un ID Twitter pour Twitter.

Vous pouvez avoir une influence sur l'apparence de votre site lorsqu'il est partagé via les réseaux sociaux en ajoutant quelques lignes de code à chaque page. Cela peut contribuer à augmenter l'engagement en fournissant des aperçus contenant des informations plus riches que celles qui seraient disponibles autrement. Sans cela, les sites de réseaux sociaux ne fourniront que des informations de base, sans images ni autres informations utiles.

Selon vous, laquelle est la plus susceptible d'être cliquée ? Les internautes sont attirés par les images et sont plus confiants dans le fait qu'ils aimeront ce qu'ils trouvent lorsqu'ils ont un aperçu anticipé.

Avec le balisage approprié : le titre correct, une brève description et une image sont inclus. L'ajout de ces éléments peut vous aider à augmenter l'engagement.

Sans le balisage approprié, seul le titre de la page est inclus.

Lorsqu'un utilisateur d'un réseau social souhaite partager votre site Web avec ses amis, il ajoute probablement quelques notes expliquant à quel point il est génial, puis le partage. Toutefois, décrire un site Web peut s'avérer fastidieux et ne pas correspondre au point de vue du propriétaire de la page. Certains services limitent le nombre de caractères que les utilisateurs peuvent saisir dans la note.

En ajoutant les métadonnées appropriées à vos pages, vous pouvez simplifier le processus de partage pour les utilisateurs en fournissant le titre, une description et une image attrayante. Cela signifie qu'ils n'ont pas besoin de passer du temps (ou d'utiliser des caractères) à décrire le lien.

Utiliser schema.org et les microdonnées pour fournir des extraits enrichis sur Google+

Les robots d'exploration utilisent de nombreuses méthodes pour analyser une page et comprendre son contenu. En utilisant des microdonnées et le vocabulaire schema.org, vous aidez les sites de réseaux sociaux et les moteurs de recherche à mieux comprendre le contenu de la page.

Exemple :

<div itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">Enjoy fireworks</h1>
  <p itemprop="description">Fireworks are beautiful.
   This article explains how beautiful fireworks are.</p>
  <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
</div>

Alors que la plupart des métadonnées sont intégrées dans la section d'en-tête d'une page Web, les microdonnées se trouvent là où le contexte existe.

Ajouter itemscope pour définir le champ d'application des microdonnées

En ajoutant itemscope, vous pouvez spécifier la balise en tant que bloc de contenu concernant un élément particulier.

Ajoutez itemtype pour définir le type de votre site Web.

Vous pouvez spécifier le type d'élément à l'aide de l'attribut itemtype et de l'attribut itemscope. La valeur d'un itemtype peut être déterminée en fonction du type de contenu de votre page Web. Vous devriez en trouver un qui correspond à vos besoins sur cette page.

Ajoutez itemprop pour décrire chaque élément à l'aide du vocabulaire schema.org.

itemprop définit les propriétés de itemtype dans le champ d'application. Pour fournir des métadonnées aux sites de réseaux sociaux, les valeurs itemprop standards sont name, description et image.

Valider les extraits enrichis

Pour valider les extraits enrichis sur Google+, vous pouvez utiliser des outils tels que :

• Outil de test des données structurées – Search Console

Utiliser le protocole Open Graph (OGP) pour fournir des extraits enrichis sur Facebook

Le protocole Open Graph (OGP) fournit à Facebook les métadonnées nécessaires pour que les pages Web disposent des mêmes fonctionnalités que les autres objets Facebook.

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">

Lorsqu'elles sont incluses dans la section d'en-tête de votre page, ces métadonnées fournissent des informations sur les extraits enrichis lorsque la page est partagée.

Utilisez les balises meta de l'espace de noms og: pour décrire les métadonnées.

Une balise meta se compose d'un attribut property et d'un attribut content. Les propriétés et les contenus peuvent prendre les valeurs suivantes :

Propriété	Contenu
og:title	Titre de la page Web.
og:description	Description de la page Web.
og:url	URL canonique de la page Web.
og:image	URL d'une image jointe au post partagé.
og:type	Chaîne indiquant le type de la page Web. Vous pouvez en trouver un qui convient à votre page Web ici.

Ces balises Meta fournissent des informations sémantiques aux robots d'exploration des sites de réseaux sociaux, comme Facebook.

En savoir plus

Pour en savoir plus sur les éléments que vous pouvez joindre au post sur Facebook, consultez le site officiel du protocole Open Graph.

• ogp.me

Valider les extraits enrichis

Pour valider votre balisage sur Facebook, vous pouvez utiliser des outils tels que :

• Debugger

Utiliser les cartes Twitter pour fournir des extraits enrichis sur Twitter

Les cartes Twitter sont une extension du protocole Open Graph applicable à Twitter. Elles vous permettent d'ajouter des pièces jointes multimédias, comme des images et des vidéos, à des tweets contenant un lien vers votre page Web. En ajoutant les métadonnées appropriées, les tweets contenant des liens vers votre page incluront une fiche avec les informations détaillées que vous avez ajoutées.

Utiliser des balises Meta d'espace de noms twitter: pour décrire les métadonnées

Pour qu'une Twitter Card fonctionne, votre domaine doit être approuvé et doit contenir une balise Meta dont l'attribut name est twitter:card au lieu de l'attribut property.

Voici un exemple simple :

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="agektmr">

En attribuant l'ID Twitter à la valeur de twitter:site, Twitter intègre ces informations dans le post partagé afin que les utilisateurs puissent facilement interagir avec le propriétaire de la page.

En savoir plus

Pour en savoir plus sur les Twitter Cards, consultez :

• Site pour les développeurs Twitter

Valider les extraits enrichis

Pour valider votre balisage, Twitter fournit :

• Outil de validation des fiches

La bonne pratique

Compte tenu de ces trois options, la meilleure chose à faire est de les inclure toutes dans votre page Web. Exemple :

<!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
  <!-- define microdata scope and type -->
  <head itemscope itemtype="http://schema.org/Article">
    <title>Social Site Example</title>
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
    <!-- define ogp image -->
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <!-- use link[href] to define image url for microdata -->
    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
    <!-- define ogp type -->
    <meta property="og:type" content="website">
    <!-- define twitter cards type -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- define site's owner twitter id -->
    <meta name="twitter:site" content="agektmr">
    <!-- define description for ogp and itemprop of microdata in one line -->
    <meta property="og:description" itemprop="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <!-- general description (separate with ogp and microdata) -->
    <meta name="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
  </head>

Notez que les microdonnées et l'OGP partagent certains balisages :

• itemscope se trouve au niveau de la balise head
• title et description sont partagés entre les microdonnées et l'OGP.
• itemprop="image" utilise la balise link avec l'attribut href au lieu de réutiliser la balise meta avec property="og:image"

Enfin, assurez-vous de vérifier que votre page Web s'affiche comme prévu sur chaque réseau social avant de la publier.