Prenez le contrôle de vos extraits sociaux

Les signaux sociaux deviennent de plus en plus importants dans le monde du référencement. Les partages Facebook, les Tweets et les Google + 1 ont atteint un tel volume qu'ils peuvent potentiellement représenter une excellente mesure de la qualité du contenu. C’est pourquoi les moteurs de recherche ont commencé à prendre en compte ces signaux lorsqu’ils classent des pages Web..

Les signaux sociaux ne sont toujours pas aussi importants que d'autres facteurs de classement, tels que le profil et le contenu des liens d'un site, mais ils constitueront sans aucun doute un facteur de classement essentiel à l'avenir..

Afin de maximiser la visibilité de notre contenu, nous devons contrôler son apparence en tant qu'extrait de code social. Un bon extrait social peut potentiellement attirer beaucoup de visiteurs supplémentaires sur nos sites Web. Voyons comment nous pouvons créer l'un de ces.


Snippets sociaux?

Un extrait social est un aperçu d'une page qui est utilisé lorsque vous partagez cette page sur les médias sociaux. Au lieu d'un simple lien, les utilisateurs obtiennent des informations supplémentaires sur le contenu derrière le lien..

Par exemple, si nous souhaitons partager l'article sur la pagination à partir de Webdesigntuts + sur Facebook, nous voyons l'extrait social suivant:

Un extrait de réseau social sur Google+ sera à peu près le même:

Ainsi, au lieu d’un lien de base, les utilisateurs voient beaucoup plus d’informations sur la page. Nous pouvons voir une image d'aperçu, le titre et même une courte description. Cela nous permet de décider plus facilement si le lien vaut la peine de cliquer..

Ces extraits sociaux sont généré automatiquement. La personne qui partage la page Web n'a aucun contrôle sur l'image, le titre et la description utilisés. Celles-ci ne peuvent être modifiées que par le webmaster lui-même (nous apprendrons comment faire cela plus tard dans l'article)..


Pourquoi les extraits sociaux sont-ils importants?

L'extrait social d'une page est quelque chose que beaucoup de webmasters oublient, ce qui peut entraîner des problèmes d'affichage sur les médias sociaux. Si le balisage d'extrait social n'est pas présent, un extrait social sera souvent affiché de manière incorrecte..

Le but des extraits sociaux est de persuader les gens de cliquer sur eux. Plus les gens cliquent dessus, plus la page sous-jacente reçoit de visiteurs. C'est pourquoi vous devriez les traiter comme une annonce gratuite. Une publicité équivalente doit avoir une photo accrocheuse, un titre digne d'un clic et une description intéressante. Un extrait de code social doit comporter les mêmes éléments.

Si l'un de ces éléments ne fonctionne pas correctement, par exemple si la mauvaise vignette est affichée, cela peut éventuellement coûter cher à vos visiteurs et clients..

Ceci est un exemple de page qui n'a pas mis en œuvre des extraits sociaux. J'ai partagé une page de 'De Bakboetiek', un magasin spécialisé dans les équipements de cuisson. Ils ont également une boutique en ligne où ils vendent des produits tels que ce moule à cake pop, mais comme vous pouvez le constater, cet extrait social n’est pas particulièrement utile…

Au lieu de montrer une vignette du moule à gâteau et une courte description, nous ne pouvons voir que le logo et le mauvais titre. Il n'y a même pas de description! Comment cet extrait de réseau social est-il censé amener les visiteurs de Facebook à leur site Web??


Le protocole Open Graph

Les extraits sociaux sont basés sur le protocole Open Graph. Il est utilisé pour transformer une page Web en un objet riche dans le graphe social. Grâce à cela, les médias sociaux tels que Facebook, Google+ et Twitter peuvent identifier des éléments importants d'une page..

Le protocole OG est basé sur RDFa (vous souvenez-vous de RDFa dans notre article de données structurées?). Nous pouvons le mettre en œuvre en utilisant des balises dans le d'une page.

Plus d'informations sur le protocole Open Graph peuvent être trouvées sur ogp.me.


Créer un extrait de réseau social

Il est maintenant temps de prendre le contrôle de notre propre extrait social. Plusieurs éléments peuvent être modifiés: la vignette, le titre, la description, l’URL et le type de contenu..

Remarque: Le balisage suivant est utilisé par Facebook et Google+. Twitter utilise différentes balises META, dont nous parlerons plus tard.

La vignette

C'est peut-être l'élément le plus important d'un extrait de code social. C’est la partie que la plupart des utilisateurs verront en premier, alors assurez-vous d’utiliser une image claire pour cela..

Je suggère d'utiliser une image carrée d'au moins 200 x 200 pixels. Si l'image est trop petite, il est possible qu'elle ne soit pas affichée ou qu'une autre image de la page soit utilisée à la place (dans certains cas, l'image d'une annonce, etc.)..

Nous pouvons spécifier l'emplacement de la vignette avec ce balisage:

Titre

C'est le titre de votre extrait de réseau social. C'est le deuxième élément le plus important, à côté de la vignette. Votre titre devrait persuader l'utilisateur de cliquer dessus. Il sert également de texte d'ancrage pour le lien vers la page..

Le code du titre ressemble à ceci:

La description

Rédigez un bref résumé de la page pouvant être utilisé comme description. J'utilise souvent mon texte de méta-description pour un extrait de réseau social, mais vous pouvez choisir ce que vous voulez. Assurez-vous simplement que cela chatouille la curiosité du lecteur et le fait cliquer sur le lien..

Type de contenu

Si vous souhaitez spécifier le contenu de la page, vous pouvez utiliser le og: type étiquette. Si cette balise est omise, la page sera classée dans la catégorie "site Web". Les autres types de contenu pouvant être utilisés sont la musique, les vidéos, les articles, les livres et les profils. Plus d'informations peuvent être trouvées sur la page des objets intégrés sur Facebook.

URL

C'est l'URL à laquelle l'utilisateur sera envoyé lorsqu'il cliquera sur le titre. Ajoutez l'URL canonique à cette balise:

Si tu veux suivre le trafic provenant des médias sociaux, vous pouvez ajouter des paramètres de suivi permettant aux informations d’être affichées dans Google Analytics. Utilisez le Google URL Builder pour cela.

Il vous suffit d’ajouter trois paramètres: Source, Moyen et Campagne..

  • Source: facebook
  • Moyen: social
  • Campagne: un nom / identifiant unique

L'URL finale ressemblera à ceci: http://www.website.com/article-title?utm_source=facebook&utm_medium=social&utm_campaign=article-name


Cartes Twitter

Twitter utilise un balisage différent pour créer des cartes Twitter. Les cartes Twitter vous permettent de joindre des médias à des tweets qui renvoient à votre contenu..

Trois types de supports peuvent être utilisés:

  • résumé: semblable à un extrait de réseau social sur Facebook et Google+
  • photo: une carte photo
  • joueur: une carte de lecteur multimédia

Discutons chaque Twitter Card individuellement:

Résumé

La carte de résumé est une carte Twitter qui ressemble aux extraits sociaux que nous voyons sur Facebook et Google+. Il peut être utilisé pour différents types de contenu (articles de blog, articles, produits, etc.). Une fiche récapitulative peut ressembler à ceci:

     

Tout d’abord, nous devons identifier le type de carte Twitter via le twitter: carte tag (dans ce cas un résumé). L'URL doit être l'URL canonique de la page. le twitter: titre La balise ne doit pas dépasser 70 caractères. La description par contre est limitée à 200 caractères. L'image est utilisée comme une vignette et doit être carrée. Les images plus petites que 60 x 60px ne seront pas affichées. Finalement, le créateur tag peut être utilisé pour donner crédit à l'auteur.

Photo

Plusieurs éléments d'une carte photo sont également utilisés dans la fiche de résumé. La principale différence entre les deux est le style du tweet. La carte photo place l'image au premier plan dans le tweet.

Twitter utilise le twitter: image URL de la photo. Si cette image est inférieure à 280 x 150 pixels, elle ne sera pas affichée. Vous pouvez spécifier la largeur et la hauteur de l'image pour aider Twitter à conserver les proportions de l'image lors du redimensionnement..

Une carte photo pourrait ressembler à ceci:

      

le twitter: carte et twitter: image les balises sont obligatoires, tout le reste est optionnel.

Joueur

La carte de lecteur est utilisée pour l'audio et la vidéo. Le fichier multimédia est incorporé dans le tweet via une iframe. L’inconvénient d’une carte de joueur est qu’elle doit être approuvé par Twitter!

Si vous souhaitez utiliser une carte de joueur pour approbation, ajoutez le code suivant à votre page:

       

le twitter: carte La balise est utilisée pour identifier la carte de joueur. L'URL, le titre, l'image et la description sont similaires aux autres cartes de joueur. le twitter: joueur La balise contient un lien HTTPS vers le lecteur iframe. Vous pouvez spécifier la largeur et la hauteur de l’iframe via le twitter: joueur: largeur et twitter: joueur: hauteur Mots clés.

Quelques autres exigences pour les cartes de joueur:

  • Utilisez une URL HTTPS (la vidéo doit également être diffusée via HTTPS)
  • Les contrôles d'arrêt ou de pause sont obligatoires
  • Aucune lecture automatique n'est autorisée
  • Le contenu ne doit pas vous obliger à vous connecter

Twitter Cards et l'Open Graph

Twitter cherche d'abord twitter: carte balises sur votre site Web, mais s'il n'en trouve pas, il revient au balisage Open Graph. Cela signifie que vous n'avez pas besoin de créer des étiquettes en double. Vous pouvez simplement compléter vos tags Open Graph existants avec des tags twitter.

Twitter voit les balises suivantes comme similaires (balisage twitter à gauche, OG à droite)

  • twitter: ul = og: url
  • twitter: description = og: description
  • twitter: titre = og: titre
  • twitter: image = og: image
  • twitter: image: width = og: image: width
  • twitter: image: height = og.image.height

Conclusion

Les moteurs de recherche consacrent de plus en plus de temps aux signaux sociaux, car ils constituent un excellent indicateur du contenu de qualité. Afin d'améliorer les chances que quelqu'un clique sur un extrait de réseau social, nous devons prendre le contrôle de son contenu. Nous pouvons le faire via le protocole Open Graph pour Facebook et Google+. Pour Twitter, nous devons compléter ces balises Open Graph avec du code spécifique à Twitter..


Ressources utiles

Pour vous aider à mettre en place des extraits de réseau social, j'ai rassemblé plusieurs outils pouvant vous être utiles:

  • Google+ Snippet Creator: utilisez cet outil pour générer un code HTML pour un extrait de réseau social. Il suffit de coller le code dans la section de tête de votre page et vous avez terminé.
  • Débogueur Facebook: vérifiez les informations du graphique ouvert extraites de votre page.
  • Outil de test Rich Snippet: peut être utilisé pour vérifier les informations de votre extrait de réseau social.