Open Graph et Twitter Cards : maîtriser l'aperçu de vos partages

Vous partagez un lien sur LinkedIn et au lieu d'un bel aperçu avec image et description, vous obtenez juste l'URL brute. Ou pire : un aperçu avec le mauvais titre, une image inattendue, et une description automatique générée depuis le premier paragraphe de la page.

Open Graph est le protocole qui contrôle ça. Twitter Cards est la variante de Twitter/X. Deux protocoles, même logique, même syntaxe de base.

Open Graph — le protocole de Facebook

Open Graph a été créé par Facebook en 2010 pour contrôler l'aperçu des liens partagés. Aujourd'hui, il est supporté par tous les réseaux sociaux : Facebook, LinkedIn, WhatsApp, Discord, Slack, Telegram.

<head>
  <!-- Balises Open Graph — dans le <head> de chaque page -->
  <meta property="og:title" content="SEO pour développeurs : guide complet 2026" />
  <meta property="og:description" content="Crawl, Core Web Vitals, données structurées — tout ce qu'un développeur doit savoir pour optimiser son référencement." />
  <meta property="og:image" content="https://iducation.fr/og/seo-guide.jpg" />
  <meta property="og:url" content="https://iducation.fr/articles/seo-pour-developpeurs" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="Iducation" />
  <meta property="og:locale" content="fr_FR" />
</head>

Les balises OG essentielles

Balise	Obligatoire	Description
`og:title`	✅	Titre de la page (peut différer du `<title>`)
`og:description`	✅	Description 2-3 phrases
`og:image`	✅	URL de l'image de partage
`og:url`	✅	URL canonique de la page
`og:type`	✅	`website`, `article`, `product`, `video.movie`...
`og:site_name`	Recommandé	Nom du site
`og:locale`	Recommandé	`fr_FR`, `en_US`...

Type `article` — métadonnées supplémentaires

Pour les articles de blog :

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-06-18T00:00:00Z" />
<meta property="article:modified_time" content="2026-06-18T00:00:00Z" />
<meta property="article:author" content="https://iducation.fr/about" />
<meta property="article:section" content="SEO" />
<meta property="article:tag" content="SEO" />
<meta property="article:tag" content="référencement" />

Twitter Cards

Twitter/X utilise ses propres balises twitter:*, mais elles ont un fallback sur les balises OG si les balises Twitter sont absentes.

Les 4 types de cards

summary — petit aperçu avec image carrée :

<meta name="twitter:card" content="summary" />

summary_large_image — grand aperçu horizontal (le plus utilisé) :

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="SEO pour développeurs" />
<meta name="twitter:description" content="Guide complet : crawl, Core Web Vitals, données structurées." />
<meta name="twitter:image" content="https://iducation.fr/og/seo-guide.jpg" />
<meta name="twitter:image:alt" content="Illustration du guide SEO pour développeurs" />
<meta name="twitter:site" content="@iducation" />
<meta name="twitter:creator" content="@williamloree" />

player — pour les vidéos et audio. app — pour les applications mobiles.

Pour 99% des sites de contenu : summary_large_image.

Spécifications de l'image OG

C'est le point le plus souvent raté. Une image OG mal dimensionnée apparaît coupée ou pixelisée.

Plateforme	Dimensions recommandées	Ratio	Poids max
Facebook	1200 × 630px	1.91:1	8 Mo
Twitter	1200 × 628px	1.91:1	5 Mo
LinkedIn	1200 × 627px	1.91:1	5 Mo
WhatsApp	1200 × 630px	1.91:1	300 Ko recommandé
Discord	1200 × 630px	1.91:1	—

Format idéal : JPG 1200×630px, < 200Ko — compatible partout, mise en cache rapide.

Règles à respecter :

URL absolue (pas de chemin relatif)
Accessible publiquement (pas derrière authentification)
Texte lisible sur mobile (évitez les textes trop petits)
Pas de logo seul — une vraie image contextuelle convertit mieux

