Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Accroitre sa visibilité avec le protocole Open Graph - Joomladay France 2016

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 44 Publicité

Accroitre sa visibilité avec le protocole Open Graph - Joomladay France 2016

Télécharger pour lire hors ligne

Conference sur l'intégration de l'open graph dans les articles Joomla! et FLEXIcontent grace au tout nouveau plugin gratuit socialmeta https://github.com/vistamedia/socialmeta

Conference sur l'intégration de l'open graph dans les articles Joomla! et FLEXIcontent grace au tout nouveau plugin gratuit socialmeta https://github.com/vistamedia/socialmeta

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (17)

Publicité

Similaire à Accroitre sa visibilité avec le protocole Open Graph - Joomladay France 2016 (20)

Plus récents (18)

Publicité

Accroitre sa visibilité avec le protocole Open Graph - Joomladay France 2016

  1. 1. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph ACCROÎTRE SAVISIBILITÉ AVEC LE PROTOCOLE OPEN GRAPH 1
  2. 2. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph Emmanuel Danan 44 ans Paris • co-fondateur de l’AFUJ • expert Joomla! depuis 2005 • plus de 50 sites Joomla! • une dizaine d’extensions • inventeur de FLEXIcontent • JOSCAR de la meilleure innovation de l’année (Francfort 2010) • Classée 32e sur plus de 7700 extensions MERCENAIRE JOOMLA! …À LA RECHERCHE D’UNE ARMÉE facebook: https://www.facebook.com/emmanuel.danan | twitter: @vistamedia | mobile: +33 6 01 21 85 47 2
  3. 3. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph QU’EST-CE QUE L’OPEN GRAPH? 3
  4. 4. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 4 – JDN (http://www.journaldunet.com/ebusiness/le-net/open-graph/) “L'Open Graph est un protocole qui permet à des sites tiers d'interagir avec les informations d'un profil Facebook et avec les relations de ce dernier…”
  5. 5. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph COMMENT FONCTIONNE L’OPEN GRAPH? 5
  6. 6. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 6 Acteur Action Objet • Partager • Ecouter • Regarder • Jouer • Cuisiner • Vouloir • … • Article • Chanson • Film • Jeu • Recette • Produit • … {Exemples
  7. 7. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 7 OPEN GRAPH ACTOR 7
  8. 8. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 8
  9. 9. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph LE CADRE DE CETTE PRÉSENTATION 9 • 2 objets : article et video • 1 action : partager • intégration : • articles Joomla! : com_content.article • items FLEXIcontent : com_flexicontent.item
  10. 10. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph FACEBOOK REPRÉSENTE À LUI SEUL 92% DES PARTAGES SOCIAUX 10 http://blog.naytev.com/facebook-is-king/
  11. 11. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph FACEBOOK A DÉPASSÉ GOOGLE ENTERME DE SOURCE DETRAFFIC 11 http://uk.businessinsider.com/facebook-v-google-referral-traffic-2015-8
  12. 12. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph POURQUOI METTRE EN PLACE L’OPEN GRAPH? 12
  13. 13. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 13 Quelle est la publication… …qui a le plus d’impact?
  14. 14. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 14 Vous voulez laisser faire le hasard? Sérieusement?
  15. 15. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph LES BALISES PRINCIPALES VISIBLES 15
  16. 16. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 16 og:image Utilisez des images d'au moins 1200 x 630 pixels pour un meilleur affichage sur les appareils de haute résolution. Au minimum, vous devriez utiliser des images de 600 x 315 pixels pour afficher de plus grandes images pour les publications de liens de page. Le poids des images doit être inférieur à 8MB. Essayez de rester proche d'un ratio de 1.91:1 pour l'affiche complet de l'image dans le fil d'actualité, sans rognage. 1a 1b twitter:image
  17. 17. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 17 og:image
  18. 18. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 18 og:title Le titre n’est en théorie pas limité, mais d’après mes tests on peut mettre jusqu’à 78 caractères (au dessus il sera rogné) 2 twitter:title
  19. 19. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 19 og:description Le description n’est en théorie pas limité non plus, mais d’après mes tests on peut mettre jusqu’à 200 caractères (au dessus il sera rogné) 3 twitter:description
  20. 20. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 20 article:author Cette balise que très peu de sites Joomla! utilisent est néanmoins fondamentale pour gagner de l’audience. Elle va permettre à la personne qui voit passer cela dans le flux de liker la page ou suivre l’auteur 4 twitter:site
  21. 21. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 21 1 2 3
  22. 22. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph LES BALISES POTENTIELLEMENTVISIBLES À SÉRIEUSEMENT CONSIDÉRER 22
  23. 23. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 23 article:publisher Elle représente l’entité (la page) qui publie l’article. Elle est surtout utile quand la balise article:author contient un utilisateur et non une page.
  24. 24. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 24 og:see_also Cette balise sert en théorie a piloter les “related links” mais ce n’est pas une science exacte. Cependant, ca ne mange pas de pain d’essayer… 6
  25. 25. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 25 article:tag Cette balise sert aussi en théorie a piloter les “related links” mais ce n’est pas une science exacte. Cependant autant mettre toutes les chances de son côté ;-) 7
  26. 26. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph PROMOUVOIR UN ARTICLE AVEC UNE VIDEO directement lisible dans le flux des réseaux sociaux 26
  27. 27. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph LE PRINCIPE… 27 Utiliser la bande passante de de youtube pour promouvoir votre propre site sur les réseaux sociaux
  28. 28. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph LE CAS VIMEO… 28 surVimeo, même si le lien vers votre site semble fonctionner toute action de clic déclenche la lecture de la vidéo. En revanche sur iOS cela fonctionne.
  29. 29. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph LA MISE EN ŒUVRE 29 Voici les méta à renseigner pour transformer votre article en video
  30. 30. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph LE BONUS… 30 Meme si, en terme de SEO à proprement parler, un contenu video n’a pas un meilleur rank qu’un article… … qui remarque-t’on sur la page de résultats Google?
  31. 31. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph VOUSVOULEZ TESTER?… 31 Partagez ces liens sur votre mur Facebook Joomla!/Youtube http://pedalsteel.fr/index.php/repair-station Joomla!/Vimeo http://www.snowkitemaster.com/ N’hésitez pas ça fera de la pub à mes amis ;-)
  32. 32. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph ET SI C’ÉTAIT AUSSI FACILE QUE ÇA… 32
  33. 33. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph LAISSER MOI VOUS PRESENTER SOCIALMETA 33 https://github.com/vistamedia/socialmeta
  34. 34. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph CONFIGURATION 34 Seuls 3 paramètres sont recommandés - une image par défaut - l’URL du profil Facebook - le pseudo Application ID et Admin ID servent pour pouvoir accéder aux mesures de Facebook insights https://developers.facebook.com/ docs/sharing/best-practices#learn mais ne sont pas obligatoire
  35. 35. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 35 UTILISATION ben… … remplir les champs ;)
  36. 36. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 36 UTILISATION (SUITE) ben… … remplir les champs ;) Notez que Dailymotion ne fonctionne pas… (pour des raisons obscures ils ont leur propre nomenclature de méta)
  37. 37. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph ATTENTION! QUANDVOUS EFFECTUEZ DES MODIFICATIONSPENSEZ À… 37
  38. 38. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph …TESTER SES PAGES ET PURGER LE CACHE DE FACEBOOK 38
  39. 39. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 39 https://developers.facebook.com/tools/debug/ SHARING DEBUGGER
  40. 40. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 40 https://developers.facebook.com/tools/debug/og/object/
  41. 41. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph VALIDER SES TWITTER CARDS 41
  42. 42. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 42 https://cards-dev.twitter.com/validator CARDVALIDATOR
  43. 43. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 43 LE CAS PARTICULIER DESVIDEOS Vous devez… “montrer patte blanche”
  44. 44. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph RESSOURCES UTILES 44 https://github.com/vistamedia/socialmeta#useful-ressources

×