← RETOUR AU CONVERTISSEUR

Images Open Graph : Le Guide Technique Complet pour Développeurs

Publié le 06/01/2026 • Guide Markdown

Vous avez codé un site magnifique. Le client partage l'URL sur LinkedIn et... c'est le drame. Pas d'image, un titre tronqué, une description générique. Le partage social, c'est souvent le parent pauvre du développement web.

Ce guide vous donne toutes les specs techniques pour ne plus jamais rater une image Open Graph.

Qu'est-ce que l'Open Graph Protocol ?

L'Open Graph (OG) est un protocole créé par Facebook en 2010. Il permet de contrôler comment une URL s'affiche quand elle est partagée sur les réseaux sociaux.

Sans balises OG, les plateformes "devinent" le contenu : elles scrapent la page, prennent la première image trouvée (souvent un logo 50x50), et tronquent le texte au hasard.

Avec les balises OG, vous contrôlez exactement ce qui s'affiche.

Les Balises Essentielles

Voici le minimum à implémenter dans votre <head> :

<!-- Open Graph de base -->
<meta property="og:title" content="Titre de votre page (60-70 caractères max)">
<meta property="og:description" content="Description engageante (155 caractères max)">
<meta property="og:image" content="https://votresite.com/images/og-image.jpg">
<meta property="og:url" content="https://votresite.com/page/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Nom du site">

<!-- Dimensions de l'image (recommandé) -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">

Les Specs Techniques des Images

C'est là que ça se complique. Chaque plateforme a ses propres règles.

Dimensions Recommandées

Plateforme Dimensions Ratio Poids max
Facebook 1200 × 630 px 1.91:1 8 Mo
LinkedIn 1200 × 627 px 1.91:1 5 Mo
Twitter (large) 1200 × 628 px 1.91:1 5 Mo
Twitter (summary) 800 × 800 px 1:1 5 Mo
WhatsApp 1200 × 630 px 1.91:1 5 Mo
Discord 1200 × 630 px 1.91:1 8 Mo

La Règle d'Or

1200 × 630 pixels est le standard universel. Avec cette dimension, vous couvrez 95% des cas d'usage.

Formats Acceptés

✅ JPEG — Meilleur compromis poids/qualité
✅ PNG — Si vous avez besoin de transparence (rare)
✅ WebP — Supporté par Facebook, pas partout ailleurs
❌ SVG — Non supporté
❌ GIF animé — Affiché en statique

Zone de Sécurité

Attention : certaines plateformes croppent l'image. Gardez une zone de sécurité de 100px sur les bords pour le texte important.

┌────────────────────────────────────┐
│            100px marge             │
│  ┌──────────────────────────────┐  │
│  │                              │  │
│  │      ZONE DE CONTENU         │  │
│  │         SÉCURISÉE            │  │
│  │                              │  │
│  └──────────────────────────────┘  │
│            100px marge             │
└────────────────────────────────────┘

Twitter Cards : Le Cas Particulier

Twitter utilise son propre système en plus de l'OG :

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@votrecompte">
<meta name="twitter:title" content="Titre pour Twitter">
<meta name="twitter:description" content="Description pour Twitter">
<meta name="twitter:image" content="https://votresite.com/images/twitter-card.jpg">

Types de cards disponibles :

  • summary : Petite image carrée à gauche
  • summary_large_image : Grande image au-dessus (recommandé)
  • player : Pour les vidéos
  • app : Pour les applications mobiles

Implémentation Dynamique

PHP Natif

<?php
$og_title = htmlspecialchars($article['title']);
$og_description = htmlspecialchars(substr($article['excerpt'], 0, 155));
$og_image = 'https://votresite.com/og/' . $article['slug'] . '.jpg';
?>
<meta property="og:title" content="<?= $og_title ?>">
<meta property="og:description" content="<?= $og_description ?>">
<meta property="og:image" content="<?= $og_image ?>">

PrestaShop (Override)

Pour personnaliser les OG sur PrestaShop, créez un override du FrontController :

