Avertissement : cet article est le résultat de la traduction automatique, l'exactitude et la fidélité de la traduction ne sont donc pas garanties. Pour consulter la version originale de cet article, en anglais, cliquez ici.
Social

Résoudre les problèmes d'aperçu de liens dans l'outil Réseaux sociaux

Dernière mise à jour: novembre 18, 2020

Disponible avec :

Hub Marketing Professional, Enterprise
Ancienne version Hub Marketing Basique

Avant de publier un post sur les réseaux sociaux, vous pouvez prévisualiser l'image en vignette de votre post. Découvrez comment résoudre les problèmes d'aperçu de celle-ci.

L'aperçu sur les réseaux sociaux s'appuie sur les méta-balises dans la section <head> de votre page HTML. Ces balises font partie du protocole Open Graph, qui permet à une page web de devenir un objet enrichi sur un réseau social. Elles indiquent aux sites de médias sociaux comme Facebook, LinkedIn et Twitter sur quoi se concentrer pour créer un aperçu du lien partagé. Les méta-balises basiques sont les suivantes :

  • og:title : le titre de votre contenu.
  • og:type : le type de contenu, tel qu'une vidéo ou une page web.
  • og:image : l'URL de l'image représentant votre contenu.
  • og:URL : l'URL unique de votre contenu qui sera utilisée comme ID permanent.
  • og:description : la description qui résume votre image.

Le titre, la méta-description et l'image en vignette sont automatiquement définis pour les articles de blog. Pour les pages de destination et les pages de site web, l'image en vignette doit être définie manuellement.

 

L'image en vignette, le titre ou la description de la page ne s'affiche pas dans l'aperçu du post

Si l'aperçu de votre post sur les réseaux sociaux n'affiche pas l'image en vignette, le titre ou la description de la page que vous pensiez voir, vous pouvez utiliser plusieurs outils de débogage pour résoudre le problème.

Vérifiez que vous avez défini une image en vignette et que vos méta-balises sont identifiables

Si vous ajoutez un lien vers un article de blog, une page de destination ou une page web hébergée sur HubSpot, assurez-vous que vous avez sélectionné une image en vignette.

Si vous partagez une page externe à HubSpot dans votre post, utilisez les outils de développement de votre navigateur, tels que ceux de Chrome, pour afficher la source de la page, puis recherchez la balise og:image afin de voir l'image qui s'affichera.

inspect-for-featured-image

Si la balise og:image est bien présente et l'URL de l'image en vignette est correcte, mais que vous ne voyez toujours pas d'aperçu du lien dans votre post, vous pouvez également vérifier les éléments suivants.

  • Vérifiez qu'il n'y a qu'une seule occurrence de chaque type de méta-balise : s'il existe plusieurs occurrences d'une même méta-balise sur votre page, il est possible que certains réseaux sociaux ne choisissent pas la bonne lorsqu'ils essaient de générer un aperçu du lien. 
  • Vérifiez que vos méta-balises se trouvent au début de votre code HTML : si vos méta-balises sont précédées de code supplémentaire ou d'autres balises, il est possible que les robots d'exploration de certains réseaux sociaux ne parviennent pas à les localiser.

Utilisez les outils de débogage des réseaux sociaux pour valider votre image et vos méta-balises

Si l'image présentée dans l'aperçu du post est différente de celle qui est définie dans la balise og:image, le réseau social doit peut-être à nouveau analyser la page. Vous pouvez utiliser les outils de validation suivants pour lancer une analyse de page et afficher toutes les erreurs susceptibles d'affecter la publication.

  • Facebook : l'outil Facebook Sharing Debugger permet d'afficher des avertissements ou erreurs liés à vos méta-balises ou d'extraire à nouveau l'URL de contenu afin de générer l'aperçu de lien Facebook le plus récent.
  • Twitter : l'outil Twitter Card Validator permet d'afficher des avertissements ou erreurs liés à vos méta-balises ou d'extraire à nouveau l'URL de contenu afin de générer l'aperçu de carte Twitter le plus récent.
  • LinkedIn : l'outil LinkedIn Card Inspector permet d'afficher des avertissements ou erreurs liés à vos méta-balises ou d'extraire à nouveau l'URL de contenu afin de générer l'aperçu de carte LinkedIn le plus récent.

Remarque : LinkedIn affichera l'image en vignette, le titre de page et l'URL dans l'aperçu, mais n'inclura pas la méta-description.

Si la balise og:image n'a pas été définie pour une page, le réseau social scannera celle-ci pour trouver l'image la plus appropriée à inclure dans le post. Il s'agit généralement de la première image qu'il trouve. Une image d'aperçu du lien peut ne pas s'afficher si un fichier robots.txt ou certains logiciels de sécurité sont utilisés pour empêcher l'analyse de pages.

 

Exigences de taille pour les images en vignette

Si l'image en vignette d'un lien que vous avez inséré ne s'affiche pas correctement dans l'aperçu du post (par exemple, l'image est coupée ou le rapport hauteur/largeur est incorrect), vous devrez peut-être modifier l'image afin que ses dimensions correspondent aux dimensions appropriées pour chaque réseau social, puis republier le contenu. Si vous publiez vos posts sur Facebook, consultez les conditions requises de la plateforme pour les images en vignette.

Les dimensions suivantes sont recommandées pour l'optimisation des images en vignette sur chaque réseau :

  • Facebook : 1.91:1
  • Twitter : 16:9 pour les tweets comprenant une photo et 1.91:1 pour les images en vignette de tweets avec un lien
  • Instagram (carré) : 1:1
  • Instagram (portrait) : 4:5
  • Instagram (paysage) : 1.91:1
  • LinkedIn (paysage) : 1.91:1

Assurez-vous que tout média que vous incluez dans vos posts sur les réseaux sociaux respecte les directives relatives à la taille de chaque réseau. Si HubSpot détermine qu'un fichier est trop volumineux pour être publié sur un réseau précis, un avertissement s'affichera. Les tailles de fichiers maximales pour chaque réseau social sont listées ci-dessous :

  • Facebook : 8 Mo (moins de 1 Mo recommandé pour les fichiers PNG afin d'éviter la pixellisation)
  • Instagram : 8 Mo
  • Twitter : 5 Mo (15 Mo pour les GIF)
  • LinkedIn : 10 Mo

Différences de couleur et de clarté d'image

Différences de couleur d'image

Les profils de couleurs intégrés peuvent affecter la façon dont votre image en vignette s'affiche dans votre post. Chaque système traite les profils de couleurs de différentes manières, ce qui explique pourquoi les couleurs peuvent être différentes dans l'aperçu de l'image et dans votre gestionnaire de fichiers. Vous pouvez tester l'URL de l'image dans un outil externe pour voir si elle utilise un profil de couleurs peu fréquent. Au besoin, vous pouvez supprimer le profil de couleurs en question dans un outil de retouche de photos comme Photoshop, puis republier la page avant de publier le post sur les réseaux sociaux.

Différences de clarté d'image

Le gestionnaire de fichiers de HubSpot compresse les images au format JPEG et PNG pour optimiser la vitesse de chargement de votre contenu hébergé sur HubSpot. Les réseaux sociaux utilisent également la compression d'images pour les posts, dont la qualité peut donc varier par rapport à ce que vous voyez dans HubSpot. Pour cette raison, il est recommandé d'utiliser des images de haute résolution (tout en respectant le rapport hauteur/largeur correspondant) pour chaque réseau. Si votre image ne respecte pas les exigences d'un réseau social, un avertissement apparaîtra dans l'outil HubSpot de publication sur les réseaux sociaux afin d'ajuster votre image.