Amen.fr - "Open graph" protocole et réseaux sociaux
Upcoming SlideShare
Loading in...5
×
 

Amen.fr - "Open graph" protocole et réseaux sociaux

on

  • 724 views

Maîtrisez le partage de vos contenus, articles et posts sur les réseaux sociaux (Facebook, Twitter, G+, etc.) grâce aux OPEN GRAPH metatags.

Maîtrisez le partage de vos contenus, articles et posts sur les réseaux sociaux (Facebook, Twitter, G+, etc.) grâce aux OPEN GRAPH metatags.

Statistics

Views

Total Views
724
Views on SlideShare
724
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Amen.fr - "Open graph" protocole et réseaux sociaux Amen.fr - "Open graph" protocole et réseaux sociaux Document Transcript

  • Conseils dexpertsConseils dexpertsConseils dexpertsConseils dexperts5555)))) OPEN GRAPH META TAGSOPEN GRAPH META TAGSOPEN GRAPH META TAGSOPEN GRAPH META TAGS
  • 2OPEN GRAPH META TAGSOPEN GRAPH META TAGSOPEN GRAPH META TAGSOPEN GRAPH META TAGSDe nos jours, les médias sociaux sont présents sur la quasi-totalité des sites internet et chacunde ces sites essaient d’y afficher ses contenus de la meilleure façon possible. Cependantlorsqu’un site ou un utilisateur partage un contenu sur différents réseaux sociaux, ce derniern’apparaitra jamais de la même manière et parfois celui-ci ne ressemble plus au site web d’oùil provient.Mais il est possible de modifier cela.Les Open Graph Meta Tags / Protocole permettent de déterminer à quoi ressemblera lesnippet : la manière dont s’affichera votre site web sur les réseaux sociaux. Ce protocole ad’abord été mis en place par Facebook puis sur Twitter et enfin Google+. De plus en plus demonde utilisera ce protocole.Qu’estQu’estQu’estQu’est----cececece que lque lque lque le protocolee protocolee protocolee protocole Open GraphOpen GraphOpen GraphOpen Graph et commet l’utiliseret commet l’utiliseret commet l’utiliseret commet l’utiliser ????Le protocole Open Graph affiche le contenu de site externe façon « social graph ». Les sitessont vus comme des objets dans Open Graph, pour lesquels les utilisateurs peuvent définir laconnexion entre le site et, par exemple, Facebook.Il s’agit d’un protocole c’est à dire un moyen de fournir des données sous une forme structuréepermettant d’être lues de la même manière à travers les différentes plateformes de réseauxsociaux.Cela se résume à ajouter quelques métadonnées spécifiques à un site web.Pour de plus amples information vous pouvez visiter le site suivant : http://ogp.mePourquoi l’utiliserPourquoi l’utiliserPourquoi l’utiliserPourquoi l’utiliser ????En un mot : le contrôle.Fournir des données de façon structurée avec Open Graph vous permet de contrôler la façondont votre contenu s’affichera sur les diverses plateformes de médias sociaux. Vousdéterminez exactement quelle image, quel titre et quel descriptif seront utilisés.
  • 3Comment ça marcheComment ça marcheComment ça marcheComment ça marche ????Dans la plus part des cas, la mise en œuvre Open Graph implique une modification du codederrière le site Web.Quatre éléments sont requis pour mettre en œuvre Open Graph:og:titleTitre de l’objet.og:typeType d’objet (page, produit, blog, article, etc.).og:imageUne URL pointant vers l’image désirée.og:urlL’URL canonique de l’objet (URL principale de l’élément, pas d’alias).ElémentsElémentsElémentsEléments optionnelsoptionnelsoptionnelsoptionnels ::::og:descriptionUne description d’une à deux lignes environ.og:localePar défaut le contenu d’Open Graph content est vu en anglais.Avec cette variable vous pouvez changer la langue.og:site_nameQuand un objet fait lui-même parti d’un objet plus large (exemple : un article dans un site web)vous pouvez nommer le site ici.
  • 4En résumé, en ajoutant ce qui suit sous l’élément <head> de votre page vous utiliserez OpenGraph.<meta property="og:title" content="Titre de votre page"/><meta property="og:image"content="http://www.domain.com/lien/de/votre/image.png"/><meta property="og:site_name" content="Nom de votre site Web"/><meta property="og:description" content="Description de votre page"/><meta property="og:url" content="http://www.domain.com/lien/de/votre/article.php"/><meta property="og:locale" content="fr_FR" />Remarque : La dernière ligne doit être utilisée seulement si la langue n’est pas l’anglais.Si vous utilisez ce qui est indiqué ci-dessus, vous remarquerez que les résultats partagés surFacebook seront légèrement différents.A quoi cela ressemble sur Facebook si vous n’utilisez pas le protocoleA quoi cela ressemble sur Facebook si vous n’utilisez pas le protocoleA quoi cela ressemble sur Facebook si vous n’utilisez pas le protocoleA quoi cela ressemble sur Facebook si vous n’utilisez pas le protocoleOpen GraphOpen GraphOpen GraphOpen Graph ????Si un site n’utilise pas le protocole Open Graph, Facebook cherchera les informations de lui-même. Il tentera de déterminer les meilleurs éléments à utiliser. Cela peut être rien du tout ouêtre complètement diffèrent de ce que vous aviez en tête.Vous utilVous utilVous utilVous utilisez un CMS et vous demandez comment l’implémenterisez un CMS et vous demandez comment l’implémenterisez un CMS et vous demandez comment l’implémenterisez un CMS et vous demandez comment l’implémenter ????Les sites utilisant des CMS connus ont la possibilité d’utiliser des plugins ou des extensions.Wordpress, Joomla, Drupal, Concrete5 et Magento en possèdent pour Open Graph. Dautresdevront coder leurs pages, leur CMS voir demander aux développeurs de leur CMS pourd’examiner la question.De façon très simple votre site web peut s’afficher de façon similaire sur les divers médiassociaux ce qui permettra de renforcer votre image en ligne. Avec le protocole Open Graph vouspouvez reprendre le contrôle.
  • Amen, keep it simple!Amen, keep it simple!Amen, keep it simple!Amen, keep it simple!Information:Information:Information:Information: nos experts sont disponibles à tout moment pour vous aider ! Vous pouvez commander lesproduits souhaités directement sur notre site ou par téléphone:Assistance:Assistance:Assistance:Assistance:0811 88 77 440811 88 77 440811 88 77 440811 88 77 44Du lundi au vendredi 9h - 19h (appel local)Service commercial:Service commercial:Service commercial:Service commercial:0811 88 77 660811 88 77 660811 88 77 660811 88 77 66Du lundi au vendredi 9h - 19h (appel local)