SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 194 visiteurs en ce moment

Accueil > Squelettes > Outils pour squelettes > Metas + > Métas +

Métas +

3 décembre 2016 – par erational, tetue – 25 commentaires

11 votes

Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card.

Installation

Activer le plugin dans le menu dédié.

Dans le panel de configuration, vous pouvez choisir quelles méta-données, vous voulez activer ou non :

  • Dublin Core : sémantique
  • Opengraph : format adopté notamment par Facebook . Il permet d’améliorer les informations transmises lorsque vos utilisateurs partagent une page
  • Twitter Card

Utilisation

Dans la balise <head>.... </head> de votre squelette de la page article, ajouter le code suivant à l’intérieur de la boucle ARTICLES

  1. <INCLURE{fond=inclure/metasplus-article,id_article} />

Utilisation avancée

Il est possible d’étendre l’ajout des métas à d’autres objets SPIP (rubriques, lieux, cartes, patates, ....)

Le plugin fournit un modèle général inclure/metasplus.html auquel il faut fournir les informations requises

  1. <INCLURE{fond=inclure/metasplus,
  2. titre=#GET{titre},
  3. lang=#GET{lang},
  4. territoire=#GET{territoire},
  5. desc=#GET{desc},
  6. auteur=#GET{author},
  7. date=#GET{date},
  8. url=#GET{url},
  9. logo=#GET{logo},
  10. og-type=article} />

Télécharger

Tous les paramètres sont facultatifs mais il est fortement indiqué de renseigner au minimum titre, desc, url.

Il faut transmettre des chaînes brutes sans HTML. On pourra utiliser les filtres |supprimer_tags|textebrut pour nettoyer les balises SPIP.

Nom du paramètreRemarques
titre titre
lang langue
territoire Permet de créer le locale facebook en_UK. Si ce paramètre territoire n’est pas transmis, on tente une locale avec la langue fr_FR, de_DE
Avec une exception pour l’anglais réglé par défaut sur en_US
Pour documentation, voici la liste des locales acceptés par Facebook ;
https://www.facebook.com/translations/FacebookLocales.xml
desc texte court d’introduction
auteur auteur sans lien
date Date en format YYYY-MM-DD
url URL de la ressource
logo Les images doivent faire au minimum 200x200 pixels et peser moins de 1Mo.
og-type Pour connaître les valeurs acceptées de og-type,
on pourra consulter :
https://developers.facebook.com/doc....
Si on ne précise rien, la valeur par défaut est article.

