Les e-commerçants créent beaucoup de contenus au travers des pages de description de leurs produits, catégories, etc. Toutefois, si le contenu n’est pas diffusé, il n’attire pas de clients et par conséquent ne génèrera pas de ventes. De plus en plus de marchands utilisent les réseaux sociaux pour partager leur contenu.
L’un des objectifs de partage de liens est l’exposition générale auprès d’une grande audiance. Il convient donc de contrôler autant que cela est possible la manière dont les pages sont représentées par ces réseaux les plus populaires. Dans notre précédant article, nous avions déjà décrit les Twitter Cards. Aujourd’hui découvrons Facebook Open Graph.
Facebook Open Graph, Quel intérêt pour les commerçants ?
Le concept n’est pas nouveau et le déploiement de Facebook Open Graph a commencé en 2010. Les autres sites internet notamment les sites de ventes en ligne avec Prestashop, Woocommerce ou Magento pour ne citer que ceux-là, peuvent s’intégrer a Facebook en devenant comme des objets d’un graph géant maintenu par Facebook. Ils deviennent l’équivalent d’un objet Facebook. Ces objets sont des concepts ou mots de vocabulaire comme produits, site web, livres, jeux, personne, entreprise, etc. Les mots sont limités à un dictionnaire public avec un certain nombre d’attributs.
En d’autres termes, cette intégration structurée apporte un certain niveau de contrôle car il est possible de définir la valeur des propriétés associées aux objets comme leur image, leur lien. Il est alors possible de formater soi-même comment les pages sont vus par Facebook quand un utilisateur (vous-même en l’occurrence) partage votre page. Comme indiqué plus haut, le concept a fait des émules et d’autres géants du web ont des initiatives similaires comme Google (Rich Snippets) ou Twitter et peuvent se reconnaitre les uns les autres. Par exemple, si une page ne comporte pas de Twitter cards, Twitter utilisera Facebook Open Graph.
-
Promo !
Free Prestashop Module SEO Statistics
$29.00$0.00 - Promo !
Quels avantages pour l’e-commerce?
La conversation sur les réseaux sociaux ainsi que trafic que ce tout ceci généré contribuent indéniablement à la popularité des sites internet. Pour les sites de vente en ligne, les métas données Open Graph peuvent améliorer votre taux de rebond (la proposition d’utilisateurs ayant cliqué sur un lien par rapport au nombre de personnes touchées). Sachant que le nombre de vente est directement au nombre de visiteurs sur votre site, si le trafic augmente, il y a de fortes chances que votre chiffre d’affaires augmente aussi.
Le vocabulaire Facebook Open Graph
L’implémentation des objets de l’open graph est basée sur le protocole RDFa. Il consiste à enrichir l’entête des pages web de votre internet avec des tags html de type « méta ». La spécification décrit quatre propriétés basiques indispensables. Il s’agit de titre, url, image, type. Les 3 premiers sont assez explicit pour qu’on ne s’y attarde pas.
L’extension open graph minimale pour une page web ressemblerait à ceci :
1 2 3 4 5 6 7 8 9 10 11 |
<html prefix="og: http://ogp.me/ns#"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" /> ... </head> ... </html> |
Nous reviendrons dans la suite sur les types de pages disponibles ou comment en créer de nouveaux.
Les options advancées.
A ces propriétés de base s’ajoutent les attributs optionnels, ils sont toutefois recommandés. Plus on en met, plus votre objet aura de visibilité (un produit ou service):
- og:audio : décrit le lien d’un fichier audio associé à l’objet décrit
- og:video : décrit le lien d’une vidéo associée à l’objet décrit, exemple un lien youtube
- og: description : consiste d’une ou deux phrases qui décrivent l’objet
- og:locale : détermine le territoire et la langue associée, exemple fr_FR, fr_CA, en_US, ou en_GB
- og:site_name : si l’objet fait partir d’un plus gros site, le lien du site parent ; exemple : un produit et le nom du site marchand prestashop.
1 2 3 4 5 6 7 8 9 10 |
<meta property="og:audio" content="http://example.com/bond/theme.mp3" /> <meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." /> <meta property="og:determiner" content="the" /> <meta property="og:locale" content="en_GB" /> <meta property="og:locale:alternate" content="fr_FR" /> <meta property="og:locale:alternate" content="es_ES" /> <meta property="og:site_name" content="IMDb" /> <meta property="og:video" content="http://example.com/bond/trailer.swf" /> |
Facebook Open Graph Image
Quelques propriétés comme une image sont décrites par leur lien, une taille, un type, etc. Ces propriétés ont leurs propres attributs :
1 2 3 4 5 |
<meta property="og:image" content="http://example.com/ogp.jpg" /> <meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> <meta property="og:image:type" content="image/jpeg" /> <meta property="og:image:width" content="400" /> <meta property="og:image:height" content="300" /> |
C’est aussi le cas des vidéos ou des fichiers audio.
Open Graph propriété « type »
Pour permettre d’identifier de manière uniforme les types des objets, un vocabulaire décrit la liste de tous les types autorisés ainsi que leurs propriétés additionnelles.
On retrouve les types standards comme personne ou profil, site web, vidéo, musique, playlist, article, livre, une organisation, un produit, etc. Dans le cadre de l’e-commerce, attardons nous un peu sur le type produit.
Le document ci-dessous indique comment décrire avec beaucoup de détail un produit :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# product: http://ogp.me/ns/product#"> <meta property="fb:app_id" content="302184056577324" /> <meta property="og:type" content="product" /> <meta property="og:url" content="Put your own URL to the object here" /> <meta property="og:title" content="Sample Product" /> <meta property="og:image" content="https://s-static.ak.fbcdn.net/images/devsite/attachment_blank.png" /> <meta property="product:original_price:amount" content="Sample Original Price: " /> <meta property="product:original_price:currency" content="Sample Original Price: " /> <meta property="product:pretax_price:amount" content="Sample Pre-tax Price: " /> <meta property="product:pretax_price:currency" content="Sample Pre-tax Price: " /> <meta property="product:price:amount" content="Sample Price: " /> <meta property="product:price:currency" content="Sample Price: " /> <meta property="product:shipping_cost:amount" content="Sample Shipping Cost: " /> <meta property="product:shipping_cost:currency" content="Sample Shipping Cost: " /> <meta property="product:weight:value" content="Sample Weight: Value" /> <meta property="product:weight:units" content="Sample Weight: Units" /> <meta property="product:shipping_weight:value" content="Sample Shipping Weight: Value" /> <meta property="product:shipping_weight:units" content="Sample Shipping Weight: Units" /> <meta property="product:sale_price:amount" content="Sample Sale Price: " /> <meta property="product:sale_price:currency" content="Sample Sale Price: " /> <meta property="product:sale_price_dates:start" content="Sample Sale Price Dates: Start" /> <meta property="product:sale_price_dates:end" content="Sample Sale Price Dates: End" /> |
Visiter le site http://ogp.me/ pour en savoir plus sur la specification Facebook Open Graph
Module Prestashop Facebook Open Graph
Prestashop fournir une implémentation native de l’Open Graph. Il s’agit du module Social Sharing disponible sur Github. Il inclut les métas tags basiques ainsi que les métas tags relatifs au type produit. Je vous conseille de l’activer dans votre boutique.
Module WordPress Facebook Open Graph
Le plugin SEO Yoast qu’on ne présente plus fournit aussi une implémentation de l’Open Graph. C’est un module indispensable pour tous ceux qui maintiennent un blog décent.
Conclusion
Facebook Open Graph fait partir de la tendance généralisée chez tous les acteurs du web à structurer le continu diffusé sur Internet. Il pousse vers une certaine harmonisation avec de plus en plus la possibilité de fournir un contexte à l’information. Cette tendance est aussi connue sous le nom de Web 3.0 . Préparez votre site des maintenant.
[…] plusieurs articles sur les métas données riches, nous avions évoqué Google rich snippets, Facebook Open graph et Twitter cards. Ils peuvent servir […]