🔧 Open Graph : intégration des Social Media Tags

Introduction

L’ajout des micro data (données structurées) pour les réseaux sociaux permet d’être mieux mis en avant sur ceux-ci. Par exemple lorsqu’un internaute poste un de vos articles sur Facebook, la bonne image est immédiatement affichée ainsi que le bon titre et résumé. La mise en oeuvre est aisée et rapide. Si vous utilisez un CMS comme WordPress, il existe des plugins qui vous épargneront de mettre la main dans le code (disponible ici).

Les principaux réseaux sociaux les utilisent pour :

  • Twitter Cards : résumés, images, galleries, apps, vidéo, audio, et produits
  • Pinterest Rich Pins : produits, recettes, films et articles
  • Google+ : articles, blog, livre, évènement, local business, entreprise, personne (auteur), produit, reviews
  • Facebook : articles, photos, audio, vidéo, etc..

Intégration du balisage OpenGraph

Avant toute chose, il faut remplacer la balise <html> par ceci :

<html xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://ogp.me/ns/fb#” xmlns:og=”http://opengraphprotocol.org/schema/”>

Puis, ajoutez cette balise meta dans l’entete (entre les balises <head> .. </head> :

<meta property=”og:site_name” content=”toujours le nom de votre site (pas de le titre d'un article)” />

Ensuite, insérez les balises suivantes pour le titre, description etc .. La propriété « og:type » peut être « article » ou « website » selon le type de page :

<meta property=”og:type” content=”article” />
<meta property=”og:locale” content=”fr_FR” />
<meta property=”og:title” content=”titre de la page (similaire à la balise Title)” />
<meta property=”og:description” content=”description de votre page (similaire à la meta description)” />

La propriété « image » doit reprendre une image représentative de la page. Elle sera utilisée en thumbnail (miniature) sur Facebook par exemple :

<meta property=”og:image” content=”http://example.com/mon_image.jpg” />

Twitter possède quelques balises qui lui sont propres. On les appelles les Twitter Cards :

<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:site” content=”@compte_twitter_du_site“>
<meta name=”twitter:creator” content=”@compte_twitter_de_l_auteur“>
<meta name=”twitter:title” content=”Titre de la page (similaire à la Title, maximum 70 caractères)“>
<meta name=”twitter:description” content=”Description de la page ou résumé (similaire à la Meta Description, doit faire moins de 200 caractères)“>

Une image peut également être proposée pour Twitter. Elle doit faire au minimum 60px par 60px. Les images ayant une taille supérieure à 120px par 120px seront automatiquement redimensionnées.

<meta name=”twitter:image” content=”http://example.com/mon_image.jpg“>

Test de l’intégration

Une fois toutes les balises intégrée, vous pouvez tester leur bonne mise en oeuvre avec un outil proposé par Google. Il s’agit de « l’outil de test des données structurées ». Vous pouvez au choix copier / coller une URL ou du code HTML.

L’outil est disponible ici : https://search.google.com/structured-data/testing-tool

Si vous avez des erreurs, l’outil vous montrera à quel endroit et quelle est l’erreur. Bien pratique 🙂

Ressources

Site du protocole OpenGraph : http://ogp.me/

OpenGraph Facebook : https://developers.facebook.com/docs/sharing/opengraph

Twitter Cards : https://dev.twitter.com/cards/getting-started

 

Vous avez aimé ? Partagez 🙂

Un commentaire sur “🔧 Open Graph : intégration des Social Media Tags

  1. Ping : Open Graph : intégration des social media tags | Articles SEO

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *