Dernière mise à jour: décembre 5, 2023
Disponible avec le ou les abonnements suivants, sauf mention contraire :
Marketing Hub Pro, Entreprise
|
| Ancienne version Marketing Hub Basique |
Lorsque vous ajoutez des liens à des posts sur les réseaux sociaux dans HubSpot, un aperçu qui comprend une image en vignette, un titre de page et une description de page s'affichera.
Les aperçus sociaux sont basés sur les balises méta dans la section <head> de votre page HTML. Ces balises indiquent aux plateformes de réseaux sociaux sur quoi se concentrer lors de la création d'un aperçu de votre lien partagé. Les principales balises méta sont les suivantes :
- og:title : le titre de votre contenu.
- og:type : le type de contenu, comme 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 servira d'identifiant 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 d'atterrissage et les pages de site web, alors que le titre et la méta description sont également définis automatiquement, l'image vedette doit être définie manuellement.
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.
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 correctement l'image en vignette, le titre de la page ou la description de la page, vous pouvez résoudre le problème dans HubSpot ou utiliser des outils de débogage externes.
Résolution des problèmes dans HubSpot
Si vous créez un lien vers un article de blog, une page de destination ou une page de site Web hébergée par HubSpot, assurez-vous qu'une image vedette est définie dans les paramètres de la page ou de l'article .
Vous pouvez également définir manuellement une balise og:image pour ajouter une image vedette :
-
Dans votre compte HubSpot, naviguez vers vos pages de destination ou vos pages de site web.
- Passez le curseur de la souris sur une page et cliquez sur Modifier.
- Dans l'éditeur de contenu, cliquez sur l'onglet Paramètres, puis sur Options avancées.
- Dans la section Additional code snippets , entrez ce code snippet dans le champ Head HTML :
<meta property="og:image" content="IMG URL">
- Remplacez IMG URL par URL de votre fichier image.
- Pour optimiser davantage une image pour Twitter, entrez ce bloc de code dans le champ Head HTML :
<meta name="twitter:card" content="summary_large_image">
- Dans l'angle supérieur droit, cliquez sur Publier ou Mettre à jour pour publier les modifications.
Utiliser les outils de développement web d'un navigateur pour résoudre les problèmes
Si vous partagez une page externe dans votre message social, vous pouvez utiliser les outils de développement des navigateurs tels que Chrome Developer tools pour vous assurer que les balises méta de la page sont correctement configurées. Consultez la source de la page, puis vérifiez et confirmez les éléments suivants :
- Les balises
og:imageet les autres balises méta sont correctement affichées. - Les détails de chaque balise sont corrects. Par exemple, vérifiez que l'URL de l'image vedette pour la balise
og:imageest correcte. - Il existe une seule occurrence de chaque type de balise méta. S'il existe plusieurs occurrences de la même balise méta, les réseaux sociaux ne peuvent pas sélectionner la bonne lors de la génération d'un aperçu du lien.
- Vos balises méta se trouvent vers le début du code HTML. Si elles sont précédées de code supplémentaire ou d'autres balises, il est possible que les robots d'indexation de certains réseaux sociaux ne parviennent pas à les localiser.
Utiliser les outils de débogage des réseaux sociaux pour résoudre les problèmes
Si vous constatez une différence entre l'aperçu de votre post et les balises méta, le réseau social doit peut-être indexer la page à nouveau. Utilisez les outils de validation suivants pour chaque réseau social afin de détecter d'éventuelles erreurs ou de lancer une nouvelle indexation de la page :
- Facebook Sharing Debugger : Facebook effectue automatiquement une nouvelle indexation du contenu toutes les 24 heures. Pour déclencher manuellement une nouvelle indexation, cliquez sur Scrape Again dans l'outil Sharing Debugger.
- Twitter Card Validator: Twitter met en cache le contenu pendant 7 jours après la publication d'un message. Cliquez sur Preview card dans l'outil Card Validator pour lancer une nouvelle indexation de votre contenu.
- LinkedIn Post Inspector : Suite à la publication d'un post, LinkedIn met en cache le contenu pendant 7 jours. Cliquez sur Inspect dans l'outil Post Inspector pour lancer une nouvelle indexation de votre contenu.
En règle générale, tous les posts publiés avant la nouvelle indexation de la page conserveront toujours l'image incorrecte. Si la balise og:image n'a pas été définie pour une page, le réseau social analysera la page pour trouver l'image la plus appropriée à inclure dans les messages sociaux, qui est généralement la première image trouvée. Une image d'aperçu du lien peut ne pas s'afficher si un fichier robots.txt ou un logiciel de sécurité est utilisé pour empêcher l'indexation des pages.
Problèmes d'affichage de l'image en vignette
Si l'aperçu de votre post sur les réseaux sociaux affiche l'image en vignette prévue, mais que l'affichage de cette image est incorrect, vous pouvez vérifier les éléments suivants.
La taille ou les dimensions de l'image sont incorrectes
Si l'image en vignette 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 la page.
Les dimensions suivantes sont recommandées pour l'optimisation des images en vignette sur chaque réseau social :
- Facebook : 1.91:1
- Twitter : 16:9 pour les posts photo et 1.91:1 pour les images en vedette dans les posts avec 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 inclus dans vos posts sur les réseaux sociaux respecte les directives relatives à la taille pour 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 lors de la création du post sur les réseaux sociaux. Voici les tailles de fichiers maximales pour chaque réseau social :
- 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 d'image
Les profils de couleurs intégrés peuvent affecter la façon dont votre image en vignette s'affiche dans votre post sur les réseaux sociaux. Chaque système traite les profils de couleurs différemment, ce qui explique pourquoi les couleurs peuvent apparaître différemment 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 externe de retouche de photos comme Photoshop, puis republier la page avant de publier votre post sur les réseaux sociaux.
Différences de clarté d'image
Le gestionnaire de fichiers de HubSpot utilise la compression d'image sur les JPEG et les PNG pour aider à optimiser les vitesses de chargement de votre contenu hébergé par HubSpot. Les réseaux sociaux utilisent également la compression d'images pour les posts, dont la qualité peut varier par rapport à ce que vous voyez dans HubSpot.
Pour cette raison, il est recommandé d'utiliser des images haute résolution 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 l'image.
