Connexion
← Retour au lexique
⚙️ SEO Technique

Open Graph Meta Tags

Les balises Open Graph contrôlent l'apparence d'une page lorsqu'elle est partagée sur les réseaux sociaux (Facebook, LinkedIn, Twitter), affichant titre, image et description.

Définition

Les balises Open Graph (OG tags) sont des métadonnées ajoutées dans le <head> d’une page HTML pour contrôler comment cette page apparaît lorsqu’elle est partagée sur les réseaux sociaux. Développé initialement par Facebook, le protocole Open Graph est maintenant utilisé par LinkedIn, Twitter (en complément), Pinterest et d’autres plateformes.

Ces balises permettent de personnaliser le titre, l’image, et la description affichés lors d’un partage.

Balises Open Graph essentielles

og:title

Le titre affiché lors du partage.

<meta property="og:title" content="Guide complet du SEO en 2024">

og:description

La description affichée sous le titre.

<meta property="og:description" content="Apprenez toutes les techniques SEO pour améliorer votre visibilité sur Google.">

og:image

L’image affichée en preview.

<meta property="og:image" content="https://example.com/image.jpg">

og:url

L’URL canonique de la page.

<meta property="og:url" content="https://example.com/guide-seo">

og:type

Le type de contenu (article, website, product…).

<meta property="og:type" content="article">

Balises supplémentaires utiles

og:site_name

Le nom du site web.

<meta property="og:site_name" content="Cuik SEO">

og:locale

La langue du contenu.

<meta property="og:locale" content="fr_FR">

og:image:width et og:image:height

Dimensions de l’image (aide les plateformes à l’afficher correctement).

<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Spécifications pour les images

Taille recommandée

  • Minimum : 200 x 200 pixels
  • Recommandé : 1200 x 630 pixels (ratio 1.91:1)
  • Maximum : 8 MB

Format

JPEG, PNG ou GIF (sans animation pour Facebook).

Bonnes pratiques

  • Texte limité sur l’image (moins de 20% de la surface)
  • Image de haute qualité
  • Contenu pertinent par rapport à la page

Twitter Cards

Twitter utilise ses propres balises en complément d’Open Graph.

Balises Twitter principales

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@votrecompte">
<meta name="twitter:title" content="Titre">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/image.jpg">

Types de cards

  • summary : Petite image à gauche
  • summary_large_image : Grande image au-dessus
  • player : Pour les vidéos
  • app : Pour les applications

Implémentation par plateforme

PlateformeBalises utilisées
FacebookOpen Graph
LinkedInOpen Graph
TwitterTwitter Cards (fallback OG)
PinterestOpen Graph
WhatsAppOpen Graph
SlackOpen Graph

Exemple complet

<head>
  <!-- Open Graph -->
  <meta property="og:title" content="Guide SEO 2024 : Tout savoir">
  <meta property="og:description" content="Le guide complet pour maîtriser le référencement naturel.">
  <meta property="og:image" content="https://example.com/og-image.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:url" content="https://example.com/guide-seo">
  <meta property="og:type" content="article">
  <meta property="og:site_name" content="Mon Site">
  <meta property="og:locale" content="fr_FR">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@moncompte">
</head>

Tester ses balises

Outils de débogage

Forcer le rafraîchissement

Les plateformes mettent en cache les previews. Utilisez les outils de débogage pour forcer un nouveau crawl après modification.

Open Graph et SEO

Impact direct

Les balises OG n’affectent pas directement le ranking Google.

Impact indirect

  • Plus de clics sur les partages sociaux = plus de trafic
  • Meilleure apparence = meilleur taux de clic
  • Partages = visibilité = potentiels backlinks

Cohérence recommandée

Alignez vos OG tags avec vos balises SEO :

  • og:title proche du title SEO
  • og:description proche de la meta description
  • og:url = URL canonique

Erreurs courantes

Image manquante ou incorrecte

Pas d’image = preview peu attrayant. URL relative au lieu d’absolue = image non trouvée.

Texte trop long

Les titres et descriptions trop longs sont tronqués.

Cache non rafraîchi

Modifier les balises sans purger le cache des plateformes = ancienne version affichée.

Image trop petite

Une image sous le minimum requis sera ignorée ou mal affichée.

Conclusion

Les balises Open Graph sont essentielles pour contrôler l’apparence de vos pages sur les réseaux sociaux. Une belle preview avec titre accrocheur et image de qualité augmente significativement les clics sur vos partages. Implémentez systématiquement ces balises sur toutes vos pages, testez avec les outils de débogage, et n’oubliez pas les Twitter Cards en complément.

← Retour au lexique