Site Web

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.

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.

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

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.

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.

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

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