Aller au contenu principal

Données Open Graph

Le protocole Open Graph permet de contrôler l'apparence d'une page lorsqu'elle est partagée sur les réseaux sociaux (Facebook, X, LinkedIn, WhatsApp…).

📘 C'est quoi le protocole Open Graph ?​

Le protocole Open Graph est une spécification créée par Facebook en 2010. Elle permet d’ajouter des métadonnées dans les pages HTML pour que les liens partagés s’affichent joliment sur les réseaux sociaux (Facebook, X/Twitter, LinkedIn, WhatsApp…).

Ces balises permettent de contrôler :

  • le titre du lien partagé,
  • la description,
  • l’image d’aperçu,
  • l’URL canonique,
  • et d’autres éléments contextuels.

🗂️ Propriétés principales​

PropriétéDescriptionExemple
og:titleTitre de la pageRésidence Edenarc - Odalys Vacances
og:descriptionRésumé de la pageProfitez d'une location à la montagne...
og:imageURL absolue de l'image d’aperçuhttps://www.odalys-vacances.com/images/produits/edenarc.jpg
og:urlURL canonique de la pagehttps://www.odalys-vacances.com/location-montagne/edenarc/
og:typeType de contenuproduct, article, website
og:site_nameNom du siteOdalys Vacances

🔧 Exemple complet d'intégration pour NextJS (V4)​

Voici comment structurer la fonction generateMetadata() dans Next.js pour intégrer proprement les données Open Graph et Twitter Cards :

// Exemple générique de generateMetadata() avec OG et Twitter Cards

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}) {
  const data = await fetchData(params.slug); // une fonction d'exemple de récupération de données

  return {
    title: data.title, // Titre de la page
    description: data.description, // Description courte
    openGraph: {
      title: data.title, // Titre OG
      description: data.description, // Description OG
      url: `https://www.example.com/${params.slug}`, // URL canonique
      siteName: 'Nom du Site', // Nom du site
      images: [
        {
          url: data.imageUrl, // URL de l'image OG (absolue)
          width: 1200, // Largeur recommandée en px
          height: 630, // Hauteur recommandée en px
          alt: data.title, // Texte alternatif image
        },
      ],
      type: 'website', // Type de contenu (ex: website, article, product)
    },
    twitter: {
      card: 'summary_large_image', // Type de carte Twitter (summary_large_image recommandé)
      site: '@nomducompte', // Optionnel : nom du compte Twitter du site
      creator: '@auteur', // Optionnel : auteur Twitter
      title: data.title, // Titre Twitter
      description: data.description, // Description Twitter
      images: [data.imageUrl], // Image Twitter (doit être une URL absolue)
    },
  };
}

🐦 Pourquoi ajouter les Twitter Cards ?​

Même si on utilise les balises Open Graph, il est recommandé d’ajouter les Twitter Cards, car elles sont spécialement optimisées pour X (Twitter) et garantissent un rendu parfait sur cette plateforme.

Bien que les Twitter Cards aient été conçues pour Twitter (aujourd’hui X), plusieurs autres plateformes sociales et agrégateurs de contenu continuent de les utiliser pour enrichir l’affichage des liens partagés.

🧠 Pourquoi utiliser generateMetadata dans Next.js ?​

La fonction generateMetadata permet de générer dynamiquement les métadonnées SEO (comme le titre, la description, les balises Open Graph, Twitter Cards, etc.) côté serveur, directement lors du rendu de la page.

Les avantages principaux sont :

  • Dynamisme : Les métadonnées peuvent être personnalisées selon le contenu spécifique de chaque page (produit, article, catégorie...), améliorant ainsi la pertinence SEO.
  • Performance : Générées au moment du rendu serveur, elles évitent le rendu côté client et assurent une meilleure indexation par les moteurs de recherche et réseaux sociaux.
  • Maintenance simplifiée : Centraliser la gestion des métadonnées dans une fonction dédiée facilite les mises à jour et la cohérence sur tout le site.
  • Support natif Next.js : Intégration fluide avec le framework sans dépendances externes, en conformité avec les meilleures pratiques de Next.js.

💡 Remarques générales​

  • Utiliser des URL absolues pour les images dans les métadonnées.
  • Préférer une taille d’image autour de 1200x630 px pour un rendu optimal sur tous les réseaux sociaux.
  • Adapter le type Open Graph selon la page (website, product, article, etc.).
  • Fournir les balises Twitter même si tu utilises Open Graph, elles sont complémentaires.

🔗 Ressources utiles​