Par exemple pour un objet pomme

  • créer inclure/metasplus-pomme.html
  1. <BOUCLE_p(POMMES){id_pomme}>
  2. [(#REM) Etape 1 : on récupére les données de l'objet ]
  3. #SET{titre,#TITRE|supprimer_tags|textebrut}
  4. ...
  5.  
  6. [(#REM) Etape 2 : on les transmet au modèle général ]
  7. <INCLURE{fond=inclure/metasplus,
  8. titre=#GET{titre},
  9. lang=#GET{lang},
  10. desc=#GET{desc},
  11. auteur=#GET{author},
  12. date=#GET{date},
  13. url=#GET{url},
  14. logo=#GET{logo},
  15. og-type=product} />
  16.  
  17. </BOUCLE_p>

Télécharger

  • ajouter dans le squelette de la page pomme, dans le <head>.... </head>
  1. <INCLURE{fond=inclure/metasplus-pomme,id_pomme} />

Outils divers

Outils Facebook
Outil pour vérifier vos opengraphs
https://developers.facebook.com/too...

Ces données sont mises en cache, voici l’outil pour vider le cache
https://developers.facebook.com/too...

Outils Twitter
Outil pour tester vos twitter cards
https://cards-dev.twitter.com/validator

Dernière modification de cette page le 27 mars 2017

Retour en haut de la page

Vos commentaires

  • Le 8 avril à 11:14, par christophe En réponse à : Métas +

    bonjour,

    une question sur la configuration.

    Pourquoi poser une question négative : « cocher les éléments que l’on ne souhaite pas afficher » ?

    Je trouve cette formulation très étrange, parce que cocher une case implique plutôt d’ajouter et non de retirer.

    Et comme tous les éléments sont décochés par défaut, il me semblerait plus logique de demander « quels éléments souhaitez-vous afficher ? ».

    Bref, pourquoi faire compliqué quand on peut faire simple ? ;-)

    Répondre à ce message

  • Le 15 février à 15:25, par Loiseau2nuit En réponse à : Métas +

    Ah Ah ! Merci ! Vous m’avez coiffé au poteau :D
    Ca faisait un *long* moment que je me disais qu’il allait falloir que je normalise un jour les modifs en ce sens que j’avais pour habitude de faire dans mes squelettes pour soit les intégrer à Metas, soit en faire un nouveau plugin. Bon bah on dirait qu’un slot vient de se libérer dans ma TODO list ^^

    Répondre à ce message

  • Le 5 décembre 2016 à 08:10, par Valéry En réponse à : Metas +

    |image_passe_partout160,160 : n’est-ce pas un format beaucoup trop petit par rapport aux images partagées sur Facebook ou Twitter ?

    • Le 5 décembre 2016 à 11:53, par erational En réponse à : Metas +

      En effet, la documentation a évolué
      https://developers.facebook.com/docs/sharing/best-practices?locale=fr_FR#images

      Utilisez des images d’au moins 1 200 x 630 pixels pour un affichage optimal sur les appareils à haute résolution.

      Dimension d’image minimale

      Le format d’image minimum est 200 x 200 pixels. Si vous utilisez une image plus petite, vous verrez une erreur dans le Débogueur de partage.

      Je mets à jour le plugin pour en tenir compte

    • Le 5 décembre 2016 à 18:32, par tetue En réponse à : Metas +

      Que se passera-t-il pour un site qui n’a que des visuels de 150x150 (par exemple) ?

    • Le 5 décembre 2016 à 20:39, par erational En réponse à : Metas +

      D’après ce que je comprends de la documentation, les visuels plus petits ne « valident » pas mais il est possible que le partage fonctionne quand même.

    • Le 7 décembre 2016 à 17:35, par tetue En réponse à : Métas +

      Oui, d’expérience, je sais que ça passe, côté Facebook ;)
      Ma question valait donc côté SPIP : dispose-t-on d’un filtre agrandissant les images ?

    • Le 14 février à 22:30, par Valéry En réponse à : Métas +

      En fait le code suivant pose plusieurs problème.

      1. [(#SET{logo,[(#LOGO_ARTICLE
      2. |image_passe_partout{1200,1200}
      3. |image_recadre{1200,1200}
      4. |extraire_attribut{src})]
      5. })]

      Télécharger

      1. Les pages partagées s’affichent dans le fil d’info de facebook au format 1,91:1 (# 1200:630) et nous générons ici une image carrée.
      2. image_passe_partout suivi de recadre force une image aux proportions requises même si l’image est plus petite : résultat on voit sur facebook une petite image entourée de blanc (le remède est donc pire que le mal).

      Je préconise donc plutôt de d’abord recadrer sur la base de proportions puis de réduire aux dimensions maximales.

      |image_recadre{1.91:1,'center'}|image_reduire{1200,630}

      Peux-être peut-on même proposer 2400,1260 pour prévoir les retina, je ne sais pas ce que Facebook prévoit mais c’est le format généré par exemple pour les posts facebook par un outil comme spark.adobe.com

      Enfin il manque la largeur et la hauteur à indiquer pour que le premier partage affiche directement l’image (cf. la doc).

      1. [<meta property=og:image:width" content="(#LOGO_ARTICLE|image_reduire{1280}|largeur)">]
      2. [<meta property=og:image:height" content="(#LOGO_ARTICLE|image_reduire{1280}|hauteur)">]

      Télécharger

      Je vais tester ça.

    • Le 14 février à 22:59, par Valéry En réponse à : Métas +

      Finalement j’ai mis dans metasplus-article.html

      1. [(#SET{logo,[(#LOGO_ARTICLE
      2. |image_reduire{2400,1260}
      3. |image_recadre{1.91:1,'-','center'}
      4. |extraire_attribut{src})]
      5. })]

      Télécharger

      Qui me donne le résultat attendu.

    • Le 15 février à 09:04, par erational En réponse à : Métas +

      Merci pour ce retour.
      Pouvez-vous commiter ce code afin que tout le monde en profite ?

    Répondre à ce message

  • Le 22 janvier à 18:32, par Chrys En réponse à : Métas +

    Bonjour,

    Je viens d’installer ce plug et tout fonctionne a merveille, sauf pour twitter j’ai bien le texte mais pas l’image de l’article en question.

    Il y a t’il quelque chose a modifier pour ça ? Merci

    • Le 22 janvier à 18:44, par erational En réponse à : Métas +

      As tu vérifié le code produit pour twitter ?
      https://cards-dev.twitter.com/validator

      Twitter semble avoir un délai sur les petits sites., les premiers partages ne semblent pas lister les images de suite.

    • Le 22 janvier à 19:07, par Chrys En réponse à : Métas +

      Justement oui, c’est ce qui m’étonne car sur la page validator je vois mon image.

      Je vais attendre donc, merci pour ta prompte réponse

    • Le 22 janvier à 19:59, par Chrys En réponse à : Métas +

      Erational en effet, je confirme, il y a un moment de latence entre la publication et l’apparition de l’image.

      Merci pour ce plug ;-)

    Répondre à ce message

  • Le 14 janvier à 09:26, par Valéry En réponse à : Métas +

    Pour les webmestres qui ne veulent pas toucher aux squelettes peut-être faut-il prévoir l’insertion dans le head forcée comme pour les métas du plugin SEO ? Avec option de désactiver pour ceux qui veulent personnaliser le contenu des métas.

    • Le 16 janvier à 09:54, par erational En réponse à : Métas +

      Oui, sans doute... J’ajoute cela à ma TODO.

    Répondre à ce message

  • Le 6 décembre 2016 à 07:43, par Valéry En réponse à : Metas +

    Pour la langue ne fait-il pas utiliser le format langue_Territoire comme spécifié ici ?

    og:locale - The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.

    Lors de mes dernière mise en place ne validait pas avec juste #LANG

    • Le 8 décembre 2016 à 15:54, par erational En réponse à : Métas +

      Bonjour,

      Bonne remarque.
      Pour l’instant on tentait uniquement un simple fr_FR, en_EN

      La prochaine version du plugin intégrera un paramètre territoire pour gérer ce cas.
      Si ce paramètre territoire n’est pas transmis, on tente un fr_FR, de_DE.
      Avec une exception pour l’anglais réglé par défaut sur en_US

      Pour documentation, voici la liste des locales acceptés par Facebook ;
      https://www.facebook.com/translations/FacebookLocales.xml

    Répondre à ce message

  • Le 6 décembre 2016 à 20:39, par Metal-Mighty En réponse à : Metas +

    Bonjour

    J’ai installé Metas+ 1.1.2 sur mon Spip 3.1.3 mais les tags ne sont pas ajoutés à mes pages en utilisant la ligne INCLURE fournie sur cette page, même après un vidage de cache. Le squelette est bien présent dans /plugins/auto/metasplus/v1.1.2/inclure/.

    Une idée d’où cela pourrait venir ?

    • Le 7 décembre 2016 à 08:54, par erational En réponse à : Metas +

      ton plugin est bien activé ?
      il faut que la ligne soit insérée à l’intérieur d’une boucle ARTICLES

      si tu as une URL à fournir ....

    • Le 7 décembre 2016 à 16:43, par Metal-Mighty En réponse à : Métas +

      Alors j’ai résolu mon problème, pour une raison toute simple : la configuration de Metas+ demande les metas à NE PAS afficher, et j’avais tout coché en pensant que c’était l’inverse...
      Je trouve ca un peu illogique d’ailleurs ! A mon sens toutes les cases devraient être cochées par défaut pour tout activer, et décochées par l’administrateur si jamais il souhaite optimiser son site !

      Mais bon, j’apprendrai à lire la prochaine fois :)

    Répondre à ce message

  • Le 6 décembre 2016 à 07:36, par Valéry En réponse à : Metas +

    Les balises open graph concernant les visuels servent à définir l’image qui sera utilisée dans le fil d’info dans quoi Facebook prend la première image venue. Si elle est petite le seul impact à ma connaissance sera une présentation mettant moins l’image en valeur et donc potentiellement moins d’engagement.

    Répondre à ce message

  • Le 5 décembre 2016 à 02:50, par davduf En réponse à : Metas +

    Oh, oui ! Ça marche !
    Merci bp !

    Répondre à ce message

  • Le 4 décembre 2016 à 11:05, par davduf En réponse à : Metas +

    Voilà qui semble (encore) diablement intéressant !

    Hélas, mon Spip me montre qu’en grisé ce plug-in, impossible de l’installer automatiquement... Normal ?

    Merci et coucou Tétue !

    • Le 4 décembre 2016 à 13:05, par erational En réponse à : Metas +

      Je viens de tester sous SPIP 3.0 et avec un répertoire plugins/auto/, l’installation automatique fonctionne sans problème. La version actuelle est Metas plus 1.1.1

      Le plugin est en grisé car il est en version de développement mais on peut l’installer sans problème dès maintenant.

      On devrait le passer en stable sous peu.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • SPIP-Bible

    25 janvier 2010 – 90 commentaires

    Permet de citer rapidement des extraits de la Bible en utilisant un modèle dans le texte d’un article.

  • Pour un fonctionnement communautaire efficace dans la communauté SPIP

    24 mai – commentaires

    Où l’on propose de tester des nouvelles façons de prendre des décisions et d’avancer collectivement sur des projets SPIP, de manière transparente, en impliquant la communauté, et en étant plus accueillants pour les nouvelles personnes. Tout ça dans la (...)

  • Mailshot

    16 janvier 2013 – 258 commentaires

    Ce plugin prend en charge l’envoi en nombre d’info-lettres par email. Mailshot permet l’envoi en nombre d’emails au moyen d’un SMTP (ou d’un service externe) dédié à cet effet. Il permet de limiter la cadence d’envoi. Enfin, ce plugin implémente la (...)

  • Configurer Mailjet

    25 avril 2016 – 11 commentaires

    N’hésitez pas à relire le préambule de cette rubrique avant de créer un compte sur une plateforme tierce . Après avoir créé votre compte Étape 1 : Ajouter votre domaine Aller sur la page : https://app.mailjet.com/account/domain Suivre les (...)

  • GIS 4

    11 août 2012 – 1349 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

Ça spipe par là