Open Graph sur Drupal 8 : Comment faire ?

Open Graph sur Drupal 8 : Comment faire ?

Les métadonnées gagnent en importance chaque jour dans la sphère internet, aujourd'hui, elles deviennent pratiquement indispensables dans une stratégie web réussie. Pour les mettre en place sur un site Drupal 8, lisez la suite !

Depuis juillet, Facebook ne permet plus la configuration manuelle de l’aperçu des liens. Cette décision a été prise en accord avec la politique anti-fake news que mène la célèbre plateforme sociale suite aux nombreux scandales qui ont éclaboussé la firme Californienne.

Cependant, les entreprises pâtissent aussi de cette décision. Le fait que Facebook génère automatiquement l’image, le titre et la description donne lieu a de nombreuses imprécisions non modifiables.

Bref, l’image de l’entreprise souhaitant communiquer perd en crédibilité. Heureusement des solutions existent.

Les métadonnées sur Drupal avec Metatag et Token

Qu’est-ce que c’est ?

Les métadonnées sont les données qui décrivent d'autres données.
Dans le cas d’une page web, elles permettent de donner des indications aux services externes sur la nature de chaque contenu. L’intérêt de la mise en place de ces métadonnées sous forme de balises réside dans le fait qu’elles sont communément adoptées par les plateformes les plus importantes sur le web. Ce qui résulte en un enrichissement du contenu publié et une meilleure maîtrise de la communication digitale des entreprises.

Comment fonctionnent les métadonnées ?

Selon le type de site internet à configurer, le moyen de mettre en place ces métadonnées diffère. Cependant, parmi toutes les balises, nous isolerons les deux principales: des balises « og: » signifiant Open Graph et « twitter: » pour le réseau social du même nom.

Lorsqu’un lien est intégré dans le champ de publication de Facebook. Le réseau social va explorer la page à la recherche d’éléments pour remplir au minimum ces trois champs :

  • Image
  • Titre
  • Description

Concernant Facebook, le réseau social va d’abord aller à la recherche de balises Open Graph à la recherche d’informations déjà prêtes. Dans le cas où ces balises seraient vides, peu qualitatives ou inexistantes, la plateforme va tenter de remplir ces champs seule, notamment en utilisant le titre et la description de la page, à l’origine utilisés pour les moteurs de recherche.

Un site ayant correctement configuré ses balises aura un rendu semblable à celui-ci :

Balises-Open-Graph-Facebook-Drupal.jpg

Lorsqu’on ouvre le code source de la page d’accueil du site de Telsa Motors (Drupal 7), nous pouvons constater la bonne utilisation des metadonnées. Non seulement pour Facebook mais aussi pour Twitter.

Bonne utilisation metadonnées drupal.png


Une remarque peut être formulée pour aller plus loin : la balise Open Graph concernant la description n’a pas été configurée, ce qui déclenche un remplissage automatique de la description avec du contenu trouvé sur la page. Nous pouvons constater que Facebook gère correctement le contenu de la description dans ce cas mais il peut arriver que celle-ci soit vraiment ratée, comme dans l’exemple suivant où le manque de marquage sémantique se traduit par un remplissage très imprécis.

Mettre-en-place-balises-open-graph-Drupal.jpg

Ces exemples pointent de manière évidente l’importance de l’utilisation des métadonnées, au-delà du léger bonus SEO qu’elles attribuent au site, elles permettent de fournir une expérience utilisateur plus confortable et une meilleure communication globale.

Les balises Open Graph principales

  • og:title
  • og:type
  • og:image
  • og:url
  • og:description
  • og:video
  • og:locale
  • og:site_name

Pour trouver l’ensemble des balises Open Graph disponibles, rendez-vous sur le site de l'Open Graph Protocol.

Mettre en place les métadonnées sur Drupal 8 avec les modules Metatag et Token

Heureusement, Drupal n’impose pas de mettre les doigts dans le code pour mettre en place ces tags. Pour les installer, il suffira de télécharger le module Metatag avec sa dépendance Token et de configurer les champs du site à affecter aux types de données.

Mettre en place les métadonnées Open Graph sur Drupal : Cas pratique

Prenons l’exemple d’un site de voyages nommé Les Voyages de Sophie. Ce site web, pour communiquer sur ses offres de voyages, va publier sur les réseaux sociaux. Conscients que le prix et la destination sont les facteurs principaux qui pousseront les clients à découvrir l’offre, les marketeurs travaillant chez Les Voyages de Sophie voudraient à la fois avoir une communication efficace et personnalisée pour les réseaux sociaux.

