Demande #3872
ferméMettre en place metadonnées html pour image miniature pour réseaux sociaux
Ajouté par Frédéric Couchet il y a environ 5 ans. Mis à jour il y a environ 23 heures.
0%
Description
Pour améliorer la manière d'afficher dont nos pages web sont affichés sur les réseaux sociaux, une possibilité est d'utiliser des metadonnées html pour indiquer notamment l'image que le réseau social doit utiliser comme illustration. Il y a notamment les Twitter Cards pour Twitter et Open Graph pour Facebook, Linkedin et autres réseaux.
Ce serait bien de mettre cela en place dans notre site web.
Mis à jour par Frédéric Couchet il y a environ 5 ans
Pour le site web, il y a visiblement des modules (Nodewords, Open Graph Data) mais je préfère éviter d'installer un module de plus, sans connaître exactement l'impact possible de son fonctionnement.
Mis à jour par Frédéric Couchet il y a environ 5 ans
Une solution est d'utiliser la fonction drupal_set_html_head qui permet d'ajouter des metadonnées dans la partie head de la page html.
Editer la page web.
Dans « Format d'entrée » choisir « PHP code »
Ajouter par exemple :
<?php
/* Twitter */
drupal_set_html_head('<meta name="twitter:card" content="summary_large_image"/>');
drupal_set_html_head('<meta name="twitter:site" content="@aprilorg"/>');
drupal_set_html_head('<meta name="twitter:creator" content="@aprilorg"/>');
drupal_set_html_head('<meta name="twitter:image" content="https://april.org/files/libre-a-vous/test.jpg"/>');
drupal_set_html_head('<meta name="twitter:title" content="« Libre à vous ! » diffusée mardi 10 septembre 2019 sur radio Cause Commune - Apprentissage de la programmation - In code we trust - Jouons collectif"/>');
drupal_set_html_head('<meta name="twitter:description" content="Podcast et références pour « Libre à vous ! » du 10 septembre 2019"/>');
/* Autres */
drupal_set_html_head('<meta property="og:image" content="https://photos.april.org/_data/i/upload/2019/09/10/20190910224417-8f1bb76c-me.jpg"/>');
drupal_set_html_head('<meta property="og:title" content="« Libre à vous ! » diffusée mardi 10 septembre 2019 sur radio Cause Commune - Apprentissage de la programmation - In code we trust - Jouons collectif"/>');
drupal_set_html_head('<meta property="og:type" content="article"/>');
drupal_set_html_head('<meta property="og:url" content="https://april.org/libre-a-vous-diffusee-mardi-10-septembre-2019-sur-radio-cause-commune"/>');
drupal_set_html_head('<meta property="og:description" content="Podcast et références pour « Libre à vous ! » du 10 septembre 2019"/>');
?>
Toutes les lignes ne sont sans doute pas utiles.
Une fois la page sauvegardée, afficher le source pour vérifier qu'il n'y a pas d'erreurs ou utiliser le validateur W3C https://validator.w3.org
Pour vérifier comment cela sera affiché sur twitter on peut utiliser la page https://cards-dev.twitter.com/validator
Il faut ajouter ces lignes de PHP (et les adapter en fonction du contexte) dans chaque page pour laquelle on souhaite avoir une image pour les réseaux sociaux.
Mis à jour par Frédéric Couchet il y a environ 5 ans
Un exemple :
- la page https://april.org/la-fete-des-possibles-c-est-bientot-en-france-et-en-belgique-du-14-au-29-septembre-2019 avec les metadonnées twitter cards et open graph
- le résultat sur twitter https://twitter.com/aprilorg/status/1172137438363475970
Un autre exemple :
- la page https://april.org/libre-a-vous-diffusee-mardi-10-septembre-2019-sur-radio-cause-commune
- le résultat sur linkedin https://www.linkedin.com/posts/fcouchet_libre-%C3%A0-vous-diffus%C3%A9e-mardi-10-septembre-activity-6577545377824690177-k-dw
Mis à jour par Frédéric Couchet il y a environ 5 ans
J'ai simplifié la procédure en créant une fonction add_metadata_social_networks() (dans le fichier node.module du Drupal).
Editer la page web.
Dans « Format d'entrée » choisir « PHP code »
Point important (pour éviter d'avoir la page complète affichée sur https://april.org/actualites) il faut que la page créée ait dans la partie Description un bloc résumé et un bloc avec la suite du texte de la page. Pour cela, mettre le début du texte de la page (la partie peut aussi contenir du image). Puis cliquer sur « Créér un résumé à partir du curseur ».
Pour ajouter une image (qui doit bien sûr déjà être accessible publiquement) pour les réseaux sociaux il faut mettre dans le premier ou le second bloc (peu importe) de la partie Description :
<?php
add_metadata_social_networks("URL_DE_L_IMAGE","DESCRIPTION_DE_L_IMAGE");
?>
Exemple :
<?php
add_metadata_social_networks("https://www.april.org/files/image-fete-des-possibles-2019.png","Bannière de la Fête des Possibles");
?>
Puis continuer avec le texte de la page.
Les autres champs (titre, url de la page...) sont automatiquement ajoutés par la fonction.
Une fois la page sauvegardée, afficher le source pour vérifier qu'il n'y a pas d'erreurs ou utiliser le validateur W3C https://validator.w3.org
Pour vérifier comment cela sera affiché sur twitter on peut utiliser la page https://cards-dev.twitter.com/validator
Il faut ajouter ces lignes de PHP (et les adapter en fonction du contexte) dans chaque page pour laquelle on souhaite avoir une image pour les réseaux sociaux.
Mis à jour par Isabella Vanni il y a plus de 3 ans
Frédéric Couchet a écrit :
Une fois la page sauvegardée, afficher le source pour vérifier qu'il n'y a pas d'erreurs ou utiliser le validateur W3C https://validator.w3.org
W3C ne semble pas aimer le
<?
Le message d'erreur suivant s'affiche :
Error: Saw <?. Probable cause: Attempt to use an XML processing instruction in HTML. (XML processing instructions are not supported in HTML.)
Mis à jour par Frédéric Couchet il y a plus de 2 ans
- Statut changé de Fermé à En cours de traitement
Il manque le champ de description de l'image, pour des questions d'accessiblité : https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
twitter:image:alt
A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters.
Used with summary, summary_large_image, player cards
et og:image:alt
Mis à jour par Frédéric Couchet il y a plus de 2 ans
Le champ twitter:image:alt est déjà présent.
J'ai ajouté le champ og:image:alt voir dans /usr/share/drupal6/modules/node/node.module
Mis à jour par Frédéric Couchet il y a plus de 2 ans
- Statut changé de En cours de traitement à Fermé
Mis à jour par Isabella Vanni il y a un jour
- Statut changé de Fermé à Nouveau
J'ai ajouté :
<?php
add_metadata_social_networks("https://www.april.org/sites/default/files/CDL2024-Banniere-Post.RS_.png","Bannière du Campus du Libre");
?>
Mais l'image ne s'est pas affichée en postant cette URL sur Mastodon.
J'ai donc ajouté l'image à la main :
Mis à jour par Frédéric Couchet il y a environ 23 heures
- Statut changé de Nouveau à Fermé
Mastodon n'affiche pas forcément tout de suite l'image. J'ai déjà remarqué ça.
En tout cas, l'info nécessaire pour afficher l'image est bien présente. En affichant le code source de la page web il y a bien la property "og:image".
<meta property="og:image" content="https://www.april.org/sites/default/files/CDL2024-Banniere-Post.RS_.png"/>