plxSocialMeta ajout des balises opengraph, twittercard et schema.org

avril 2020 modifié dans Plugins
Hello,

Juste pour informer la communauté que j'ai crée un plugin qui permet d'ajouter automatiquement les balises opengraph, twittercard et schema.org sur les pages articles.

Chaque type de meta est désactivable via le panneau d'administration.

Il est disponible dans le repo Github :

https://github.com/petitchevalroux/plxSocialMeta

Testé sur la dernière version de Pluxml

Les balises ajoutées sont les suivantes :
Opengraph :
  • og:type => article
  • og:url => url de l'article
  • og:title => titre de la page
  • og:description => meta description de la page
  • og:image => première image de l'article
Twittercard :
  • twitter:card => summary|summary_large_image configurable via l'administration
  • twitter:url => url de l'article
  • twitter:title => titre de la page
  • twitter:description => meta description de la page
  • twitter:image:src => première image de l'article
  • twitter:site => Compte twitter du site configurable via l'administration
  • twitter:creator => Compte twitter de l'auteur configurable via l'administration
Schema.org / Google Plus :
  • Itemtype => Article
  • url => url de l'article
  • name => titre de la page
  • description => meta description de la page
  • image => première image de l'article
«1

Réponses

  • StéphaneStéphane Member, Former PluXml Project Manager
    Salut
    Excellent. Merci pour cette contribution et le partage

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • Et en deux mots, ça sert à quoi les balises opengraph ? Facebook en est à l'origine mais je n'ai pas compris à quoi ça leur sert.
  • novembre 2014 modifié
    Bah vu qu'ils ne savent pas lire les balises titles et meta description ... Ils ont choisi de forcer la main pour créer un niveau standard :D

    A part ce petit trait d'humour, c'est justifié par le web sémantique. Le but est de comprendre que le mot "Mars" est une planète et pas une barre chocolatée. Dans le cas précis de l'opengraph, que la ressource (R de URL) est un article, une personne ... un livre et quels sont ses attributs (son auteur par exemple).

    Pour ce qui est de ce plugin, il me sert uniquement à avoir de "beaux" partages sur Facebook ;)
  • je-evrardje-evrard Member
    novembre 2014 modifié
    Merci en tout cas pour ce plugin.
  • @petitchevalroux : merci pour l'explication et le partage
  • Bonjour à tous !

    J'ai soumis l'idée à petitchevalroux d'intégrer également les metas schema.org pour Google+, ainsi que les Twitter Cards. Qu'en pensez-vous ?

    Est-ce quelque chose dont vous avez également besoin ? Et si oui, cela serait-il plus judicieux d'avoir tout dans un seul et même plugin ou dans des plugins différents (question que m'a posé petitchevalroux) ?
  • Jormun a écrit:
    Eventuellement via une page de config on choisi pour qui on active (les 3 par défaut)
    C'est exactement ce que j'avais en tête :D
  • Petite question le thème par défaut c'est du HTML 5 ou pas ?

    Parce que avec les balises G+ j'ai tout cassé ma validation 8.(
    (mes thèmes sont en XHTML ;))
  • EtienneEtienne Member
    novembre 2014 modifié
    Je viens moi aussi de tester et effectivement problème de validation HTML5...

    Par contre, en désactivant la partie meta Google+, je me suis rendu compte que l'outil http://www.google.fr/webmasters/tools/richsnippets interprétait correctement les balises Open Graph déjà déclarées.

    Donc au final je crois que ça ne sert à rien de rajouter les balises meta itemprop. A moins que d'autres aient un complément d'information à apporter sur leur utilité bien sûr... ;)

    Edit: Pour répondre à ta précédente question, le thème par défaut est effectivement bien en HTML5.
  • EtienneEtienne Member
    novembre 2014 modifié
    Les balises Open Graph suffisent effectivement pour Google+ selon la doc développeurs Google : https://developers.google.com/+/web/snippet/?hl=fr
  • EtienneEtienne Member
    novembre 2014 modifié
    Petite précision pour ceux qui veulent avoir leurs images d'illustration d'articles en grand format par défaut sur Facebook avec le plugin de petichevalroux... Il faut que vos images mesurent 500px de largeur (ou légèrement moins) pour que ça fonctionne.

    Il vous faudra donc modifier le CSS de vos thèmes en conséquence pour réduire l'affichage des images aux dimensions voulues dans vos articles sur pluXml.

    Exemple :
    [== CSS ==]
    article img {
        width: 200px;
    }
    
  • Pas mal mais en regardant le code je me rends compte que c'est généré à chaque chargement de la page et non écris dans le fichier de l'article. Si tu a peu d'articles ça va aller mais au bout d'un moment ca va être lourd.

    L'avantage de la faire à chaque chargement est que ça marche aussi pour les anciens articles. Ce qu'il faudrait envisager afin de garder un côté optimisé serait de les écrires au moment de la création/modification d'un article/page statique et pour le cas des anciens, faire un contrôle au chargement, si les balises sont pas présentes on les ajoutent au fichier de l'article.

    J'ai un string de l'array

  • flipflip a écrit:
    Pas mal mais en regardant le code je me rends compte que c'est généré à chaque chargement de la page et non écris dans le fichier de l'article. Si tu a peu d'articles ça va aller mais au bout d'un moment ca va être lourd.

    Au contraire : Si les informations étaient écrites en dur, ça ferait plus de lignes à stocker dans les fichiers de ton serveur en fonction du nombre grandissant d'articles. Là comme tu le dis, le code du plugin n'est appelé qu'au chargement d'une page et les informations ajoutées à ce moment à l'affichage.
    flipflip a écrit:
    L'avantage de la faire à chaque chargement est que ça marche aussi pour les anciens articles. Ce qu'il faudrait envisager afin de garder un côté optimisé serait de les écrires au moment de la création/modification d'un article/page statique et pour le cas des anciens, faire un contrôle au chargement, si les balises sont pas présentes on les ajoutent au fichier de l'article.

    Ce n'est de toute manière pas envisageable, car le code ajouté se situe dans la partie header de la page et non pas dans le corps des articles.
  • @flipflip personnellement ça me ne pose pas de problème de génerer les metas à chaque appels. Vu que les infos proviennent justement de l'article, je pense que ça ferait doublons de tout stocker.

    Si les performances te font vraiment peur, tu peux rajouter un cache devant (perso j'utilise varnish ;))
  • bg62bg62 Member
    décembre 2014 modifié
    superbe initiative, mais juste une interrogation: si tout cela est 'généré' à l'ouverture de la page, que rencontre réellement googlebot ???
    normalement, si l'on exclu les histoires de cache, ... rien ... je pense :)
    ne vaudrait-il pas mieux de donner simplement les x lignes de code à intégrer directement dans header.php, ce qui permettrait la lecture de l'ensemble directement et sans soucis ?
    de plus, là, lorsque l'on installe le plugin, il est souvent en 'xème' position et du coup les balises sont bien loin dans la partie ' head ' ...
    @+
  • Je ne comprend pas trop pourquoi tu penses que Google Bot ne voit pas les balises ... Elles sont bien présentes tout le temps.

    Concernant ta remarque sur l’intégration dans le header ... Effectivement c'est la solution que j'ai retenu au départ mais maintenant que j'ai 4 sites qui tournent sous pluxml, l'idée du plugin me permet de ne pas m'en préoccuper. J'ai juste à installer le plugin et basta ;)

    Enfin, le fait que les balises soient en bas de la balise head ne pose à priori pas de problème... mais si tu en vois un je veux bien que tu m'informes ;)
  • bg62bg62 Member
    décembre 2014 modifié
    Pour Google Bot, si je raisonne ainsi:
    - la page n'a pas au départ ces balises
    - lors de son ouverture = elles sont générées par le plugin
    - le bot, lui n'ouvre pas les pages .... il lit donc ce qu'il y a à l'instant ' T ' ....
    d'où mon doute ....
    ( je parle bien, pour un site lamba, et surtout sans aucune histoire de 'cache' .... :) )
  • @Jormum
    OK, je vais rester, mais cependant:
    1 - le plugin est nickel.
    2 - je reste quand même persuadé que si l'on en prend le temps, ne serait-ce pour toujours le même principe de légèreté: mieux vaudrait que tout cela soit intégré dans le codage du thème :)
    @+
  • bg62 content pour le 1 et d'accord avec toi pour le 2 ;)
  • Bonsoir,
    merci pour le plugin c'est génial,
    il y a juste un problème avec og:author
    en effet l'outil https://developers.facebook.com/tools/debug/ m'avait informé qu'il reconnait pas la balise og:author:username
    j'ai supprimé username et c'est le même problème.
    finalement j'ai changé vers og:site_name et ça marche.

    J'aimerais juste connaître la cause du problème (conflit avec google authorship ou autre)
  • Hello,

    Aucun conflit ... j'ai juste tenté de faire fonctionner cette balise mais facebook demande une url de profile facebook et j'y ai mis un nom d'auteur.
  • Juste pour up, je viens de changer le premier post, le sujet et le repos du plugin, l'ancien n'est plus maintenu (changement de nom + ajout des fonctionnalités évoquées)
  • merci pour le 'up' : testé + approuvé + adopté :)
  • aruhunoaruhuno Member
    janvier 2015 modifié
    bg62 a écrit:
    merci pour le 'up' : testé + approuvé + adopté :)
    Tout pareil ; merci petitchevalroux !

    édition du 29/01/2015 : Deux problèmes rencontrés sur la description et le titre : https://github.com/petitchevalroux/plxSocialMeta/issues/1
  • Bonjour, ce plugin marche plutôt bien sauf au niveau de certains caractères spéciaux dans le titre de m'article sur Facebook. C'est peut être un problème qui vient de chez moi.

    588612ArnJrgenvanMatendouce.png

    Une petite idée ?
    Merci.
  • Par rapport à mon souci des caractères spéciaux encore présent, ça fait pareil sur twitter et tumblr. Personne n'a ce souci ?
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Il faut utiliser la fonction PHP rawurlencode() dans le code du plugin pour éviter cela.
    C'est que j'ai fait dans le plugin share_me.
  • danielsandanielsan Member
    janvier 2016 modifié
    Je planche justement sur ça en ce moment ... cool le plugin !

    3 petits points cependant :
    [list=*]
    [*]pouvoir choisir l'itemtype du header, article ne passe pas chez moi, c'est plutôt product[/*]
    [*]penser qu'avec la prochaine version de PluXml il y a le nouveau champ natif artThumbnail ;)[/*]
    [*]qu'il soit compatible avec le plugin plxMyAutoMetaDescription ou faire comme lui :D [/*]
    [*]et penser aux autres types de page ..? est-ce nécessaire ?[/*]
    [/list]

    merci encore
  • danielsandanielsan Member
    mars 2022 modifié
    pour trouver votre fb:admin (l'ID de votre profile FB)
    http://randomtools.io/
    et rajouter la meta balise
    [== HTML ==]
    <meta property="fb:admins" content="XXX" />
    
Connectez-vous ou Inscrivez-vous pour répondre.