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 concernant les aperçus de liens dans l'outil Réseaux sociaux

Dernière mise à jour: juillet 28, 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 dans votre post. Découvrez comment résoudre les problèmes liés à l'image en vignette dans vos aperçus sur les réseaux sociaux.

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

  • og:title : titre de votre contenu.
  • og:type : type associé à votre contenu, tel qu'une vidéo ou une page web.
  • og:image : URL de l'image représentant votre contenu.
  • og:URL : URL unique de votre contenu et qui sera utilisée comme ID permanent.
  • og:description : 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 de la page ou la description de page ne s'affiche pas dans l'aperçu de l'article

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

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

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

Si vous partagez une page externe dans votre article, utilisez vos outils de développeur, tels que les outils de développeur de Chrome, pour afficher la source de la page, puis recherchez la balise og:image pour consulter l'image qui s'affichera.

inspect-for-featured-image

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

  • Vérifiez qu'il n'y a qu'une seule occurrence de chaque type de balise méta : s'il existe plusieurs occurrences d'une même balise méta 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 de lien. 
  • Assurez-vous que vos balises méta se trouvent vers le début de votre code HTML : si vos balises méta 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.

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

Si vous voyez une image différente dans l'aperçu des réseaux sociaux que celle qui est définie comme étant la balise og:image, le réseau social doit peut-être à nouveau analyser la page. Vous pouvez utiliser les outils de validation suivants pour déclencher une analyse de page et afficher toutes les erreurs susceptibles d'affecter la publication :

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

Remarque : LinkedIn affichera votre image en vignette, titre de page et 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 la page pour trouver l'image la plus appropriée à inclure dans les posts sur les réseaux sociaux, ce qui est généralement la première image qu'il trouve. Une image d'aperçu de 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 sur les réseaux sociaux (par exemple, l'image est coupée ou le rapport hauteur/largeur est incorrect), vous devrez peut-être modifier l'image jusqu'à atteindre les dimensions appropriées pour le réseau social en question, puis republier. Les dimensions suivantes sont recommandées pour l'optimisation des images en vignette sur chaque réseau :

  • Facebook : 300:175
  • Twitter : 16:9 pour les photos et 1.91:1 pour les images en vignette dans les articles en 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 : 4 Mo (moins de 1 Mo recommandé pour les fichiers PNG pour é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. Les différents systèmes traitent les profils de couleurs de différentes manières, ce qui explique pourquoi les couleurs peuvent être différentes dans l'image et dans votre gestionnaire de fichiers. Vous pouvez exécuter votre URL d'image via un outil externe pour voir si elle utilise un profil de couleur différent. Si nécessaire, vous pouvez supprimer le profil de couleur d'erreur dans un outil de modification de photos comme Photoshop, puis republier la page avant de publier les posts sur les réseaux sociaux.

Différences de clarté d'image

Le gestionnaire de fichiers de HubSpot utilise la compression d'image sur les fichiers JPEG et PNG pour optimiser les vitesses de chargement sur votre contenu hébergé sur HubSpot. Les réseaux sociaux utilisent également la compression d'images pour les posts, qui peut varier en fonction de ce que vous voyez dans HubSpot. Pour cette raison, il est recommandé d'utiliser des images de résolution relativement élevée (dans le rapport d'aspect recommandé) pour chaque réseau. Si votre image ne se conforme pas aux exigences du réseau social, un avertissement apparaîtra dans l'outil de publication sur les réseaux sociaux de HubSpot afin d'ajuster votre image en conséquence.

/fr/social/featured-image-not-displaying-correctly-in-social-preview