Contents
Open Graph et Twitter Cards : guide complet
Comment les métadonnées Open Graph contrôlent les aperçus de liens, en quoi elles diffèrent des snippets Google, et comment valider les titres, les images et les descriptions.
Quand un internaute partage un lien sur Facebook, Telegram, LinkedIn ou WhatsApp, la plateforme ne puise pas les données de votre site au hasard : elle lit des balises meta spécifiques dans le <head> de la page. C'est le protocole Open Graph, développé par Facebook en 2010.
Sans balisage OG, les réseaux sociaux devinent eux-mêmes le titre, la description et l'image, et le résultat est imprévisible. Avec un balisage correct, vous maîtrisez entièrement l'aperçu et maximisez le CTR des liens partagés.
<head> deviennent une carte avec titre, description et image.Open Graph n'influence pas directement le classement dans les résultats de recherche : c'est un outil de trafic social. Mais un partage avec un aperçu attractif augmente la portée et peut indirectement améliorer la popularité transmise et le trafic de marque.
Qu'est-ce qu'Open Graph
Open Graph Protocol (OGP) est un ensemble de balises meta placées dans le <head> d'une page HTML, qui définissent sa présentation lors d'un partage sur les réseaux sociaux. Le protocole utilise l'espace de noms og: et est pris en charge par toutes les grandes plateformes : Facebook, LinkedIn, Telegram, WhatsApp, Pinterest, Slack.
Balises OG essentielles
| Balise | Obligatoire | Description |
|---|---|---|
| og:title | Oui | Titre de la page dans l'aperçu (jusqu'à 60–70 caractères) |
| og:description | Recommandée | Description (jusqu'à 155–160 caractères) |
| og:image | Oui | URL de l'image d'aperçu (min. 200×200, recommandé 1200×630) |
| og:url | Oui | URL canonique de la page |
| og:type | Oui | Type d'objet : website, article, product |
| og:site_name | Recommandée | Nom du site (par exemple « seohead.tech ») |
| og:locale | Recommandée | Langue de la page : en_US, ru_RU |
| og:image:width | Recommandée | Largeur de l'image en pixels |
| og:image:height | Recommandée | Hauteur de l'image en pixels |
| og:image:alt | Recommandée | Texte alternatif de l'image d'aperçu |
Exemple d'implémentation :
html
<!-- Full OG tag set for an article -->
<head>
<meta property="og:title" content="Open Graph and Twitter Cards: complete guide" />
<meta property="og:description" content="How to set up Open Graph markup for maximum CTR when sharing on social media" />
<meta property="og:image" content="https://seohead.tech/images/blog/open-graph.webp" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph and Twitter Cards guide" />
<meta property="og:url" content="https://seohead.tech/en/blog/open-graph" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="seohead.tech" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="ru_RU" />
<!-- Additional for article -->
<meta property="article:published_time" content="2026-05-17T00:00:00Z" />
<meta property="article:author" content="https://seohead.tech/en/about" />
<meta property="article:section" content="On-Page SEO" />
</head>og:image : exigences et dimensions
L'image OG est l'élément le plus important de l'aperçu. Elle occupe plus de 80 % de la surface de la carte et détermine si l'internaute clique sur le lien. Une mauvaise taille ou un mauvais format, et Facebook recadre l'image ou refuse de l'afficher.
| Plateforme | Taille recommandée | Minimum | Format |
|---|---|---|---|
| Facebook / Meta | 1200×630 px | 600×315 px | JPG, PNG, GIF, WebP |
| Twitter / X | 1200×600 px | 300×157 px | JPG, PNG, WebP, GIF |
| 1200×627 px | 200×200 px | JPG, PNG, GIF | |
| Telegram | 1280×720 px (16:9) | Toute taille | JPG, PNG, WebP |
| 1200×630 px | 300×200 px | JPG, PNG |
Solution universelle : 1200×630 px au format WebP. Ce ratio de 1,91:1 s'affiche correctement sur toutes les grandes plateformes. Poids maximal de 8 Mo (limite de Facebook), idéalement moins de 300 Ko.
Twitter Cards
Twitter (X) prend en charge les balises OG, mais dispose aussi de son propre balisage : les Twitter Cards. La plateforme lit d'abord les balises twitter:, puis se rabat sur les balises og:. Il est recommandé de renseigner les deux jeux de balises.
| Balise Twitter Card | Équivalent OG | Description |
|---|---|---|
| twitter:card | — | Type de carte : summary, summary_large_image, app, player |
| twitter:title | og:title | Titre (jusqu'à 70 caractères) |
| twitter:description | og:description | Description (jusqu'à 200 caractères) |
| twitter:image | og:image | URL de l'image |
| twitter:image:alt | og:image:alt | Texte alternatif de l'image |
| twitter:site | — | @nom d'utilisateur du compte du site |
| twitter:creator | — | @nom d'utilisateur de l'auteur du contenu |
Exemple d'implémentation :
html
<!-- Twitter Cards markup -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@seohead_tech" />
<meta name="twitter:creator" content="@seohead_tech" />
<meta name="twitter:title" content="Open Graph and Twitter Cards: complete guide" />
<meta name="twitter:description" content="Setting up OG markup for maximum CTR when sharing" />
<meta name="twitter:image" content="https://seohead.tech/images/blog/open-graph.webp" />
<meta name="twitter:image:alt" content="Open Graph guide" />Types d'objets OG
| og:type | Quand l'utiliser | Balises complémentaires |
|---|---|---|
| website | Page d'accueil, pages de services, pages de destination | — |
| article | Articles de blog, actualités, guides | article:published_time, article:author, article:section |
| product | Fiches produits d'une boutique en ligne | product:price:amount, product:price:currency |
| profile | Pages d'auteur, profils d'utilisateurs | profile:first_name, profile:last_name |
| video | Pages avec contenu vidéo | video:duration, video:release_date |
Implémentation dans Next.js
Dans Next.js 13+ (App Router), les balises OG se définissent avec la Metadata API. L'approche est typée : inutile d'écrire les balises meta HTML à la main.
typescript
// app/[locale]/blog/[slug]/page.tsx
import type { Metadata } from 'next';
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const article = await getArticle(params.slug);
return {
title: article.titleEn,
description: article.leadEn,
openGraph: {
title: article.titleEn,
description: article.leadEn,
url: `https://seohead.tech/en/blog/${params.slug}`,
siteName: 'seohead.tech',
images: [
{
url: `https://seohead.tech${article.coverImage}`,
width: 1200,
height: 630,
alt: article.coverImageAltEn,
},
],
locale: 'en_US',
type: 'article',
publishedTime: article.date,
authors: ['https://seohead.tech/en/about'],
section: article.tagEn,
},
twitter: {
card: 'summary_large_image',
title: article.titleEn,
description: article.leadEn,
images: [`https://seohead.tech${article.coverImage}`],
creator: '@seohead_tech',
},
};
}Validation et débogage
| Outil | Plateforme | URL |
|---|---|---|
| Facebook Sharing Debugger | Facebook, Instagram, WhatsApp | developers.facebook.com/tools/debug/ |
| Twitter Card Validator | Twitter / X | cards-dev.twitter.com/validator |
| LinkedIn Post Inspector | linkedin.com/post-inspector/ | |
| Open Graph Checker | Universel | opengraph.xyz |
| Telegram | Telegram | Collez simplement le lien dans une conversation : l'aperçu s'affiche aussitôt |
Facebook met en cache les balises OG. Si vous avez modifié le balisage sans que l'aperçu change, utilisez le Facebook Sharing Debugger (bouton « Scrape Again »). Le cache de Telegram se met à jour automatiquement ; pour forcer l'actualisation, ajoutez
?v=2 à l'URL.FAQ
Open Graph influence-t-il le classement Google ?
Directement, non. Google n'utilise pas les balises OG pour le classement. Indirectement, oui : un aperçu attractif favorise le partage, ce qui peut générer davantage de liens et de trafic de marque.
Lequel est le plus important : og:title ou <title> ?
Pour la recherche, c'est la balise
<title>. Pour les réseaux sociaux, c'est og:title. Elles peuvent différer : pour la recherche, le titre est optimisé pour les mots-clés (50–60 caractères), tandis que pour les réseaux sociaux il vise le clic et l'émotion (jusqu'à 70 caractères). Les deux balises doivent être présentes.Pourquoi Telegram n'affiche-t-il pas d'aperçu ?
Trois raisons principales : 1) l'image est inaccessible en HTTPS ou bloquée pour les robots ; 2) og:image est absent ou l'URL est invalide ; 3) la page est fermée aux crawlers (noindex, robots.txt, Cloudflare Bot Fight Mode). Vérifiez l'accessibilité de l'image avec
curl -A 'TelegramBot' URL.Les Twitter Cards sont-elles nécessaires si j'ai déjà configuré OG ?
Beaucoup de plateformes peuvent se rabattre sur Open Graph, tandis que les balises propres à chaque plateforme offrent un contrôle supplémentaire là où elles sont prises en charge. Testez une URL réellement partagée : aucun jeu de balises ne garantit la manière dont chaque plateforme met en cache ou affiche un aperçu.
Comment générer les images OG dynamiquement ?
Next.js permet de générer des images OG dynamiques avec
ImageResponse de next/og. L'image est créée côté serveur au format PNG ou WebP, à partir d'un modèle JSX. Chaque article peut ainsi disposer d'un aperçu unique, sans préparer les images à la main.Check it with SpiderHead
Free and local: run the audit on your own machine.