Sachant que le site internet est un Drupal 8 avec différents types de contenus, l’équipe marketing voudrait seulement personnaliser les métadonnées des voyages pour les réseaux sociaux. Pour cela, elle souhaite afficher une image, un titre ainsi qu’une description personnalisée.

Le site n’ayant pas de métadonnées installées et configurées, les réseaux sociaux affichent le titre de la page, ce qui n’est pas réellement optimal.

L’équipe marketing tente de trouver le juste milieu entre une communication attractive et une optimisation SEO du title. Cependant, en travaillant le titre à moitié pour le référencement et à moitié pour les réseaux sociaux, il finit par n’être optimisé pour ni l’un, ni l’autre.

Le titre à afficher :

En prenant l’exemple de la page produit d’un voyage à Sydney, le titre de la page est :

« Une vue imprenable à Sydney »

Point de vue communication :

Objectivement, un effort a été fait pour que le titre soit attractif. Au sein du site internet, celui-ci s’intégrera assez bien dans l’interface. Le prix n’est pas mentionné dans le titre car celui-ci peut varier dans le temps, le changement de prix devra se faire non seulement dans la fiche produit et dans le titre, ce qui augmente le temps passé sur chaque fiche produit ainsi que le risque de commettre des erreurs.

Point de vue SEO :

Le titre n’est pas optimisé pour les requêtes en rapport avec les voyages à Sydney. En effet, le titre étant travaillé pour être attractif d’un point de vue commercial, les chances de se positionner sur une requête en rapport avec un « Voyage pas cher à Sydney » sont infimes. Le choix a été de privilégier l’attractivité de l’accroche par rapport à une bonne optimisation SEO.

La description à afficher :

En reprenant le même exemple de la page produit du voyage à Sydney, la description est le début du corps de texte. Dans ce cas pratique, la balise meta description n’a pas été mise en place, ce qui explique que le texte soit celui du corps de la page.

Dans des cas réels, les descriptions sont remplies. Dans le meilleur des cas, ces descriptions sont optimisées pour y intégrer les mots clés afin qu’ils attirent l’œil sur les moteurs de recherche. Lorsque les métadonnées Open Graph ne sont pas installées, les réseaux sociaux affichent la description, à la base destinée aux moteurs de recherche.

Dans la mesure où la description destinée aux réseaux sociaux a un objectif commercial plus important que celle des moteurs de recherche, il est important de travailler son contenu pour déclencher l’envie. La meilleure solution est d’afficher le résumé de la page produit dans la description pour les réseaux sociaux car celui-ci a également pour but de déclencher l’envie au sein même du site internet.

Résultat actuel :

Les données Open Graph n’étant pas mises en place, Facebook utilise la balise title pour remplir le champ de titre. Le rendu est correct, cependant il est possible d’aller beaucoup plus loin dans la démarche.

Actuellement, lorsque les marketeurs travaillant chez « Les Voyages de Sophie » communiquent sur un voyage à Sydney, le rendu est celui-ci :

Améliorer-engagement-réseaux-sociaux-open-graph.jpg

Est-ce que cela donne une idée précise du contenu ? Est-ce que cette publication donne envie de cliquer ? Pouvez-vous dire si la page traite d’un voyage à Sydney, d’un billet de blog sur Sydney ou même d’un hôtel à Sydney ?

Pouvons-nous aller plus loin ? Certainement !

Nous allons chercher à obtenir un rendu plus attractif sans changer le contenu de la page du site, seulement en utilisant les métadonnées Open Graph

L’objectif final est d’obtenir un rendu similaire à la publication suivante sans modifier le contenu du site :

Comment-configurer-balises-Open-Graph-sur-Drupal.jpg

Remarque : Nous pouvons voir que le titre est différent. Il est construit sous la forme [titre de la page] pour [prix du produit]€. Ceci constitue un exemple simpliste de ce qui est possible de faire en couplant les métadonnées Open Graph et Drupal.

Buts de ce cas pratique :

  • Configurer les balises Open Graph et Twitter Cards
  • Mettre en place un titre
  • Définir la description de la balise Open Graph avec le résumé de l’article
  • Mettre en place une image personnalisée seulement pour un type de contenu
  • Utiliser les tokens sur Drupal pour aller plus loin dans la personnalisation des balises

Mise en place d’une instance de Drupal 8 :

Metatag-Token-pour-metadonnees-Open-Graph.jpg

Cette instance de Drupal 8 sera installée avec les modules Metatag ainsi que Token.

