Optimiser son site WordPress avec Facebook Opengraph

Par Lucho le . Catégorie(s) Réseaux sociaux, Wordpress

Optimiser son site Wordpress avec Facebook Opengraph

Il est impensable aujourd’hui de concevoir un site sans se préoccuper des réseaux sociaux. Like button, Like box, widget Twitter et j’en passe. Mais savez-vous vraiment ce que partagent les « socionautes » depuis votre site?

Je vais vous montrer comment optimiser son site pour les réseaux sociaux avec Opengraph et ainsi contrôler l’affichage de vos articles dans les timelines…

Un petit combo pour un tuto texte/vidéo, vous pouvez choisir ce qui vous va le mieux.

Qu’est-ce que c’est donc ça, Opengraph?

Le protocole Opengraph est une standardisation de vos données qui sont reconnues par Facebook (et les autres réseaux sociaux) et affichées en conséquence dans les timelines.

Le protocole Open Graph permet de transformer toute page du web en objet riche intégré dans le graph social. Au sein de l’eco-système Facebook, il permet à n’importe quelle page web d’avoir les mêmes fonctionnalités qu’une Page Officielle sur Facebook.com.
Alors que différentes technologies et schémas existent et pourraient être combinés ensemble, il n’y a pas de technologie qui fournit suffisamment d’informations pour représenter de manière riche n’importe quelle page dans le graph social (environnement social).  Le protocole Open Graph construit sur ces technologies existantes offre aux développeurs une seule chose à implémenter. La simplicité de développement est le but premier du protocole Open Graph ce qui a beaucoup influencé les décisions autour de sa conception technique.
Extrait du site http://www.opengraph.be/

Concrètement, vous pouvez contrôler le titre, la description, la vignette de vos articles quand ils sont partagés sur Facebook mais pas que… (Google+, Twitter cards…).

Tout se passe entre les balises <head> et </head> de votre page.

Il faut simplement insérer une balise meta avec la propriété adéquate. Voici un exemple :

Dans cet exemple, le titre de mon article partagé sur Facebook sera “Les tutos de Lucho”

Attention, je parles bien d’article partagé. Cela ne remplacera pas le titre de l’article sur votre site, cela remplacera le titre de la publication Facebook de la personne qui va partager le lien.

Il y a des balises “obligatoires” (je dis bien obligatoire entre guillemets car si elles sont manquantes, Facebook ira piocher au petit bonheur la chance dans votre code html ce qui s’approche le plus de l’élément recherché).

Voici les 4 balises “obligatoires”:

  • og:title – Le titre de votre objet comme il devrait apparaitre dans les timelines

  • og:type – Le type de votre objet

  • og:image – Une URL pointant vers une image qui représente votre objet dans les timelines

  • og:url – L’URL canonique de votre objet qui sera utilisée comme ID permanent dans le graph

Il y a d’autres propriétés disponibles comme og:description, og:site_name, og:email, og:video etc…
Vous pouvez consulter la liste sur http://www.opengraph.be/

Prenons 2 pages de mon site de démo demo.lestutosdelucho.fr

http://tuto.lestutosdelucho.fr/

http://tuto.lestutosdelucho.fr/2013/10/re-bonjour-tout-le-monde/

La première est la page d’accueil du site et la 2ème est un article.

On va regarder les paramètres de ces 2 pages vues par Facebook sur le débogueur: http://developers.facebook.com/tools/debug

Pour la page d’accueil:
Page d'accueil sans opengraphs dans le debugger Facebook

Et pour l’article :
Article sans opengraphs dans le debugger Facebook

Ça fait un peu flipper… La description et l’image ont été piochés n’importe comment dans la page…

Ce que je voudrai avoir comme résultat pour mon article:
og:url –> L’URL de la page courante
og:type –> article
og:title –> Le titre de l’article suivi du titre du site
og:image –> L’image à la une de l’article
og:description –>Le champ « Extrait » de l’article » (attention, si ce champ n’est pas rempli pour chaque article, rien ne s’affichera dans la description).

Et pour les autres pages :
og:url –> http://tuto.lestutosdelucho.fr
og:type –> website
og:title –> Le titre du site
og:image –> Le logo de mon site
og:description –>La description du site

C’est ici que nos balises entrent en scène. On va les refaire une à une pour être sûr que l’on contrôle les infos que l’on transmet… Tout va se passer entre la balise <head> et </head> de votre site. En l’occurence, pour moi, ça se passe dans /wp-content/themes/twentythirteen/header.php

On va tout d’abord mettre la balise fb:admin pour notifier Facebook de l’identité de l’administrateur du site. Ça peut vous servir notamment si vous avez des commentaires Facebook sur votre site pour la modération… On va la mettre sur toutes les pages du site :

Vous pouvez trouver votre user_id en cliquant sur ce lien : https://developers.facebook.com/tools/explorer?method=GET

Ensuite on va poser une condition :

Si on est sur un article on affiche les infos de l’article et si on est pas sur un article (page d’accueil, page, archive, tag…) on affiche les infos du site.

On va pouvoir mettre maintenant les balises meta correspondantes dans chacune des conditions:

