Métas + (version 2)

Une version 2 qui simplifie l’utilisation du plugin : activez, c’est prêt !

Métas + est un plugin qui permet d’améliorer l’indexation de vos contenus dans les moteurs de recherche et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card.

Voir l’article consacré à la version 1.

Évolutions

Cette version du plugin génére et insère automatiquement les métadonnées dans le <head> de vos pages, quelque soit le type d’objet éditorial.
Dans la majorité des cas, il suffit d’activer le plugin, et ça fonctionne : plus besoin de modifier les squelettes.

→ Quelques métadonnées ont été ajoutées ou mises à jour, notamment :

  • Tous les auteurs sont présents au lieu d’un seul auparavant
  • Les mots-clés sont présents
  • Les dimensions des images ont été mises à jour pour correspondre aux dernières recommandations des réseaux sociaux, et leur titre est présent.
  • 3 images sont sélectionnées pour Open Graph
  • Le format « riche » est activé pour Open Graph / Facebook

→ Dans la configuration, on choisit les protocoles à activer plutôt que ceux à désactiver.

→ Côté intégration, le rangement des squelettes a été revu.

→ Pour SPIP 3.1+

Intégration & personnalisation

Le reste de cette documentation ne vous sera utile que si vous avez besoin de personnaliser les métadonnées lorsque la génération automatique ne convient pas.

Le plugin tente de récupérer toutes les informations pertinentes automatiquement (titre, description, etc.), ce qui devrait convenir la plupart du temps, mais il peut arriver que cela ne soit pas suffisant dans certains cas.

Il n’est par exemple pas possible de deviner le « type » exact de chaque contenu, c’est pourquoi on en indique un assez générique par défaut : « article » pour Open Graph, « Text » pour Dublin Core.
Mais il pourrait être utile d’indiquer le vrai type précis pour les nouveaux objets éditoriaux.

Dans ces cas, il faut créer des squelettes de variantes.

Organisation des squelettes et mécanisme de sélection

Les squelettes sont maintenant organisés ainsi (comparaison avant/après) :

Chemin Explication
inclure/metasplus/dist.html Génère automatiquement les valeurs des métadonnées, puis les affiche en incluant le suivant.
inclure/metasplus/inc-dist.html Affiche les métadonnées selon les valeurs qu’on lui transmet.
inclure/metasplus/ {type-page}.html Variante spécifique à un type de page

Pour chaque type de page, le plugin va chercher s’il existe un squelette spécifique inclure/metasplus/{type-page}.html, et à défaut il se rabat sur le squelette générique inclure/metasplus/dist.html qui produit automatiquement les métadonnées [1].

Si, pour un type de page précise, la génération automatique ne convient pas, il suffit de créer un squelette de variante.

Pour exclure certaines pages de l’insertion automatique, on peut les lister au moyen d’une constante à ajouter dans mes_options.php, ou bien créer des squelettes de variantes vides :

  1. define('_METASPLUS_PAGES_EXCLUES',  'article,patate,pomme');

Squelettes de variantes

Prenons l’exemple d’un hypothétique objet éditorial « livre », qui aurait plusieurs particularités :

  • Le type par défaut ne convient pas.
  • La date pertinente n’est pas celle de rédaction du contenu (#DATE), mais celle de publication du livre (#DATE_PUBLICATION).
  • Les auteurs seraient différenciés au moyen du plugin Rôles d’auteurs (auteur, traducteur, relecteur, etc.), et nous souhaitons avoir les auteurs avec un rôle précis.

Dans ce cas, il faudrait un squelette de variante inclure/metasplus/livre.html.
Quant au contenu, vous avez plusieurs possibilités :

1) Inclure le squelette dist.html

En incluant ce squelette, vous ne tranmsettez que les valeurs que vous souhaitez modifier, celles non transmises seront générées automatiquement.

