Visibilité sur les réseaux sociaux

Vous pouvez influer sur la façon dont votre site apparaît lorsqu'il est partagé sur les réseaux sociaux en ajoutant quelques lignes de code à chaque page. Cette fonctionnalité permet d'attirer davantage d'internautes sur votre site, car elle fournit des aperçus contenant des informations plus complètes que celles qui seraient normalement disponibles.

Vous pouvez influer sur la façon dont votre site apparaît lorsqu'il est partagé sur les réseaux sociaux en ajoutant quelques lignes de code à chaque page. Cela peut vous aider à attirer davantage d'internautes sur votre site en fournissant des aperçus avec des informations plus riches que celles qui seraient autrement disponibles.

Résumé

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

Vous pouvez influer sur la façon dont votre site apparaît lorsqu'il est partagé sur les réseaux sociaux en ajoutant quelques lignes de code à chaque page. Cela peut contribuer à accroître l'engagement en fournissant des aperçus avec des informations plus riches que celles qui seraient autrement disponibles. Sans cela, les sites de réseaux sociaux ne fourniront que des informations de base, sans images ni autres informations utiles.

Selon vous, sur lequel est-elle la plus susceptible de générer des clics ? Les utilisateurs sont attirés par les images et sont plus sûrs qu'ils aimeront ce qu'ils trouveront lorsqu'ils auront un aperçu en avant-première.

Avec le balisage approprié, vous devez inclure un titre correct, une brève description et une image. L'ajout de ces éléments peut vous aider à renforcer l'engagement.
Avec le balisage approprié, vous devez inclure un titre correct, une brève description et une image. L'ajout de ces éléments peut vous aider à renforcer l'engagement.
Sans le balisage approprié, seul le titre de la page est inclus.
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 ajoutera probablement des notes expliquant à quel point il est génial, puis il le partagera. Toutefois, la description d'un site Web peut s'avérer fastidieuse et passer à côté du but 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. Cela signifie qu'ils n'ont pas besoin de consacrer un temps précieux (ou des caractères) à décrire le lien.

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

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

Ajout de itemscope pour définir la portée des microdonnées.

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

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

Vous pouvez spécifier le type d'élément en utilisant l'attribut itemtype avec itemscope. La valeur d'un itemtype peut être déterminée en fonction du type de contenu de votre page Web. Vous devriez trouver celui qui vous intéresse sur cette page.

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

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

Valider les extraits enrichis

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

Outil de test des données structurées

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

Le protocole OGP (Open Graph Protocol) 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 d'extrait enrichi lorsque la page est partagée.

Utilisez des balises meta d'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 contenus peuvent avoir les valeurs suivantes:

Propriété Contenus
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. Pour en trouver un adapté à votre page Web, cliquez ici.

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

En savoir plus

Pour en savoir plus sur les éléments que vous pouvez joindre à la publication 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 de l'Open Graph Protocol applicable à Twitter. Ils vous permettent d'ajouter des pièces jointes multimédias telles que des images et des vidéos à des tweets contenant un lien vers votre page Web. Si vous ajoutez les métadonnées appropriées, une fiche contenant des détails détaillés sera ajoutée aux tweets contenant des liens vers votre page.

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

Pour qu'une carte Twitter fonctionne, votre domaine doit être approuvé et contenir une balise Meta dont l'attribut name est twitter:card au lieu de 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'identifiant Twitter à la valeur de twitter:site, Twitter intègre ces informations dans la publication partagée afin que les utilisateurs puissent facilement interagir avec le propriétaire de la page.

Carte Twitter.

En savoir plus

Pour en savoir plus sur les cartes Twitter, consultez:

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 le protocole OGP partagent un certain balisage:

  • itemscope se trouve au niveau du tag 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, vérifiez que votre page Web s'affiche comme prévu sur chaque réseau social avant de la publier.