SPIP-Contrib

SPIP-Contrib

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

290 Plugins, 198 contribs sur SPIP-Zone, 72 visiteurs en ce moment

Accueil > Statistiques et référencement > Référencement, métadonnées et SEO > Metas + > Métas +

Métas +

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

13 votes

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

  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 8 juin 2018

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 15 mai à 14:09, par Natacha Courcelles En réponse à : Métas +

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

    merci et bonne journée
    Natacha

    Répondre à ce message

  • Le 10 avril à 08:16, par sorensen En réponse à : Métas +

    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...
    • Le 10 avril à 09:59, par sorensen En réponse à : Métas

      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.

    • Le 10 avril à 11:19, par tcharlss En réponse à : Métas +

      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.

    • Le 10 avril à 18:28, par sorensen En réponse à : Métas +

      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

  • Le 14 mars à 15:29, par guilaind En réponse à : Métas +

    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

    1. <!-- Twitter Card -->
    2. <meta name="twitter:card" content="summary" />
    3. <meta name="twitter:title" content="Interview de Bruno CHIARUTTINI, Directeur G&#233;n&#233;ral Europe de Preferred Hotel Group - TendanceHotellerie.fr" />
    4. <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;" />
    5. <meta name="twitter:image" content="https://www.tendancehotellerie.fr/local/cache-gd2/a8/557059f38896419a523b71cdffd746.jpg?1520792469" />
    6. <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" />

    Télécharger

    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

    • Le 15 mars à 18:49, par guilaind En réponse à : Métas +

      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

    • Le 15 mars à 18:54, par guilaind En réponse à : Métas +

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

    • Le 15 mars à 22:21, par tcharlss En réponse à : Métas +

      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 :

    • Le 15 mars à 23:27, par guilaind En réponse à : Métas +

      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

  • Le 9 mars à 00:51, par guilaind En réponse à : Métas +

    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

  • Le 22 novembre 2017 à 17:22, par oudnad En réponse à : Métas +

    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 !

    • Le 22 novembre 2017 à 17:31, par Maïeul En réponse à : Métas +

      Did you change also your website url in configuration>site identity ? Did you clean the cache ?

    • Le 22 novembre 2017 à 18:13, par oudnad En réponse à : Métas +

      Thank you for the quick reply. Yes I did both. I also searched the database for both links. The Accueil of the website shows the green lock. But when an article is opened, it disappears. When I view the page source, only those two links are in http,. Many thanks.

    • Le 22 novembre 2017 à 18:18, par Maïeul En réponse à : Métas +

      Should it be possible to have an url ?

    • Le 22 novembre 2017 à 18:23, par oudnad En réponse à : Métas +

      Thank you again for the quick reply. The URL of the website is

      https://www.oudnad.net

      The URL of a randome artcile is :

      https://www.oudnad.net/spip.php?article1875

      Many thanks.

    • Le 22 novembre 2017 à 18:36, par Maïeul En réponse à : Métas +

      ok, I did’nt understand which link you have spoken, because you forget the code tag around the code. I am looking on your problem

    • Le 22 novembre 2017 à 18:38, par oudnad En réponse à : Métas +

      Sorry. Many thanks for your kind assistance.

    • Le 22 novembre 2017 à 19:25, par Maïeul En réponse à : Métas +

      The version 1.2.0 of the plugin correct it.

      The zip will be made (French) tonight.

      https://zone.spip.org/trac/spip-zone/changeset/107704

    • Le 22 novembre 2017 à 19:29, par oudnad En réponse à : Métas +

      Great ! Many thanks for your kind help.

    Répondre à ce message

  • Le 8 avril 2017 à 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 2017 à 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 2017 à 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 2017 à 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 2017 à 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 2017 à 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 2017 à 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 2017 à 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 2017 à 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 2017 à 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 2017 à 09:54, par erational En réponse à : Métas +

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

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

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

  • Convertir un site SPIP 3 en utf-8 avec le plugin Grenier

    8 janvier 2014 – 23 commentaires

    SPIP 3 fonctionne nativement avec l’encodage universel unicode utf-8. Sur certains sites (par exemple sur une mise à jour), on peut avoir un site qui est resté en iso-latin ce qui n’est pas conseillé (source de bugs, d’incompatibilité, ...) . (...)

  • ScolaSPIP 4

    19 janvier 2016 – 360 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • SPIP 3.2, Agenda et FullCalendar

    6 juin – 10 commentaires

    Nous avions publié un article sur la manière d’utiliser FullCalendar avec SPIP 3.0 afin d’afficher des évènements sous forme d’Agenda. La version de FullCalendar a changé avec SPIP 3.2. Le présent article est donc un tutoriel adapté à SPIP 3.2. Pour (...)

  • Mailsubscribers

    16 janvier 2013 – 408 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes de (...)

  • Nouvelle version - Modération de modifications

    29 janvier 2012 – 49 commentaires

    Suite à une migration depuis SPIP-Agora, j’ai développé ce plugin permettant de reprendre la fonctionnalité « Nouvelle version » inexistente sur SPIP2 ni sur SPIP3 Ce plugin permet d’étendre le work-flow de -rédaction-publication d’un article au cas d’un (...)