Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
ACCROÎTRE SAVISIBILITÉ
AVEC LE PROTOCOLE O...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
Emmanuel Danan
44 ans
Paris
• co-fondateur...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
QU’EST-CE QUE L’OPEN GRAPH?
3
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 4
– JDN (http://www.journaldunet.com/ebusi...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
COMMENT FONCTIONNE
L’OPEN GRAPH?
5
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 6
Acteur Action Objet
• Partager
• Ecouter...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 7
OPEN GRAPH
ACTOR
7
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 8
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
LE CADRE DE CETTE PRÉSENTATION
9
• 2 objet...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
FACEBOOK REPRÉSENTE À LUI SEUL
92% DES PAR...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
FACEBOOK A DÉPASSÉ GOOGLE ENTERME DE
SOURC...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
POURQUOI METTRE EN PLACE
L’OPEN GRAPH?
12
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 13
Quelle est la publication…
…qui a le pl...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 14
Vous voulez laisser faire le hasard?
Sé...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
LES BALISES PRINCIPALES
VISIBLES
15
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 16
og:image
Utilisez des images d'au moins...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 17
og:image
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 18
og:title
Le titre n’est en théorie pas ...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 19
og:description
Le description n’est en ...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 20
article:author
Cette balise que très pe...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 21
1 2
3
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
LES BALISES POTENTIELLEMENTVISIBLES
À SÉRI...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 23
article:publisher
Elle représente l’ent...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 24
og:see_also
Cette balise sert en théori...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 25
article:tag
Cette balise sert aussi en ...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
PROMOUVOIR
UN ARTICLE
AVEC UNE VIDEO
direc...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
LE PRINCIPE…
27
Utiliser la bande
passante...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
LE CAS VIMEO…
28
surVimeo, même si le
lien...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
LA MISE EN ŒUVRE
29
Voici les méta à rense...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
LE BONUS…
30
Meme si, en terme de
SEO à pr...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
VOUSVOULEZ TESTER?…
31
Partagez ces liens ...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
ET SI C’ÉTAIT AUSSI FACILE QUE ÇA…
32
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
LAISSER MOI VOUS PRESENTER SOCIALMETA
33
h...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
CONFIGURATION
34
Seuls 3 paramètres sont
r...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 35
UTILISATION
ben…
… remplir les champs ;)
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 36
UTILISATION
(SUITE)
ben…
… remplir les ...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
ATTENTION! QUANDVOUS EFFECTUEZ
DES MODIFIC...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
…TESTER SES PAGES
ET PURGER LE CACHE
DE FA...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 39
https://developers.facebook.com/tools/d...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 40
https://developers.facebook.com/tools/d...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
VALIDER SES
TWITTER CARDS
41
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 42
https://cards-dev.twitter.com/validator...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 43
LE CAS PARTICULIER
DESVIDEOS
Vous devez...
Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
RESSOURCES UTILES
44
https://github.com/vi...
Prochain SlideShare
Chargement dans…5
×

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

1 118 vues

Publié le

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

Publié dans : Médias sociaux
  • Soyez le premier à aimer ceci

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

×