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. Vous pouvez ainsi attirer plus de visiteurs sur votre site en leur fournissant des aperçus contenant des informations plus complètes que celles 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 avec des informations plus complètes que celles qui seraient disponibles autrement.

Résumé

  • Utilisez des microdonnées Schema.org pour indiquer le titre, la description et une image de la page pour Google+.
  • Utilisez le protocole Open Graph (OGP) pour indiquer le titre, la description et une image de la page pour Facebook.
  • Utilisez des fiches Twitter pour fournir un titre, 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 avec 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, lequel est le plus susceptible d'être cliqué ? Les utilisateurs sont attirés par les images et sont plus confiants lorsqu'ils ont un aperçu anticipé de ce qu'ils trouveront.

Avec le balisage approprié: le titre correct, une courte description et une image sont inclus. L'ajout de ces éléments peut contribuer à accroître l'engagement.
Avec la balise appropriée: le titre correct, une brève description et une image sont inclus. L'ajout de ces éléments peut contribuer à accroître l'engagement.
Sans la balise appropriée, seul le titre de la page est inclus.
Sans la balise appropriée, seul le titre de la page est inclus.

Lorsqu'une personne sur un réseau social souhaite partager votre site Web avec ses amis, elle 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 répondre à l'objectif 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 un titre, une description et une image attrayante. Ils n'ont donc pas à perdre un temps précieux (ou 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 les 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 "head" d'une page Web, les microdonnées se trouvent là où se trouve le contexte.

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 sur un élément particulier.

Ajouter 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 itemscope. La valeur d'un itemtype peut être déterminée en fonction du type de contenu de votre page Web. Vous devriez pouvoir en trouver un 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 typiques 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

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 permettre aux pages Web d'avoir les 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 "head" de votre page, ces métadonnées fournissent des informations riches sur l'extrait lorsque la page est partagée.

Utiliser des balises meta dans 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 adapté à votre page Web sur cette page.

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

En savoir plus

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

Valider les extraits enrichis

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

Utiliser des 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 telles que des images et des vidéos à vos tweets avec un lien vers votre page Web. Si vous ajoutez les métadonnées appropriées, une fiche incluant les informations détaillées que vous avez ajoutées s'affichera dans les tweets contenant des liens vers votre page.

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

Pour qu'une fiche Twitter fonctionne, votre domaine doit être approuvé et contenir une balise méta 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 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.

Fiche Twitter.

En savoir plus

Pour en savoir plus sur les fiches Twitter, consultez les pages suivantes:

Valider les extraits enrichis

Pour valider votre balisage, Twitter fournit les éléments suivants:

Bonne pratique

Compte tenu des 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 les balises Open Graph partagent certaines balises:

  • itemscope se trouve sur la balise head
  • title et description sont partagés entre les microdonnées et les 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 que votre page Web s'affiche comme prévu sur chaque site de réseau social avant de la publier.