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

1. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
ACCROÎTRE SAVISIBILITÉ
AVEC LE PROTOCOLE OPEN GRAPH
1

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. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
QU’EST-CE QUE L’OPEN GRAPH?
3

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. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
COMMENT FONCTIONNE
L’OPEN GRAPH?
5

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. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 7
OPEN GRAPH
ACTOR
7

8. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 8

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. 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. 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. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
POURQUOI METTRE EN PLACE
L’OPEN GRAPH?
12

13. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 13
Quelle est la publication…
…qui a le plus d’impact?

14. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 14
Vous voulez laisser faire le hasard?
Sérieusement?

15. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
LES BALISES PRINCIPALES
VISIBLES
15

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. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 17
og:image

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. 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. 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. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 21
1 2
3

22. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
LES BALISES POTENTIELLEMENTVISIBLES
À SÉRIEUSEMENT CONSIDÉRER
22

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. 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. 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. 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. 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. 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. 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. 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. 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. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
ET SI C’ÉTAIT AUSSI FACILE QUE ÇA…
32

33. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
LAISSER MOI VOUS PRESENTER SOCIALMETA
33
https://github.com/vistamedia/socialmeta

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. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 35
UTILISATION
ben…
… remplir les champs ;)

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. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
ATTENTION! QUANDVOUS EFFECTUEZ
DES MODIFICATIONSPENSEZ À…
37

38. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
…TESTER SES PAGES
ET PURGER LE CACHE
DE FACEBOOK
38

39. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 39
https://developers.facebook.com/tools/debug/
SHARING DEBUGGER

40. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 40
https://developers.facebook.com/tools/debug/og/object/

41. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
VALIDER SES
TWITTER CARDS
41

42. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 42
https://cards-dev.twitter.com/validator
CARDVALIDATOR

43. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph 43
LE CAS PARTICULIER
DESVIDEOS
Vous devez…
“montrer patte blanche”

44. Emmanuel Danan @vistamedia Accroitre sa visibilité avec le protocole Open Graph
RESSOURCES UTILES
44
https://github.com/vistamedia/socialmeta#useful-ressources