plxSocialMeta ajout des balises opengraph, twittercard et schema.org

petitchevalroux · novembre 2014

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

Stéphane · novembre 2014

Salut
Excellent. Merci pour cette contribution et le partage

Jerry Wham · novembre 2014

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.

petitchevalroux · novembre 2014

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

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-evrard · novembre 2014

Merci en tout cas pour ce plugin.

Jerry Wham · novembre 2014

@petitchevalroux : merci pour l'explication et le partage

Etienne · novembre 2014

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) ?

je-evrard · novembre 2014

+1

petitchevalroux · novembre 2014

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

petitchevalroux · novembre 2014

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

)

Etienne · novembre 2014

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.

Etienne · novembre 2014

Les balises Open Graph suffisent effectivement pour Google+ selon la doc développeurs Google : https://developers.google.com/+/web/snippet/?hl=fr

Etienne · novembre 2014

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;
}

flipflip · novembre 2014

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.

Etienne · novembre 2014

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.

petitchevalroux · novembre 2014

@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

)

bg62 · décembre 2014

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 ' ...
@+

petitchevalroux · décembre 2014

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

bg62 · décembre 2014

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' ....

)

bg62 · décembre 2014

@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

@+

petitchevalroux · janvier 2015

bg62 content pour le 1 et d'accord avec toi pour le 2

topwebch · janvier 2015

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)

petitchevalroux · janvier 2015

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.

petitchevalroux · janvier 2015

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)

bg62 · janvier 2015

merci pour le 'up' : testé + approuvé + adopté

aruhuno · janvier 2015

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

Matendouce · juin 2015

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.

Une petite idée ?
Merci.

Matendouce · janvier 2016

Par rapport à mon souci des caractères spéciaux encore présent, ça fait pareil sur twitter et tumblr. Personne n'a ce souci ?

bazooka07 · janvier 2016

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.

danielsan · janvier 2016

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

[/*]
[*]et penser aux autres types de page ..? est-ce nécessaire ?[/*]
[/list]

merci encore

danielsan · janvier 2016

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" />

plxSocialMeta ajout des balises opengraph, twittercard et schema.org

Réponses