Génération automatique avec Next.js

Next.js App Router permet de générer des images OG dynamiquement pour chaque article, avec le titre et la description superposés.

app/articles/[slug]/opengraph-image.tsx

import { ImageResponse } from 'next/og'
import { getArticleBySlug } from '@/lib/articles'
 
export const size = { width: 1200, height: 630 }
export const contentType = 'image/jpeg'
 
export default async function Image({ params }: { params: { slug: string } }) {
  const article = await getArticleBySlug(params.slug)
 
  return new ImageResponse(
    (
      <div
        style={{
          background: '#0a0a0a',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-end',
          padding: '60px',
          fontFamily: 'Helvetica Neue, Arial, sans-serif',
        }}
      >
        <div style={{ color: '#cdff4f', fontSize: 20, letterSpacing: '0.15em', marginBottom: 20 }}>
          IDUCATION
        </div>
        <div style={{ color: '#ffffff', fontSize: 56, fontWeight: 700, lineHeight: 1.1, maxWidth: 900 }}>
          {article.title}
        </div>
        <div style={{ color: '#999', fontSize: 22, marginTop: 24 }}>
          {article.dek}
        </div>
      </div>
    ),
    { ...size }
  )
}

Next.js sert automatiquement cette image sur /articles/[slug]/opengraph-image et l'injecte dans les métadonnées.

app/articles/[slug]/page.tsx — lien entre metadata et image OG

export async function generateMetadata({ params }) {
  const article = await getArticleBySlug(params.slug)
  return {
    openGraph: {
      title: article.title,
      description: article.dek,
      type: 'article',
      images: [{ url: `/articles/${params.slug}/opengraph-image`, width: 1200, height: 630 }],
    },
    twitter: {
      card: 'summary_large_image',
      title: article.title,
      description: article.dek,
    },
  }
}

Déboguer vos balises OG

Outils en ligne

metatags.io — le plus complet. Prévisualise l'aperçu sur toutes les plateformes simultanément : Facebook, Twitter, LinkedIn, Slack, Discord, WhatsApp. Entrez une URL ou collez du HTML brut.

opengraph.xyz — simple, rapide. Entrez une URL, voyez l'aperçu Facebook et Twitter.

Débogueur Facebook : developers.facebook.com/tools/debug/ — invalide le cache Facebook et rafraîchit l'aperçu. Obligatoire après modification d'une image OG déjà partagée.

Twitter Card Validator : cards-dev.twitter.com/validator

Déboguer en local

# Vérifier que les balises sont présentes dans le HTML servi
curl -s https://iducation.fr/articles/docker-introduction | grep -i 'og:'
curl -s https://iducation.fr/articles/docker-introduction | grep -i 'twitter:'

Si aucune balise n'apparaît, elles sont probablement générées uniquement côté client (problème de SSR).

Erreurs fréquentes

Image OG non mise à jour — les plateformes cachent l'image. Après modification, utilisez le débogueur Facebook et attendez 24-48h pour LinkedIn.

URL relative dans og:image — <meta property="og:image" content="/og/image.jpg"> ne fonctionne pas. Toujours une URL absolue : https://monsite.fr/og/image.jpg.

og:url absent — sans cette balise, la plateforme utilise l'URL actuelle (avec paramètres UTM, querystrings...) comme URL canonique du partage.

twitter:card oublié — sans cette balise, Twitter affiche un aperçu minimal même si og:image est présent.

Même image pour tout le site — une image générique sur tous les articles ne convertit pas. Les images OG dynamiques (générées par article) augmentent significativement les clics.

Open Graph et Twitter Cards sont simples à implémenter mais rarement faits correctement. Pour l'implémentation Next.js complète (sitemap, robots, JSON-LD, en plus des OG), Next.js SEO complet couvre tout dans une même configuration. Et pour les images OG elles-mêmes — formats, compression, génération — le guide SEO des images détaille les bonnes pratiques.

