Comment forcer l'image de prévisualisation (vignette) lors du partage d'un lien sur Facebook

Quand un lien vers votre site est partagé sur Facebook, le robot de Facebook (crawler) « gratte » la page pour choisir une image, un titre et une description. Souvent, il prend une image inadaptée (logo, publicité, image générique) ou aucune. Pour contrôler l'apparence du partage, il faut ajouter des balises Open Graph dans le `` de vos pages HTML.

Balises Open Graph essentielles

Insérez ces lignes avant `` :

<meta property="og:title" content="Titre optimal pour le partage (max 60-90 caractères)" />
<meta property="og:description" content="Description engageante, 2-3 phrases, max 200-300 caractères. Appel à l'action." />
<meta property="og:image" content="https://www.votresite.com/images/vignette-partage-1200x630.jpg" />
<meta property="og:url" content="https://www.votresite.com/page-cible/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Nom de votre Site" />
<meta property="og:locale" content="fr_FR" />

Spécifications de l'image `og:image`

• Dimensions recommandées : 1200 × 630 px (ratio 1.91:1). Minimum 600 × 315 px.
• Format : JPEG (photos), PNG (graphiques/logo/transparence), WebP (supporté).
• Taille fichier : < 8 Mo (idéal < 500 Ko pour chargement rapide).
• URL absolue HTTPS (obligatoire).
• Accessible publiquement (pas de blocage robots.txt, pas d'authentification, pas de redirection).
• Contenu : visuel représentatif, texte lisible (titre, CTA « En savoir plus »), branding discret.

Autres balises utiles

• og:image:width et og:image:height : dimensions en pixels (accélère le crawler).
• og:image:alt : description pour accessibilité.
• article:published_time, article:modified_time, article:author, article:section, article:tag : pour articles de blog (type `article` au lieu de `website`).
• fb:app_id : votre Facebook App ID (permet d'accéder aux Insights de partage dans Meta Business Suite).

Tester et rafraîchir le cache Facebook

1. Ouvrez Facebook Sharing Debugger (outil officiel).
2. Collez l'URL de votre page > Déboguer.
3. Vérifiez les avertissements/erreurs (image trop petite, manque balises, redirection, etc.).
4. Cliquez Récupérer de nouvelles informations (Scrape Again) pour forcer Facebook à re-crawler la page mise à jour.
5. Répétez jusqu'à ce que l'aperçu soit correct.

Cas particuliers

• Site statique (HTML pur) : éditez chaque fichier `.html` ou le template/include commun (`head.html`, `partials/head.php`, etc.).
• WordPress : utilisez Yoast SEO, Rank Math, All in One SEO ou SEOPress → onglet « Réseaux sociaux » / « Facebook » par page/article. Remplissez Titre, Description, Image. Sauvegardez > testez dans Debugger.
• React / Vue / SPA : le crawler Facebook n'exécute pas le JavaScript. Utilisez le rendu côté serveur (Next.js `getServerSideProps`, Nuxt `asyncData`, `useHead`), ou un service de pré-rendu (Prerender.io, Rendertron), ou injectez les balises via le serveur (nginx, Cloudflare Workers).
• AMP : ajoutez `` dans le `` de la page AMP (la version canonique doit aussi les avoir).

Checklist avant déploiement

1. Balises OG présentes sur toutes les pages partageables.
2. Image 1200×630, HTTPS, accessible, < 500 Ko.
3. Titre < 90 car., Description < 300 car., incitatifs.
4. Testé dans Sharing Debugger → aperçu correct.
5. Cache Facebook vidé (bouton « Récupérer de nouvelles informations »).