Dès l’installation, nous allons nous rendre dans la partie « modules » pour les activer (/admin/modules). Une fois dans la partie dédiée au paramétrage des modules, nous allons nous rendre dans la section SEO et cocher :

  • Metatag
  • Metatag : Facebook (optionnel, intéressant si vous souhaitez aller plus loin que ce dont il est question dans l’article)
  • Metatag : Open Graph
  • Metatag : Twitter Cards

Ensuite, nous allons rechercher le module Token et le cocher.

Enfin, nous allons enregistrer les modifications pour activer les modules.

Personnaliser-aperçu-lien-réseaux-sociaux-facebook-twitter.jpgToken Drupal 8 configuration metadonnees.png

Metatag est maintenant bien activé. Pour commencer à l’utiliser, il suffit de se rendre dans la partie Configuration (/admin/config) et cliquer sur Metatag

Balises-Open-Graph-avec-Metatag.jpg

Une fois arrivés dans le menu de configuration, nous allons créer un nouveau type de Metatag qui sera attribué seulement aux pages de type « product ».

Ajouter-metadonnees-Drupal-8.jpg

Puis, cliquez sur la liste déroulante pour choisir le type de contenu qui sera bénéficiaire de la configuration des Metatags qui vont suivre.

Donnees enrichies produits Drupal.png

Nous pouvons trouver cette donnée ici :

Configurer Open Graph type de contenu Drupal.png

Nous verrons un nouveau type de contenu qui apparaîtra dans la liste : « CONTENU : PRODUCT ». Pour configurer les métadonnées Open Graph, nous allons cliquer sur « Modifier ».

Tutoriel Open Graph sur Drupal.png

Nous allons personnaliser les metadonnées Open Graph des produits. Prêts ? Cliquez !

Tuto metadonnées Drupal 8.png

Une fois le menu déroulé, nous allons nous concentrer sur les points dédiés aux données Open Graph:

Nom du site : Les Voyages de Sophie

Sera affiché ainsi : <meta property="og:site_name" content="Les voyages de Sophie" />

Type de contenu : product

Sera affiché ainsi : <meta property="og:type" content="product" />

Page URL : Laisser vide

Titre : [current-page:title] pour [node:field_price]€

[current-page:title] permet de récupérer et d’afficher le titre de chaque page. Ici celui-ci correspond à « Une vue imprenable à Sydney »

[node:field_price]€ permet de récupérer la valeur du champ « Prix » de la page et de l’afficher, suite à cet affichage, nous y afficherons le signe « € ». Ici celui-ci correspond à « 1200€ »

Sera affiché ainsi : <meta property="og:title" content="Une vue imprenable à Sydney pour 1200€" />

Description : [date:short] – [node:summary]

Sera affichée ainsi : <meta property="og:description" content="03/01/2018 - 09:35 - Ceci est le résumé de la page concernant la destination de voyage qui est : SYDNEY. Cette description est différente de la description destinée aux moteurs de recherche et a pour but d'attiser la curiosité des lecteurs." />

Comme mentionné plus tôt, la notion de temporalité est importante dans le cas de ce site internet dans la mesure où les offres du site ont une durée de vie limitée. La présence de la date avant la description de l’offre permet d’appuyer sur cette notion de temporalité. Ensuite, comme prévu, nous avons défini la description en utilisant le résumé de la page au lieu de la balise meta description.

Jusqu’ici, nous en sommes à ce niveau:

Concaténation titre Drupal.png

Il nous reste maintenant à configurer une image personnalisée pour les pages de type « Product »

Pour cela, nous allons récupérer une image représentant le type de produit.

Image : ###.com/sites/default/files/inline-images/voyages.jpg

Cette image a été mise en ligne sur le serveur dans lequel le site internet était hébergé dans le but d’obtenir une URL propre. En effet, le but est de ne pas faire de HotLinking afin de garder le contrôle total sur la disponibilité de l’image.

Pour mettre en place l’image, le champ Image doit être rempli avec l’URL de celle-ci.

Dans le cadre de ce cas pratique, nous allons définir une seule et unique image pour l’ensemble des pages de type « product ».

Dans des exemples concrets, trois options peuvent être envisagées :

  • Créer un type de page pour chaque catégorie de produit et définir une image unique correspondant à la catégorie de chaque produit. Exemple : Image de l’opéra de Sydney pour toutes les pages ayant pour type de contenu « Product Australia ».
  • Décider d’afficher l’image principale de la page en plaçant : [node:field_image:entity:url] à la place de l’URL de l’image choisie.
  • Créer un champ image personnalisé dans le type de page « Product » et faire référence à ce champ avec un token créé pour l’occasion. Cette option donnera plus de flexibilité à l’éditeur du site pour choisir des images personnalisées pour chaque page, directement depuis l’éditeur de contenu.