On va commencer par remplir les balises (si ce n’est pas un article)

Jusque là, c’est assez simple.

Passons aux balises des articles

Pour l’image on va rajouter une condition pour voir si il y a une image à la une ou pas et agir en conséquence.

Pour la description, même combat que l’image, on va aller cherche l’Extrait grâce à l’ID de l’article.

Avant de débugger, vous devez absolument remplir le champ « Extrait » de votre article car on a utilisé get_the_excertpt(); . Et oui, vous avez bien lu, vous pouvez personnaliser votre description et mettre un contenu différent de l’intro de votre article si ça vous chante…

Voilà, vous pouvez regarder ce que ça donne dans le debugger, tout s’affiche comme on l’avait prévu, c’est sans colorant ni arômes artificiels… Et si quelqu’un partage autre chose qu’un article, ce sont les infos générales du site qui seront partagées.

Si ce tuto vous a plu, je vous invite à me suivre et à le partager sur les réseaux sociaux et à réagir soit dans les commentaires ou soit sur twitter avec le hashtag #lestutosdelucho.

Mots-clefs :

Rétrolien depuis votre site.

A propos de l'auteur
Avatar de Lucho

Lucho

Passionné de création web, fan de Wordpress et mordu de Joomla... Technicien son et blogueur occasionnel. Auteur du blog "Les tutos de Lucho". Facebook - Twitter - Google+