Open Graph est le protocole qui contrôle ça. Twitter Cards est la variante de Twitter/X. Deux protocoles, même logique, même syntaxe de base.

Open Graph — le protocole de Facebook

<head>
  <!-- Balises Open Graph — dans le <head> de chaque page -->
  <meta property="og:title" content="SEO pour développeurs : guide complet 2026" />
  <meta property="og:description" content="Crawl, Core Web Vitals, données structurées — tout ce qu'un développeur doit savoir pour optimiser son référencement." />
  <meta property="og:image" content="https://iducation.fr/og/seo-guide.jpg" />
  <meta property="og:url" content="https://iducation.fr/articles/seo-pour-developpeurs" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="Iducation" />
  <meta property="og:locale" content="fr_FR" />
</head>

Les balises OG essentielles

Balise	Obligatoire	Description
`og:title`	✅	Titre de la page (peut différer du `<title>`)
`og:description`	✅	Description 2-3 phrases
`og:image`	✅	URL de l'image de partage
`og:url`	✅	URL canonique de la page
`og:type`	✅	`website`, `article`, `product`, `video.movie`...
`og:site_name`	Recommandé	Nom du site
`og:locale`	Recommandé	`fr_FR`, `en_US`...

Type `article` — métadonnées supplémentaires

Pour les articles de blog :

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-06-18T00:00:00Z" />
<meta property="article:modified_time" content="2026-06-18T00:00:00Z" />
<meta property="article:author" content="https://iducation.fr/about" />
<meta property="article:section" content="SEO" />
<meta property="article:tag" content="SEO" />
<meta property="article:tag" content="référencement" />

Twitter Cards

Twitter/X utilise ses propres balises twitter:*, mais elles ont un fallback sur les balises OG si les balises Twitter sont absentes.

Les 4 types de cards

summary — petit aperçu avec image carrée :

<meta name="twitter:card" content="summary" />

summary_large_image — grand aperçu horizontal (le plus utilisé) :

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="SEO pour développeurs" />
<meta name="twitter:description" content="Guide complet : crawl, Core Web Vitals, données structurées." />
<meta name="twitter:image" content="https://iducation.fr/og/seo-guide.jpg" />
<meta name="twitter:image:alt" content="Illustration du guide SEO pour développeurs" />
<meta name="twitter:site" content="@iducation" />
<meta name="twitter:creator" content="@williamloree" />

player — pour les vidéos et audio. app — pour les applications mobiles.

Pour 99% des sites de contenu : summary_large_image.

Spécifications de l'image OG

C'est le point le plus souvent raté. Une image OG mal dimensionnée apparaît coupée ou pixelisée.

Plateforme	Dimensions recommandées	Ratio	Poids max
Facebook	1200 × 630px	1.91:1	8 Mo
Twitter	1200 × 628px	1.91:1	5 Mo
LinkedIn	1200 × 627px	1.91:1	5 Mo
WhatsApp	1200 × 630px	1.91:1	300 Ko recommandé
Discord	1200 × 630px	1.91:1	—

Format idéal : JPG 1200×630px, < 200Ko — compatible partout, mise en cache rapide.

Règles à respecter :

URL absolue (pas de chemin relatif)
Accessible publiquement (pas derrière authentification)
Texte lisible sur mobile (évitez les textes trop petits)
Pas de logo seul — une vraie image contextuelle convertit mieux

Génération automatique avec Next.js

Next.js App Router permet de générer des images OG dynamiquement pour chaque article, avec le titre et la description superposés.

app/articles/[slug]/opengraph-image.tsx

import { ImageResponse } from 'next/og'
import { getArticleBySlug } from '@/lib/articles'
 
export const size = { width: 1200, height: 630 }
export const contentType = 'image/jpeg'
 