Type d'image : JPG/JPEG

Ici, nous allons indiquer le format de l’image, il est possible de le trouver en regardant l’extension de l’image située à la fin de l’URL : « /sites/default/files/inline-images/voyages.jpg »

Largeur de l'image :

La largeur en pixels de l’image.

Hauteur de l'image :

La hauteur en pixels de l’image.

Content modification date & time : [date:short]

L’utilisation du token [date:short] permet de répertorier la date de dernière modification du contenu au format Jour/Mois/Année – Heure:Minute.

Une fois ces informations entrées, enregistrez les modifications et vérifiez dans le code des pages que les informations sont bien présentes. Il est aussi possible d’utiliser l’outil de debug de Facebook qui permettra de vérifier les balises Open Graph et permettra de rafraîchir le cache de Facebook concernant l’URL testée (dans le cas où des modifications auraient eu lieu).

Pour aller plus loin dans l’utilisation des tokens, rendez-vous sur la page d’aide de Token disponible ici : ###.com/admin/help/token

Les données Open Graph sont maintenant mises en place, maintenant tous les éléments sont bien fonctionnels :

Personnalisation-Open-Graph-Facebook.jpg

La plupart des réseaux sociaux prennent en compte les données Open Graph, cependant, dans la mesure où ce cas pratique traite de la vente d’un produit, nous irons plus loin dans la démarche, notamment sur Twitter.

Les métadonnées sur Twitter

En effet, l’entreprise « Les Voyages de Sophie » vend des voyages aux particuliers. Les chances d’avoir une communauté à la fois sur Facebook et Twitter est assez élevée, ce qui impose de travailler les métadonnées pour ce réseau social également.

En tant que produit, nous pouvons aller plus loin que la simple personnalisation des informations de liens. En effet, Twitter, à travers son propre système de taguage sémantique permet de spécifier d’avantages de types de contenus ainsi que les diverses informations liées.

Le but est d’obtenir un rendu similaire à celui-ci :

Metadonnées-Twitter-Drupal-8.jpg

Pour cela, nous allons nous rendre dans la section « Twitter Cards » située sous la section Open Graph.

Le type de contenu à propos duquel nous voulons communiquer est un produit, nous allons donc choisir l’option « Summary Card with Large Image »

Twitter-Cards-Open-Graph-Drupal.jpg

Les champs à remplir pour mettre en place les Twitter Cards sont les suivant :

Le compte Twitter du site

Exemple : @lesvoyagesdesophie

Le titre de la page pour la Twitter Card:

Exemple : [node:title] pour [node:field_price]€

Comme pour les balises Open Graph, nous utiliserons le nom de la page ainsi que le tarif entré dans le champ prix.

Description :

Ici, la taille de la description autorisée par Twitter est beaucoup plus courte que cette de Facebook. Nous allons tout de même la mettre en place en y intégrant le contenu du résumé. Dans un cas idéal, nous aurions un champ à remplir dans la page de rédaction du contenu dédié à la description Twitter.

Exemple : [node:summary]

Image :

Comme cité plus haut pour les métadonnées Open Graph, nous utilisons une seule et unique image pour représenter l’ensemble des pages. Dans un cas réel, il faudrait au moins personnaliser les images selon la catégorie de chaque produit, ou alors, dans le meilleur des cas, une image personnalisée pour chaque produit en utilisant [node:field_image:entity:url].

Pour ce cas pratique, nous allons nous restreindre à l’emploi d’une image définie.

Exemple : ###.com/uploads/2014/10/voyages-iles1.jpg

Enfin, envoyez une requête à Twitter pour faire examiner et valider l’utilisation des metatags pour votre contenu, il suffit d’en faire la demande avec cet outil : https://cards-dev.twitter.com/validator

Plus d’informations sur les conditions d’acceptation de la part de Twitter, rendez-vous sur la page dédiée à ce sujet.

Résultat initial :

Personnaliser-aperçu-lien-facebook-drupal.jpg

Résultat final :

Open-Graph-pour-Facebook-sur-Drupal-8.jpg

Open-Graph-Twitter-Drupal-8.jpg

Toutes nos félicitations, vous venez de paramétrer correctement les métadonnées pour votre site internet Drupal, votre communication digitale est maintenant simplifiée et personnalisée pour les réseaux sociaux.

Vous avez un projet en tête ? Contactez-nous maintenant pour en discuter !

Douichen Sofiane - Chef de projet E-marketing
Un projet web à réaliser ? Contactez nous maintenant !

Partager sur :