Commentaires (27)

  • Avatar de Xavier

    Xavier

    |

    Bonjour,
    Tutoriel intéressant mais je manque cruellement d’information pour afficher et lire directement sur FB une vidéo hébergée par mon site. Quelles sont les fonctions meta à rajouter dans le header ?

    Répondre

    • Avatar de Lucho

      Lucho

      |

      Salut Xavier.
      Open graph peut prendre en compte les fichiers vidéo. Ca se passe avec la balise og:video et tu renseignes l’URL de la vidéo.
      Par contre, je ne sais pas si FB pourra lire directement la vidéo dans le flux…
      Vas jeter un coup d’œil ici, c’est complet mais en anglais… http://www.ogp.me/

      Tien moi au jus si tu arrives à tes fins, ça m’interesse…

      Répondre

  • Avatar de John

    John

    |

    5 jours que je bloquais sur ce problème, ça marche du tonnerre ! et merci beaucoup pour ce post, on apprend sans recopier bêtement ! 🙂

    Répondre

  • Avatar de Oreli

    Oreli

    |

    Hey Lucho !

    Merci pour ce tuto, il est clair. Par contre.. j´arrive toujours pas à le faire…
    J´utilise All in one seo. et j´ai un thème Genesis..

    Je ne sais pas si le problème vient de là ou d´un accès que je n´ai pas réussi à avoir…
    Mais dans la page de facebook debeug, j´ai tjrs ce message qui me revient:

     » fb:app_id hasn’t been included in the meta tags. Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog. Otherwise, the default app id( —– ) will be assigned.  »

    Tu peux m´aider s´il te plait? 🙂 je te serai infiniment reconnaissante…je m´arrache les cheveux !!! 🙂

    Répondre

    • Avatar de Lucho

      Lucho

      |

      Salut Oreli.

      Me méthode fonctionne si tu n’utilises pas de plugins SEO.
      Essaye de désactiver SEO all in one pour voir si ça fonctionne.

      Répondre

  • Avatar de Marquet

    Marquet

    |

    Bonjour,
    J’avoue ne pas être très à l’aise avec l’informatique. J’utilise wordpress pour la création d’articles de journal en ligne. Jusqu’à présent, lors de la création de l’article, j’allais sur l’onglet réseaux sociaux, je téléchargeais la vignette que je voulais voir apparaître lors du partage sur facebook, et tout fonctionnait à merveille. Je n’ai rien changé à mes habitudes mais maintenant lorsque je partage mes articles, la vignette qui apparaît n’est pas celle que j’ai téléchargée, ni même celle qui apparaît avant de valider le lien URL (j’ai utilisé toutes les méthodes).. partage en cliquant sur le lien facebook, copie de l’URL de la page etc… Comment puis-je procéder pour avoir à nouveau le bon visuel ? Merci pour votre réponse éclairée. Joyeuses fêtes de fin d’année.

    Répondre

    • Avatar de Lucho

      Lucho

      |

      Salut Marquet

      Le tuto est justement fait pour ce cas de figure.
      Si c’est un peu trop compliqué pour toi, il y a des plugins pour wordpress qui font très bien le Job…

      Répondre

  • Avatar de Sacha

    Sacha

    |

    Bonjour,
    Merci beaucoup pour ce très bon tutoriel très complet 🙂
    Cependant, tout fonctionne bien mais j’ai un petit soucis.
    Lorsque je debug un article sur Facebook, j’obtiens cette erreur :
    Object at URL ‘………’ of type ‘article’ is invalid because it specifies multiple ‘og:url’ values:

    Cela est dû au if ? Je ne parviens pas à faire disparaître cette erreur bien que tout fonctionne correctement tout de même.

    Répondre

    • Avatar de Lucho

      Lucho

      |

      Salut Sacha

      Tu as les balises en double, la condition de ton if ne doit pas fonctionner. Est-ce que tu peux me donner ton code stp?

      Répondre

  • Avatar de Max

    Max

    |

    Salut Lucho,

    J’ ai essayé de suivre ton tuto, mais ca ne fonctionne pas.

    qd je souhaite afficher ma page d’accueil sur FB, mon og:title affiche une faute d’orthographe mais je n’arrive pas a trouver dans mon dashboard ou j’ai rentré cette faute!

    une idée?

    Répondre

    • Avatar de Lucho

      Lucho

      |

      Il y a des chances que ça soit dans les réglages de ton thème. Va voir dans « Apparence » –> « Thèmes » –> « Personnaliser » sur le thème que tu utilises.

      Répondre

  • kawi

    |

    bonjour , merci bcp pour les codes, mais j’ai un souci et je ne suis malheureusement pas un expert en tant que teL , ici vous avez fait en sorte qu’on ait la possibilité de prendre l’excerpt ,ce qui est bien, mais le souci c’est que dans mon espace administration je n’ai pas le petit conteneur où on écrit l’excerpt, j’utilise wordpress premium ,donc cette partie n’y est pas, du coup ma description ne sort pas sur le debug Facebook .

    comment utiliser the_content() ; comme excerpt ?, je veux dire prendre l’excerpt par le content. merci infiniment

    Répondre

    • Avatar de Lucho

      Lucho

      |

      Salut kawi.
      A la place de the_excerpt(), il faut mettre the_content() et ça devrait le faire…

      Répondre

  • Marie

    |

    Merci beaucoup, je devenais folle à cause de Facebook !

    Répondre

  • Quentin

    |

    Très très bon tuto, bravo !

    Je bloque quand même sur un petit quelque chose, j’utilise All in One SEO et au niveau du titre et de la description, Facebook prend les originaux de WordPress alors que ce sont ceux de All in One SEO qui m’intéressent.

    Petite remarque concernant l’image qui n’est soit disant pas de la bonne taille : j’ai eu exactement le même problème. En cherchant un peu sur le web, il faut en fait que l’image fasse 1200 x 630 px ! Problème résolu !

    Merci encore !

    Répondre

    • Avatar de Lucho

      Lucho

      |

      Je ne connais pas ce plugin! Pour la taille des images, merci pour l’astuce!

      Répondre

  • Avatar de Lucho

    Lucho

    |

    Salut Offman,

    Alors mon tuto traite du partage, donc du bouton share. Le bouton like ne fera qu’ ajouter un like a ta page facebook.

    Si tu n’est pas sur WordPress, il te faut faire en sorte d’afficher les bonnes données HTML. Le PHP n’est la que pour générer du HTML avec les variables disponibles. Si tu es sur un autre cms (Joomla ou autre), il te faut adapter mon code avec le framework utilisé.

    Répondre

  • offman

    |

    salut ,
    j ai deux questions :
    est que avec le bouton like , on aurra le meme effet que debuger FB ?dans le tuto a prpos c’est bien expliqué ! pourriez vous nous montrer comment bouton like ou share !!!
    deuxieme question pour ceux qui n’utlise pas Word Press , qu’elle est le fichier PHP a choisir pour mon Cas c’est DLE
    merci

    Répondre

  • Avatar de Yves

    Yves

    |

    Merci Lucho.
    J’ai vu qu’il existe des dizaines d’extensions WordPress avec le mot-clé open graph.
    Quel est celui que tu recommanderais ?
    Est-ce que ta méthode « en dur » est mieux ?
    Merci

    Répondre

    • Avatar de Lucho

      Lucho

      |

      Salut Yves
      En effet il existe pas mal d’extensions qui font ça automatiquement. Moi je préfère le faire en dur pour contrôler exactement ce qu’on veut et puis ça allège un peut le site même si ces extension ne sont en general pas très gourmandes en ressources.
      Pour ce qui est de t’en conseiller une, le mieux est de tester par toi même et de choisir celle qui colle le plus à ton besoin.

      Répondre

      • darknote

        |

        Bonjour,

        il y a le plugin SEO par excellent WordPress SEO by Yoast.

        Une question si on souhaite que ce soit toujours la même image comment faire?
        Merci

        Répondre

        • Avatar de Lucho

          Lucho

          |

          Tu n’as qu’à mettre l’URL de l’image en dur exactement comme dans mon exemple « si ce n’est pas un article »

          Répondre

  • Avatar de Richard

    Richard

    |

    Lucho,

    EXCELLENT !!
    Clair, didactique, intéressant, très utile, bref, génial.

    Merci.

    Répondre

    • Avatar de Lucho

      Lucho

      |

      Merci Richard, n’hésites pas à le partager et à me suivre sur les réseaux sociaux.

      Répondre

Laisser un commentaire

La page Facebook

Google+

Mots clefs

Commentaires récents

Fred

|

Bonjour,

Merci pour le tuto clair et concis!

Bonne continuation!

hamza

|

salut loucho , je veux faire plusieurs langues sur le site WEBNODE aide moi stp

cordialement