// override/classes/controller/FrontController.php
class FrontController extends FrontControllerCore
{
    public function initHeader()
    {
        parent::initHeader();

        // Image OG personnalisée par catégorie
        if ($this->php_self == 'category') {
            $this->context->smarty->assign([
                'og_image' => $this->getCustomOgImage()
            ]);
        }
    }
}

Si vous n'êtes pas à l'aise avec les overrides PrestaShop, une intervention urgente PrestaShop peut vous éviter de casser votre thème.

WordPress (functions.php)

// Ajouter dans functions.php
function custom_og_image() {
    if (is_single() && has_post_thumbnail()) {
        $image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');
        echo '<meta property="og:image" content="' . esc_url($image[0]) . '">';
    }
}
add_action('wp_head', 'custom_og_image');

Pour une implémentation plus robuste sur WordPress, les experts WooCommerce de WP Help 24/7 peuvent intégrer une solution complète avec images dynamiques.

Générer des Images OG Rapidement

Créer une image 1200×630 pour chaque page, c'est chronophage. Deux approches :

1. Génération Automatique (API)

Des services comme Cloudinary ou imgix génèrent des images à la volée via URL :

https://res.cloudinary.com/demo/image/upload/
  w_1200,h_630,c_fill,
  l_text:Arial_60_bold:Mon%20Titre,
  co_white,g_center
  /background.jpg

2. Générateur Manuel

Pour les pages statiques ou les articles de blog, un générateur d'images Open Graph comme OG Maker permet de créer des visuels cohérents en quelques clics, sans ouvrir Photoshop.

L'avantage : vous gardez une identité visuelle uniforme sur tous vos partages sociaux.

Debugging : Vérifier vos Balises

Avant de publier, testez toujours vos URLs avec les outils officiels :

Plateforme Outil de debug
Facebook Sharing Debugger
Twitter Card Validator
LinkedIn Post Inspector
Général OpenGraph.xyz

Forcer le Rafraîchissement du Cache

Les plateformes cachent agressivement les images OG. Si vous modifiez une image, il faut purger le cache :

Facebook : Collez l'URL dans le Sharing Debugger et cliquez "Scrape Again".

LinkedIn : Ajoutez un paramètre fictif à l'URL :

https://votresite.com/page/?v=2

Twitter : Le cache expire après ~7 jours. Patience ou nouveau paramètre URL.

Erreurs Fréquentes

❌ Image en HTTP

<!-- MAUVAIS -->
<meta property="og:image" content="http://site.com/image.jpg">

<!-- BON -->
<meta property="og:image" content="https://site.com/image.jpg">

Les plateformes exigent du HTTPS.

❌ Chemin Relatif

<!-- MAUVAIS -->
<meta property="og:image" content="/images/og.jpg">

<!-- BON -->
<meta property="og:image" content="https://site.com/images/og.jpg">

Toujours utiliser des URLs absolues.

❌ Image Trop Petite

Minimum 200 × 200 px, sinon l'image est ignorée. Facebook recommande 600 × 315 px minimum.

❌ Image Bloquée par robots.txt

Vérifiez que votre image est accessible aux crawlers :

User-agent: *
Allow: /images/og/

Checklist Avant Mise en Prod

- [ ] Image en 1200 × 630 px
- [ ] URL absolue en HTTPS
- [ ] Poids < 5 Mo (idéalement < 300 Ko)
- [ ] Zone de sécurité respectée (100px)
- [ ] Balises og:title, og:description, og:image présentes
- [ ] Twitter Cards configurées
- [ ] Test sur Facebook Debugger
- [ ] Test sur LinkedIn Inspector
- [ ] robots.txt autorise l'accès à l'image

Pour Aller Plus Loin

Les images OG sont un détail technique, mais elles ont un impact direct sur le taux de clic de vos partages sociaux. Une image bien conçue peut doubler l'engagement.

Si vous documentez vos specs OG pour votre équipe, pensez à rédiger en Markdown — c'est plus lisible qu'un Google Doc, et ça se convertit facilement en Word avec mdconverter.io pour les clients moins techniques.

"Une URL sans image OG, c'est comme un email sans objet : personne ne clique."

Sponsorise par

illicoPresta maintenance PrestaShop

Maintenance experte, reactive et SANS ENGAGEMENT.

Diagnostiquer mon site