Project

General

Profile

Demande #3872

Mettre en place metadonnées html pour image miniature pour réseaux sociaux

Added by Frédéric Couchet 11 days ago. Updated 10 days ago.

Status:
Nouveau
Priority:
Normale
Category:
-
Target version:
-
Start date:
09/12/2019
Due date:
% Done:

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.

History

#1 Updated by Frédéric Couchet 11 days ago

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.

#2 Updated by Frédéric Couchet 11 days ago

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.

#4 Updated by Frédéric Couchet 10 days ago

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 »

Pour ajouter une image (qui doit bien sûr déjà être accessible publiquement) pour les réseaux sociaux il suffit désormais de mettre :

<?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");

?>

Voir https://www.april.org/la-fete-des-possibles-c-est-bientot-en-france-et-en-belgique-du-14-au-29-septembre-2019

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.

Also available in: Atom PDF