Comment ajouter des balises Open Graph à n'importe quel site Web

Que vous utilisiez du HTML brut, WordPress, Next.js ou Webflow, voici exactement comment ajouter des balises Open Graph à votre site.

Méthode 1 : HTML brut (n’importe quel site Web statique)

Si vous avez un accès direct à vos fichiers HTML, ajoutez ces balises dans la section de chaque page :

<!-- Open Graph -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />
<meta property="og:type" content="website" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling description." />
<meta name="twitter:image" content="https://yoursite.com/images/preview.jpg" />

Assurez-vous que l'URL og:image est absolue (commence par https://). Les chemins relatifs comme /images/preview.jpg ne fonctionneront pas.

Méthode 2 : WordPress (Yoast SEO)

Si vous utilisez WordPress avec Yoast SEO, les balises OG sont gérées automatiquement :

1. Installez et activez le plugin Yoast SEO
2. Modifier n'importe quelle page ou publication
3. Faites défiler jusqu'à la métabox Yoast SEO
4. Cliquez sur l'onglet "Sociaux"
5. Définissez le "Facebook titre", "Facebook description" et "Facebook image"
6. Yoast génère automatiquement les balises og: correctes

Yoast ajoute également automatiquement les balises Twitter Card. Vous pouvez les configurer sous Yoast SEO → Social → Twitter.

Méthode 3 : WordPress (RankMath)

RankMath fonctionne de manière similaire à Yoast mais avec des paramètres légèrement différents :

1. Installer et activer RankMath SEO
2. Modifier n'importe quelle page ou publication
3. Trouver la métabox RankMath
4. Allez dans l'onglet "Sociaux"
5. Définir l'image sociale, le titre et la description
6. RankMath génère automatiquement les balises OG et Twitter Card

Méthode 4 : Next.js (Routeur d'application)

Dans Next.js 13+ (App Router), utilisez l'API de métadonnées :

export const metadata = {
  title: 'Your Page Title',
  description: 'A compelling description.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
  },
};

Pour les pages dynamiques (comme les articles de blog), générez des métadonnées dans generateMetadata() :

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

Consultez nos balises Open Graph dans le guide Next.js pour une plongée plus approfondie.

Méthode 5 : Webflow

Webflow a des paramètres Open Graph intégrés :

1. Accédez aux paramètres de votre projet
2. Cliquez sur "Paramètres SEO"
3. Sous « Balises méta par défaut », définissez l'image, le titre et la description Facebook/OG.
4. Pour des pages individuelles, accédez aux paramètres de la page → Paramètres SEO et remplacez les valeurs par défaut.
5. Webflow génère automatiquement les balises OG correctes

Méthode 6 : configuration personnalisée CMS ou sans tête

Si vous utilisez un CMS sans tête (Contentful, Sanity, Strapi, etc.), ajoutez des balises OG dans votre framework frontend. Le processus est le même que Next.js — générez dynamiquement les balises à partir de vos données CMS et injectez-les dans la page .

Liste de contrôle des solutions rapides

Foire aux questions