<BOUCLE_livres(LIVRES){id_livre}>
[(#REM) Récupérer les données à modifier ]
#SET{auteurs,#ARRAY}
<BOUCLE_auteurs(AUTEURS){id_livre}{role=ecrivain}>
#SET{auteurs,#GET{auteurs}|push{#NOM}}
</BOUCLE_auteurs>
 
[(#REM) Afficher les métadonnées ]
<INCLURE{fond=inclure/metasplus/dist,
    og-type=book,
    dc-type=PhysicalObject,
    date=#DATE_PUBLICATION,
    auteurs=#GET{auteurs},
} />
</BOUCLE_livre>

2) Inclure le squelette inc-dist.html

Avec cette inclusion, vous devez transmettre toutes les valeurs, celles non transmises ne seront pas présentes.

<BOUCLE_livre(LIVRE){id_livre}>
 
[(#REM) Récupérer toutes les données ]
#SET{auteurs,#ARRAY}
<BOUCLE_auteurs(AUTEURS){id_livre}{role=ecrivain}>
#SET{auteurs,#GET{auteurs}|push{#NOM}}
</BOUCLE_auteurs>
<!-- Idem pour les mots-clés, les images, etc. -->
 
[(#REM) Afficher les métadonnées ]
<INCLURE{fond=inclure/metasplus/inc-dist,
    og-type=book,
    dc-type=PhysicalObject,
    titre=#TITRE,
    url=#URL_LIVRE,
    desc=#DESCRIPTIF,
    lang=#LANG,
    date=#DATE_PUBLICATION,
    maj=#MAJ,
    auteurs=#GET{auteurs},
    mots=…,
    logos=…,
} />
</BOUCLE_livre>

3) Tout faire à la main

Et vous pouvez bien sûr tout faire vous même, si par exemple vous avez besoin d’ajouter des metadonnées qui ne sont prises en compte dans les squelettes génériques.

Paramètres

Voici la liste de tous les paramètres pris en compte.
Les nouveaux sont signalés avec une astérisque*, ceux obsolètes sont barrés.

Paramètre Explication
titre Titre de la ressource
desc Description de la ressource
url URL absolue de la ressource
date Date de publication
maj Date de dernière modification
lang Code de langue en 2 lettres : fr
territoire 2 lettres pour compléter la langue afin de créer la locale : en_US par ex.
og-type Type de ressource Open Graph
dc-type Type de ressource Dublin Core
mots* Soit un tableau linéaire :
  1. #LISTE{Lorem,Ipsum}
Soit une liste de mots-clés séparés par des virgules
auteurs

auteur

Soit un tableau linéraire :
  1. #LISTE{Lorem,Ipsum}
Soit une liste de noms séparés par des virgules
logos

logo

Soit un tableau de tableaux associatifs contenant l’URL et le texte alternatif de chaque image :
#LISTE{
    #ARRAY{
        url, https://site.ltd/image1.jpg,
        alt, lorem ipsum,
    },
    #ARRAY{
        url, https://site.ltd/image2.jpg,
        alt, tempus fugit,
    }
}
Soit une liste d’URLs séparées par des virgules :
  1. https://site.ltd/image1.jpg,https://site.ltd/image2.jpg

Images et robots

Si, lors du partage sur un réseau social, les robots ne parviennent pas à récupérer les images, il faut leur donner accès au répertoire qui stocke les images redimensionnées.
Pour cela, surcharger le fichier robots.txt.html en ajoutant des règles.

Voici un exemple pour le robot de Twitter :

User-agent: Twitterbot
Disallow: *
Allow:    /local/cache-gd2/

Métadonnées générées

Voici un exemple complet des métadonnées générées pour un article.

<!-- Plugin Métas + -->
 
<!-- Dublin Core -->
<meta name="DC.Format" content="text/html">
<meta name="DC.Type" content="Text">
<meta name="DC.Language" scheme="rfc1766" content="fr">
<meta name="DC.Title" lang="fr" content="Omnis quia quo cum eaque – Lorem ipsum">
<meta name="DC.Description.Abstract" lang="fr" content="Sapiente totam quo ut fugiat pariatur voluptatum nihil nulla. Ratione culpa consectetur quo quasi est enim autem repellat,…">
<meta name="DC.Date" scheme="DCTERMS.W3CDTF" content="2018-05-08">
<meta name="DC.Date.Modified" scheme="DCTERMS.W3CDTF" content="2018-05-09">
<meta name="DC.Identifier" scheme="URI" content="https://www.monjolisite.ltd/lorem-ipsum">
<meta name="DC.Publisher" content="Lorem ipsum">
<meta name="DC.Source" scheme="URI" content="https://www.monjolisite.ltd">
<meta name="DC.Creator" content="Lorem Ipsum">
<meta name="DC.Creator" content="Tempus Fugit">
<meta name="DC.Subject" content="Lorem">
<meta name="DC.Subject" content="Ipsum">
 
<!-- Open Graph -->
<meta property="og:rich_attachment" content="true">
<meta property="og:site_name" content="Lorem ipsum">
<meta property="og:type" content="article">
<meta property="og:title" content="Omnis quia quo cum eaque – Lorem ipsum">
<meta property="og:locale" content="fr_FR">
<meta property="og:url" content="https://www.monjolisite.ltd/lorem-ipsum">
<meta property="og:description" content="Sapiente totam quo ut fugiat pariatur voluptatum nihil nulla. Ratione culpa consectetur quo quasi est enim autem repellat,…">
<meta property="og:image" content="https://www.monjolisite.ltd/image1.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="Et cumque sunt explicabo hic tempora">
<meta property="og:image" content="https://www.monjolisite.ltd/image2.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="Amet aperiam mollitia sint aut.">
<meta property="og:image" content="https://www.monjolisite.ltd/image3.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="Dolorum sed vel saepe perferendis.">
<meta property="article:published_time" content="2018-05-08">
<meta property="article:modified_time" content="2018-05-09">
<meta property="article:author" content="Lorem Ipsum">
<meta property="article:author" content="Tempus Fugit">
<meta property="article:tag" content="Lorem">
<meta property="article:tag" content="Ipsum">
 
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Omnis quia quo cum eaque – Lorem ipsum">
<meta name="twitter:description" content="Sapiente totam quo ut fugiat pariatur voluptatum nihil nulla. Ratione culpa consectetur quo quasi est enim autem repellat,…">
<meta name="twitter:dnt" content="on">
<meta name="twitter:url" content="https://www.monjolisite.ltd/lorem-ipsum">
<meta name="twitter:image" content="https://www.monjolisite.ltd/image1.jpg">
<meta property="twitter:image:alt" content="Et cumque sunt explicabo hic tempora">

Constantes de personnalisation

Exclure certains groupes de mot-clefs des métas

  1. define('_METASPLUS_EXCLURE_GROUPESMOTS', '1,3,5');

Ne pas afficher les auteurs des articles et les remplacer par le #NOM_SITE_SPIP

  1. define('_METASPLUS_MASQUER_AUTEURS', 'oui');

Notes

[1Ce mécanisme s’inspire de celui de Z-core : des squelettes dist.html et des variantes {page}.html


Une comparaison du rangement des squelettes entre la v1 et la v2, à toutes fins utiles (depuis le dossier inclure) :

Avant Après
metasplus-article.html metasplus/dist.html
metasplus-rubrique.html
metasplus-breve.html
metasplus-mot.html
metasplus-site-spip.html
metaplus-evenement metasplus/evenement.html
metaplus-auteur metasplus/auteur.html
metasplus.html metasplus/inc-dist.html

Dernière modification de cette page le 14 janvier 2019

Discussion

5 discussions

  • 2

    Bonjour,
    Merci pour ce gros travail sur le plugin.
    Maintenant que le plugin passe par #INSERT_HEAD, les ajouts sont les derniers avant la fin du head alors qu’auparavant, j’arrivais à placer les métas Open Graph dans les premiers ligne du head.
    Pourtant mon #INSERT_HEAD est placé avant d’autres insertions, Comment faire pour que les métas Open graph soient placées plus haut dans le head ?
    Depuis le changement, Facebook ne lit pas toujours bien ses métas et j’ai un problème avec Hootsuite qui ne récupère pas mes images correctement : il arrive même que Hootsuite récupère le pixel Piwik au lieu de l’image désignée. Mon « inclure » Matomo/Piwik est pourtant censé se placer après #INSERT_HEAD
    Par contre les métas twitter sont bien lues par twitter alors que se sont les dernières le mon head

    • La position des <meta> dans le <head> n’est pas censée avoir d’impact fonctionnellement. Et je n’ai rien vu de spécial d’indiqué de ce côté là dans les documentations d’open graph ou de twitter.
      Tu as vu des indications allant dans ce sens quelques part ?

      Facebook ne lit pas toujours bien ses métas

      Quel est le problème exactement ? Ça concerne toutes les metas, ou juste une partie (et si oui, lesquelles) ?
      Tu as testé avec l’outil de debug de facebook (et si oui, quel est le retour) ?

    • A priori Facebook s’arrête sur les métas « de base » en haut de <head> et ne descend pas jusqu’au métas open graph

      En haut de sa page debug il indique 3 alertes :

      • Propriété déduite : La propriété og :image doit être spécifiée de manière explicite, même si une valeur peut être déduite à partir d’autres balises.
      • Propriétés étrangères spécifiées : Les propriétés suivantes sont spécifiées sur la page web mais ne sont pas prises en charge pour le type ’og :type’ : fb:page_id spécifié
      • [fond jaune]Propriétés manquantes : Les propriétés requises suivantes manquent : og:url, og:type, og:title, og:image, og:description, fb:app_id[/fond jaune]

      Ensuite Facebook les construit bien « À partir des balises brutes, nous avons construit les propriétés suivantes Open Graph »

    Répondre à ce message

  • 1

    Re-bonjour,
    Suggestion pour une prochaine version :
    Facebook relaie le nom de l’auteur d’un article si on insère la méta <meta property="article:author" content="https://www.facebook.com/XXX" />
    Dans mon cas, j’ai ajouté un champ extra « fb_author » sur la page ecrire/ ?exec=auteur&id_auteur=YYY et dans lequel j’insère https://www.facebook.com/XXX
    Pourrait-on automatiser ce processus dans la génération des métas OpenGraph ? Ceci imposerait de créer un champ extra sur la fiche auteur si on coche l’option.
    Pour ma part, j’ai ajouté manuellement dans mes squelettes

    • Merci pour la suggestion.

      Pour l’instant je ne vois pas trop comment faire ça proprement, il faut y réfléchir.
      Il y a plusieurs moyens de lier des comptes facebook à des auteurs, ça peut être des champs extras, mais aussi d’autres via d’autres plugins plus spécialisés (sociaux, etc.).
      Il y a aussi une option à prendre en compte, celle qui fait en sorte de créditer le site comme auteur des contenus au lieu de chaque auteur individuellement, dans ce cas l’identifiant facebook peut venir d’autres plugins (identité extra, etc.)

      Ça fait beaucoup de « si » à prendre en compte, bref, à suivre...

    Répondre à ce message

  • 1

    Bonjour,

    Tout d’abord, merci pour ce plugin ! ;-)
    Je remarque un petit problème graphique dans l’espace privé : le mini logo à côté du texte « Aperçu des métas+ » est décalé vers le bas et laisse apparaître ce qui semble être le titre ou la balise alt de l’image (cf la copie d’écran ci-dessous).
    Version SPIP : SPIP 3.2.1 [23954]
    Version Métas + : 2.1.5 SVN [110903]
    Bonne journée !

    Répondre à ce message

  • 1

    Problème lors de l’installation du plugin du squelette Phantom :
    • Mise à jour du plugin « Metas + » (de la version 1.2.8 à ) donne page blanche
    Il semblerait qu’il y ait 2 versions de Metas + 1.2.8 :
    Metas + 1.2.8 stable
    Metas + 1.2.8 test

    Répondre à ce message

  • 1

    Hello,

    Ce plugin va avoir des problème avec PHP 7.2+ :

    Warning: Use of undefined constant _METASPLUS_MASQUER_AUTEURS - assumed '_METASPLUS_MASQUER_AUTEURS' (this will throw an Error in a future version of PHP)
    • Si la constante n’est pas remplacée par une vraie configuration, il suffirait de remplacer #EVAL par #CONST pour qu’il n’y ait plus de notice.

    Répondre à ce message

Ajouter un commentaire

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

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