export default async function Image({ params }: { params: { slug: string } }) {
  const article = await getArticleBySlug(params.slug)
 
  return new ImageResponse(
    (
      <div
        style={{
          background: '#0a0a0a',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-end',
          padding: '60px',
          fontFamily: 'Helvetica Neue, Arial, sans-serif',
        }}
      >
        <div style={{ color: '#cdff4f', fontSize: 20, letterSpacing: '0.15em', marginBottom: 20 }}>
          IDUCATION
        </div>
        <div style={{ color: '#ffffff', fontSize: 56, fontWeight: 700, lineHeight: 1.1, maxWidth: 900 }}>
          {article.title}
        </div>
        <div style={{ color: '#999', fontSize: 22, marginTop: 24 }}>
          {article.dek}
        </div>
      </div>
    ),
    { ...size }
  )
}

Next.js sert automatiquement cette image sur /articles/[slug]/opengraph-image et l'injecte dans les métadonnées.

app/articles/[slug]/page.tsx — lien entre metadata et image OG

export async function generateMetadata({ params }) {
  const article = await getArticleBySlug(params.slug)
  return {
    openGraph: {
      title: article.title,
      description: article.dek,
      type: 'article',
      images: [{ url: `/articles/${params.slug}/opengraph-image`, width: 1200, height: 630 }],
    },
    twitter: {
      card: 'summary_large_image',
      title: article.title,
      description: article.dek,
    },
  }
}

Déboguer vos balises OG

Outils en ligne

metatags.io — le plus complet. Prévisualise l'aperçu sur toutes les plateformes simultanément : Facebook, Twitter, LinkedIn, Slack, Discord, WhatsApp. Entrez une URL ou collez du HTML brut.

opengraph.xyz — simple, rapide. Entrez une URL, voyez l'aperçu Facebook et Twitter.

Débogueur Facebook : developers.facebook.com/tools/debug/ — invalide le cache Facebook et rafraîchit l'aperçu. Obligatoire après modification d'une image OG déjà partagée.

Twitter Card Validator : cards-dev.twitter.com/validator

Déboguer en local

# Vérifier que les balises sont présentes dans le HTML servi
curl -s https://iducation.fr/articles/docker-introduction | grep -i 'og:'
curl -s https://iducation.fr/articles/docker-introduction | grep -i 'twitter:'

Si aucune balise n'apparaît, elles sont probablement générées uniquement côté client (problème de SSR).

Erreurs fréquentes

Image OG non mise à jour — les plateformes cachent l'image. Après modification, utilisez le débogueur Facebook et attendez 24-48h pour LinkedIn.

URL relative dans og:image — <meta property="og:image" content="/og/image.jpg"> ne fonctionne pas. Toujours une URL absolue : https://monsite.fr/og/image.jpg.

og:url absent — sans cette balise, la plateforme utilise l'URL actuelle (avec paramètres UTM, querystrings...) comme URL canonique du partage.

twitter:card oublié — sans cette balise, Twitter affiche un aperçu minimal même si og:image est présent.

Même image pour tout le site — une image générique sur tous les articles ne convertit pas. Les images OG dynamiques (générées par article) augmentent significativement les clics.

Open Graph et Twitter Cards : maîtriser l'aperçu de vos partages

Open Graph — le protocole de Facebook

Les balises OG essentielles

Type article — métadonnées supplémentaires

Twitter Cards

Les 4 types de cards

Spécifications de l'image OG

Génération automatique avec Next.js

Déboguer vos balises OG

Outils en ligne

Déboguer en local

Erreurs fréquentes

Open Graph et Twitter Cards : maîtriser l'aperçu de vos partages

Open Graph — le protocole de Facebook

Les balises OG essentielles

Type article — métadonnées supplémentaires

Twitter Cards

Les 4 types de cards

Spécifications de l'image OG

Génération automatique avec Next.js

Déboguer vos balises OG

Outils en ligne

Déboguer en local

Erreurs fréquentes

Type `article` — métadonnées supplémentaires

Type `article` — métadonnées supplémentaires