Open Graph (og:title, og:image…)

Définition technique

Protocole de métadonnées pour le partage de liens sur les réseaux sociaux (Facebook, LinkedIn, etc.). Balises HTML dans le <head> : og:title, og:description, og:image (URL absolue), og:url, og:type (website, article…), et optionnellement og:locale, og:image:width/height. Quand un lien est partagé, la plateforme récupère ces meta pour afficher une prévisualisation (titre, description, image). Si Open Graph est absent, le réseau choisit un extrait et une image par défaut, souvent peu adaptés. Les dimensions recommandées pour og:image sont 1200x630 px (ratio 1.91:1) pour un affichage optimal. Pour les articles, og:type="article" avec og:published_time et og:author améliore l’affichage. Les réseaux mettent en cache les prévisualisations ; en cas de changement, il faut parfois invalider le cache (Facebook Sharing Debugger, etc.).

Comment ça fonctionne ?

Des balises <meta property="og:title">, og:description, og:image, og:url, og:type dans le <head> fournissent au réseau social le titre, la description et l'image à afficher lors du partage. Le réseau récupère ces meta quand un lien est partagé ; en leur absence, il choisit lui-même un extrait.

L'erreur classique à éviter

Ne pas définir d'OG et laisser le réseau choisir (souvent une mauvaise image ou un extrait technique). Utiliser une image trop petite ou trop lourde. Oublier d'invalider le cache après modification (Facebook Sharing Debugger, etc.).

Impact business : pourquoi s'en soucier ?

Une prévisualisation soignée (titre percutant, image adaptée, description claire) augmente le taux de clic et la crédibilité quand le site est partagé. Sans OG, l’image peut être un logo minuscule ou un détail sans intérêt ; le texte peut être technique ou hors sujet. Pour le marketing et la notoriété, les meta OG sont indispensables. Les partages sur LinkedIn et Facebook représentent souvent une part significative du trafic social ; négliger l’OG laisse de la visibilité aux concurrents. Une image 1200x630 percutante et un titre adapté au partage peuvent multiplier les clics.

La règle d'or

Toujours définir og:title, og:description, og:image (URL absolue). Image 1200x630 px, format JPG ou PNG. Pour les articles : og:type="article" avec og:published_time et og:author. Tester l'aperçu avant et après publication.

La théorie c'est bien, la pratique c'est mieux. Découvrez comment j'applique le Open Graph (og:title, og:image…) dans mes projets.

Découvrir l'expertise Marketing & Conversion

Le Prompt Expert (Copier-Coller dans Claude / Cursor)

Contexte : page [type : accueil / article blog / fiche produit / landing], objectif [notoriété / conversion], plateforme cible [Facebook / LinkedIn / les deux]. Génère le jeu complet de balises Open Graph (og:title, og:description, og:image, og:url, og:type, og:locale). Donne les dimensions et le poids max pour l’image. Si article : ajoute og:published_time, og:author. Propose un titre et une description adaptés au partage (ton [professionnel / engageant]).

FAQ

Ne vous perdez pas dans le code. Je m'occupe de la technique, concentrez-vous sur vos clients.

En parler ensemble