Métas +

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

La version Métas+ 2 est disponible !
Consulter la documentation de la nouvelle version de Métas+

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

Le plugin fournit des modèles pour le site, les rubriques, articles et événements.

Dans la balise <head>.... </head> de votre squelette, ajouter le code suivant à l’intérieur de la boucle principale (RUBRIQUES, ARTICLES, BREVES, AUTEURS ou EVENEMENTS)

ObjetCode SPIP
Site <INCLURE{fond=inclure/metasplus-site-spip} />
Rubrique <INCLURE{fond=inclure/metasplus-rubrique,id_rubrique} />
Article <INCLURE{fond=inclure/metasplus-article,id_article} />
Evenement <INCLURE{fond=inclure/metasplus-evenement,id_evenement} />
Brève <INCLURE{fond=inclure/metasplus-breve,id_breve} />
Auteur <INCLURE{fond=inclure/metasplus-auteur,id_auteur} />

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

<INCLURE{fond=inclure/metasplus,
	titre=#GET{titre},
	lang=#GET{lang},
        territoire=#GET{territoire},
	desc=#GET{desc},
	auteur=#GET{author},
	date=#GET{date},
	url=#GET{url},
	logo=#GET{logo},
	og-type=article} />

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
<BOUCLE_p(POMMES){id_pomme}>
[(#REM) Etape 1 : on récupére les données de l'objet ]
#SET{titre,#TITRE|supprimer_tags|textebrut}
...
 
[(#REM) Etape 2 : on les transmet au modèle général ]
<INCLURE{fond=inclure/metasplus,
	titre=#GET{titre},
	lang=#GET{lang},
	desc=#GET{desc},
	auteur=#GET{author},
	date=#GET{date},
	url=#GET{url},
	logo=#GET{logo},
	og-type=product} />
 
</BOUCLE_p>
  • 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 8 juin 2018

Discussion

15 discussions

  • 1
    Natacha Courcelles

    Bonjour
    le lien de téléchargement est cassé

    merci et bonne journée
    Natacha

    Répondre à ce message

  • 3
    sorensen

    Bonjour
    Je voudrais essayer d’utiliser ce plugin, mais ça ne marche pas pour l’instant.

    Dans votre partie Utilisation, quand vous dites

    Dans la balise

    ....

    de votre squelette, ajouter le code suivant à l’intérieur de la boucle principale (RUBRIQUES, ARTICLES, BREVES, AUTEURS ou EVENEMENTS)

    vous parlez de quel squelette ? Ceux des articles, des rubriques, etc... ? Mais ils ne contiennent pas de balise

    . Et dans le squelette head.html du répertoire inclure, je ne vois pas où intégrer ces lignes...
    • sorensen

      Alors, j’ai intégré la balise INCLURE dans les squelettes articles et dist (dans le répertoire header).

      Au début ça a semblé marcher avec card validator, sauf que le logo ne passait pas (il fait 150x150 sur mon site).

      J’ai donc mis un logo de 200x200, et maintenant j’ai un message d’erreur dans le log de card validator :

      INFO : Page fetched successfully
      INFO : 8 metatags were found
      ERROR : No card found (Card error)

      Par ailleurs je ne comprends pas ce qu’il faut faire avec le modèle metaplus.html. Pourriez-vous m’expliquer ?

      Merci d’avance.

    • Pour twitter aux dernières nouvelles la taille minimale de l’image est de 440 x 220.
      Concernant l’erreur, difficile d’en dire plus sans URL pour inspecter le code.

    • sorensen

      C’est bon, j’y suis arrivé en modifiant le fichier robots.txt qui se trouve dans squelettes-dist. Ça marche, mais le rendu des images n’est pas top (avec une image de logo de 200x200, il faudrait que j’essaie avec du 500x500 peut-être), et si le titre est un peu long, il est coupé à l’arrache.
      Est-il possible de bouger ce paramètre dans le modèle metaplus.html ?

    Répondre à ce message

  • 4

    Je ne comprends pas pourquoi twitter refuse mes images alors que mes métas sont bonnes, cf image jointe du validateur twitter. j’ai essayé sur des articles récents et je suis même allé rechercher un vieil article de 2010 :
    url https://www.tendancehotellerie.fr/articles-breves/interviews/271-article/interview-de-bruno-chiaruttini-directeur-general-europe-de-preferred-hotel-group

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="Interview de Bruno CHIARUTTINI, Directeur G&#233;n&#233;ral Europe de Preferred Hotel Group - TendanceHotellerie.fr" />
    <meta name="twitter:description" content="Quel a &#233;t&#233; votre parcours avant de rejoindre Preferred Hotel Group ? Dipl&#244;m&#233; d&#039;un MBA &#224; l&#039;IMHI en 1993, j&#039;ai rejoint de tr&#232;s belles maisons en commen&#231;ant par le Carlton Intercontinental Cannes, puis le&#8230;" />
    <meta name="twitter:image" content="https://www.tendancehotellerie.fr/local/cache-gd2/a8/557059f38896419a523b71cdffd746.jpg?1520792469" />
    <meta name="twitter:url" content="https://www.tendancehotellerie.fr/articles-breves/interviews/271-article/interview-de-bruno-chiaruttini-directeur-general-europe-de-preferred-hotel-group" />

    Au passage j’ai trouvé une page de Twitter disant que le Do Not track est désactivé de twitter : https://help.twitter.com/en/safety-and-security/twitter-do-not-track
    Du coup, j’ai supprimé la ligne du fichier /inclure/metaplus.html

    • Bon, j’ai avancé : à force de tester j’ai découvert que la ligne

      1. [<meta name="twitter:image" content="(#GET{logo}|url_absolue)" />]

      me renvoie

      1. <meta name="twitter:image" content="https://www.tendancehotellerie.fr/local/cache-gd2/90/4dc4c2833aa2bfa46fca46dc5a1465.jpg?1521099386" />

      Alors qu’en insérant directement dans mon squelette

      1. [<meta name="twitter:image" content="(#LOGO_ARTICLE_RUBRIQUE|extraire_attribut{src}|url_absolue)" />]

      j’obtiens

      1. <meta name="twitter:image" content="https://www.tendancehotellerie.fr/IMG/arton9261.jpg?1521056312" />

      Twitter accepte l’image .../IMG/art... mais refuse l’image .../local/cache-gd2/... en absolue uniquement

      En attendant de progresser ou que quelqu’un me donne une piste, j’ai désactivé la ligne suivante de metasplus.html

      1. [<meta name="twitter:image" content="(#GET{logo}|url_absolue)" />]

      et inséré en haut de metasplus-article.html la ligne

      1. [<meta name="twitter:image" content="(#LOGO_ARTICLE_RUBRIQUE|extraire_attribut{src}|url_absolue)" />]

      Je sais bien que c’est du bricolage mais j’ai besoin d’avoir mes images diffusées sur Twitter

    • Précision à propos du « extraire_attributsrc » : je l’ai ajouté car j’étais parfois pollué par un class=’spip_logo spip_logos’ qui cassait l’url du logo en 2 avec d’un côté le domaine.tld/ et de l’autre local/...

    • Tu devrais laisser le code de métas+ tel quel car il faut veiller à ce que l’image ne dépasse pas un taille limite, ce que métas+ gère très bien.

      Le problème ne vient pas du plugin mais du fichier robots.txt.html de SPIP qui bloque l’accès aux dossier contenant les images retaillées (local/cache-gd2). Du coup le robot de Twitter ne peut pas récupérer l’image.
      Il y a un ticket ouvert à ce sujet, en attendant qu’une solution soit adoptée tu peux surcharger ce fichier en ajoutant ces lignes :

      User-agent: Twitterbot
      Disallow: *
      Allow:    /local/cache-gd2/
    • Merci pour le tuyau qui peut en effet régler le problème de manière semi-pérenne, enfin en attendant une solution vraiment pérenne.
      J’ai modifié robots.txt et j’ai laissé ma bidouille pour 24 heures le temps que robots.txt disparaisse du cache.

    Répondre à ce message

  • 4

    Au cas où vous verriez apparaître « titi » en haut de votre page MOT, il faut aller dans plugins/auto/metasplus/v1.2.5/inclure/metasplus-mot.html à la ligne 24 et remplacer :

    1. {si #LOGO_MOT|non}>titi

    par

    1. {si #LOGO_MOT|non}>

    Ca vous évitera de perdre du temps à chercher partout.

    Répondre à ce message

  • 8

    Hello
    I changed my website to https, but because of these two links, the green lock does not appear. I looked every where in spip files and its database, but I cannot find them :

    <link rel="schema.DCTERMS"  href="http://purl.org/dc/terms/" />
            <link rel="schema.DC"       href="http://purl.org/dc/elements/1.1/" />

    I need to change the http to https or delete these two links. Any suggestions ?

    Thank you !

    Répondre à ce message

  • 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

  • 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

  • 7

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

    • 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

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

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

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

    • En fait le code suivant pose plusieurs problème.

      [(#SET{logo,[(#LOGO_ARTICLE
      		|image_passe_partout{1200,1200}
      		|image_recadre{1200,1200}
      		|extraire_attribut{src})]
      	})]
      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).

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

      Je vais tester ça.

    • Finalement j’ai mis dans metasplus-article.html

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

      Qui me donne le résultat attendu.

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

    Répondre à ce message

  • 3

    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

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

    • 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

    • 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

  • 1

    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.

    Répondre à ce message

Ajouter un commentaire

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom