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

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

Embed Size (px)

Citation preview

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

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

ACCROÎTRE SA VISIBILITÉ AVEC LE PROTOCOLE OPEN GRAPH

1

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

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

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

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

QU’EST-CE QUE L’OPEN GRAPH?

3

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

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…”

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

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

COMMENT FONCTIONNE L’OPEN GRAPH?

5

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

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

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

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

OPEN GRAPH ACTOR

7

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

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

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

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

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

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/

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

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

FACEBOOK A DÉPASSÉ GOOGLE EN TERME DE SOURCE DE TRAFFIC

11

http://uk.businessinsider.com/facebook-v-google-referral-traffic-2015-8

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

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

POURQUOI METTRE EN PLACE L’OPEN GRAPH?

12

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

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

Quelle est la publication……qui a le plus d’impact?

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

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

Vous voulez laisser faire le hasard?Sérieusement?

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

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

LES BALISES PRINCIPALES

VISIBLES

15

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

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

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

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

og:image

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

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

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

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

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

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

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

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

1 2

3

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

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

LES BALISES POTENTIELLEMENT VISIBLES

À SÉRIEUSEMENT CONSIDÉRER

22

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

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.

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

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

og:see_alsoCette 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

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

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

article:tagCette 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

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

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

PROMOUVOIR UN ARTICLE

AVEC UNE VIDEOdirectement lisible dans le flux

des réseaux sociaux

26

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

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

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

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

LE CAS VIMEO…

28

sur Vimeo, 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.

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

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

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

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?

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

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

VOUS VOULEZ 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 ;-)

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

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

ET SI C’ÉTAIT AUSSI FACILE QUE ÇA…

32

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

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

LAISSER MOI VOUS PRESENTER SOCIALMETA

33

https://github.com/vistamedia/socialmeta

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

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 insightshttps://developers.facebook.com/docs/sharing/best-practices#learnmais ne sont pas obligatoire

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

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

UTILISATIONben…… remplir les champs ;)

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

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)

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

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

ATTENTION! QUAND VOUS EFFECTUEZ

DES MODIFICATIONS PENSEZ À…

37

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

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

…TESTER SES PAGES

ET PURGER LE CACHE DE FACEBOOK

38

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

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

https://developers.facebook.com/tools/debug/

SHARING DEBUGGER

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

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

https://developers.facebook.com/tools/debug/og/object/

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

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

VALIDER SES TWITTER CARDS

41

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

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

https://cards-dev.twitter.com/validator

CARD VALIDATOR

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

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

LE CAS PARTICULIER DES VIDEOS

Vous devez… “montrer patte blanche”

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

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

RESSOURCES UTILES

44

https://github.com/vistamedia/socialmeta#useful-ressources