Solutions
Développement Web
Marketing
Maintenance
Hébergement
Vous partagez le lien de votre site et... rien. Pas d'image, pas de titre. Ne blâmez pas LinkedIn. Le problème se cache dans votre code, mais il est facile à corriger.
Au lieu d'une belle image engageante, d'un titre accrocheur et d'une description, seul un lien brut apparaît. Non seulement cela manque cruellement de professionnalisme, mais cela anéantit vos chances d'obtenir des clics. Ce problème, extrêmement frustrant, n'est pas un bug de LinkedIn ou de Facebook. Le coupable est invisible et se cache directement dans le code de votre site web : il vous manque les balises Open Graph (OG).
Qu'est-ce que le protocole Open Graph ?
Créé à l'origine par Facebook (Meta), l'Open Graph est un protocole qui permet à n'importe quelle page web de devenir un "objet riche" (a rich object) dans un graphe social.
En termes plus simples, ce sont quelques lignes de code dans le <head> de votre site qui disent aux réseaux sociaux (LinkedIn, Facebook, X, etc.) quelles informations afficher lorsqu'un lien est partagé.
Ces balises contrôlent :
- L'image d'aperçu (og:image)
- Le titre (og:title)
- La description (og:description)
Sans ces instructions, la plateforme (comme LinkedIn) tente de "deviner" ce qu'il faut montrer. Souvent, elle ne trouve rien et affiche simplement l'URL brute, comme dans notre vidéo. Contrôler ces balises est donc essentiel pour votre marketing et votre image de marque.
L'impact visuel : Avant vs Après
Le meilleur moyen de comprendre est de le voir en action. Un lien sans balises Open Graph est ignoré. Un lien avec des balises Open Graph attire l'œil, donne confiance et incite à l'action.
Notre vidéo ci-dessous illustre parfaitement ce problème et sa solution en moins d'une minute.
Comment corriger le problème sur votre site ?
La bonne nouvelle est que la correction est souvent simple. La méthode dépend de la technologie sur laquelle votre site est construit.
Étape 1 : Diagnostiquer le problème
Avant de modifier quoi que ce soit, confirmez le problème à l'aide des outils officiels :
- Pour LinkedIn : Utilisez le Post Inspector.
- Pour Facebook/Instagram : Utilisez le Sharing Debugger.
Copiez-y l'URL de votre page. Ces outils vous montreront l'aperçu tel qu'ils le "voient" et listeront les balises manquantes ou erronées (par exemple, "og:image is not set").
Étape 2 : Ajouter les balises (la solution)
Ici, la route se sépare en deux, selon que vous utilisez un CMS ou un site codé sur mesure. C'est d'ailleurs un facteur clé lorsque l'on se demande quelle technologie web choisir pour son projet.
Solution A : Pour les sites WordPress
Si votre site tourne sur WordPress, vous n'avez pas besoin de toucher au code. Le problème se règle grâce à un plugin SEO.
- Installez un plugin comme Yoast SEO ou Rank Math.
- Allez sur la page ou l'article qui pose problème.
- Dans les réglages du plugin (souvent en bas de l'éditeur), trouvez l'onglet Social ou Facebook.
- Ici, vous pouvez définir manuellement : Le Titre Open Graph, La Description Open Graph et, surtout, L'Image Open Graph.
Si vous ne remplissez rien, la plupart des plugins SEO utiliseront votre titre et méta-description SEO par défaut. C'est bien, mais définir une image spécifique pour le partage social est toujours mieux.
Solution B : Pour les sites en code personnalisé (Symfony, Laravel, PHP, Python, etc.)
Si votre site est développé sur mesure (par exemple avec Symfony), vous devez ajouter les balises directement dans le template de votre page, à l'intérieur de la balise <head>.
Les quatre balises essentielles à ajouter sont :
<head>
<meta property="og:title" content="Le Titre Accrocheur de Votre Page" />
<meta property="og:description" content="Une description concise (max 1-2 phrases) qui donne envie de cliquer." />
<meta property="og:image" content="https://www.votre-site.ch/images/apercu-social.jpg" />
<meta property="og:url" content="https://www.votre-site.ch/votre-page-exacte" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Le Nom de Votre Entreprise" />
</head>Attention à l'image : L'image og:image doit être une URL absolue (commençant par https://...) et idéalement au format 1.91:1 (environ 1200 x 630 pixels) pour s'afficher parfaitement.
Étape 3 : Vider les caches !
Vous avez tout corrigé, mais l'aperçu est toujours incorrect ?
Ne paniquez pas. C'est la faute du cache. Et il y en a deux à vérifier :
- Le cache de votre propre site : Si vous utilisez un plugin de performance (comme WP Rocket, W3 Total Cache, etc.) ou un cache côté serveur, il est possible que votre site serve toujours l'ancienne version de la page (sans les balises OG) aux robots d'inspection.
Solution : Videz le cache de votre site WordPress ou de votre application avant toute chose. - Le cache des réseaux sociaux : Une fois que vous êtes certain que votre site sert bien la nouvelle version, il faut vider le cache de la plateforme. LinkedIn et Facebook mémorisent la première version (incorrecte) de votre lien pour gagner du temps.
Solution : Retournez simplement sur le Post Inspector (LinkedIn) ou le Sharing Debugger (Facebook) et cliquez sur le bouton "Scrape again" ou "Ré-inspecter". Cela force la plateforme à ignorer son cache et à récupérer vos nouvelles balises toutes neuves.
Un détail technique pour un impact marketing majeur
Ignorer les balises Open Graph, c'est un peu comme négliger la vitrine de son magasin. C'est un détail technique qui a un impact direct sur votre performance marketing. C'est d'autant plus vrai si votre site web est votre outil principal de génération de leads, bien plus que LinkedIn seul.
En prenant 5 minutes pour configurer ces balises, vous reprenez le contrôle de votre image de marque, vous améliorez votre crédibilité et vous augmentez drastiquement votre taux de clic. C'est l'un des nombreux points que nous vérifions lors d'un audit technique, au même titre que la vitesse de chargement de votre site.
Chez CodeDev, nous sommes convaincus que la performance digitale se cache dans ces détails.
Besoin d’un audit ou d’un coup d’accélérateur sur votre site ?
→ Discutons de votre projet
→ Ou écrivez-nous : info@codedev.ch
