Générateur d'image de carte sociale Open Graph

Open Graph est un ensemble de <meta> tags introduits par Facebook qui permettent à une page web de se décrire aux plateformes sociales. Les tags les plus courants sont og:title, og:descriptionet og:image. Quand une personne partage un lien, la plateforme lit ces tags et affiche une carte riche au lieu d'un simple URL.

La spécification Open Graph recommande un rapport de 1.91:1 avec une taille minimale de 600×315 pixels. La plupart des plateformes fonctionnent le mieux à 1200×630, qui conserve la netteté sur les écrans retina tout en restant sous la limite de 8 Mo imposée par Facebook. Les cartes Twitter utilisent généralement 1024×512 pour le format summary_large_image.

Des plateformes comme Facebook, LinkedIn et Slack récupèrent l'image og:image une seule fois et l'envoient sur leur CDN pour éviter de solliciter votre serveur chaque fois qu'un lien est partagé. Ce cache peut durer des jours ou des semaines. Pour forcer une mise à jour après avoir modifié l'image, changez l'URL du fichier ou utilisez le débogueur de la plateforme (par exemple, le débogueur de partage Facebook) pour réextraire la page.

og:image est une partie du protocole Open Graph et est lue par Facebook, LinkedIn, Slack, Discord et la plupart des applications de messagerie. twitter:image appartient aux cartes Twitter et est lue par X (Twitter). Si seulement og:image est présente, X recourra à cette image, donc une seule image de haute qualité fonctionne souvent pour les deux — mais en fournissant les deux, vous pouvez optimiser la taille pour chaque plateforme.

Les cartes sociales ont un canvas fixe, donc un titre long qui dépasse la limite semble défectueux. L'API HTML5 Canvas ne permet pas de réduire automatiquement le texte, donc le générateur mesure chaque mot avec ctx.measureText(), découpe le titre en lignes et réduit la taille de la police en étapes jusqu'à ce que le titre s'adapte dans la zone sécurisée. Cela permet d'assurer la lisibilité de chaque export sans ajustement manuel.