Image open graph
Créez une image open graph dans votre navigateur. Saisissez un titre et un sous-titre, choisissez des couleurs, puis téléchargez un PNG de 1200 x 630 px à utiliser comme image d'aperçu lorsque votre page est partagée sous forme de lien.
Aperçu (1200 x 630)
Effectuez la vérification de sécurité pour activer le bouton.
Résultat
Votre image apparaîtra ici.
L'outil web gratuit capture au maximum 2000px de hauteur. Pour les captures plus hautes, utilisez l'API.
Conservation : les résultats des outils web sont supprimés après 10 minutes. Les résultats de l'API sont conservés 1 jour avec la formule gratuite et 7 jours avec Starter et Pro (30 jours avec Business et Scale). Un historique de chaque tâche (type, heure, statut et crédits, mais pas ce que vous avez envoyé) est conservé pendant 30 jours sans compte, ou tant que votre compte existe si vous êtes connecté.
Aucun compte nécessaire
10 par minute et 50 par jour gratuitement.
Rendu dans un vrai navigateur
Chromium sans interface (headless), le même moteur que l'API.
Supprimés automatiquement
Les résultats de l'outil web sont supprimés après 10 minutes.
Confidentialité : ce que vous envoyez sert uniquement à créer ce fichier. Ce que vous envoyez est supprimé à la fin de la tâche, y compris de l'historique de la tâche, et le résultat est supprimé après 10 minutes. Voir la politique de confidentialité.
Faites la même chose depuis votre code
La même requête, construite à partir de l'entrée et des options ci-dessus. Créez un compte pour obtenir une clé API.
curl -X POST https://api.aiipworld.com/v1/render \
-H "Authorization: Bearer $AIIPWORLD_API_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"","output":"pdf","options":{}}'
# returns {"job_id": "...", "status": "queued"}; then poll:
curl https://api.aiipworld.com/v1/jobs/JOB_ID -H "Authorization: Bearer $AIIPWORLD_API_KEY"Lots
L'outil web traite 1 document à la fois. L'API prend une requête par document, vous pouvez donc automatiser autant de requêtes que votre formule le permet.
Plus de contrôle
La capture de la page entière (full_page), le recadrage sur une zone, les en-têtes de requête et un user agent personnalisé sont des options de l'API. Voir la documentation.
Conservation
Les résultats des outils web sont conservés 10 minutes ; les résultats gratuits de l'API 1 jour ; les résultats de Starter et Pro 7 jours ; Business et Scale 30 jours. L'outil web permet 10 conversions par minute et 50 par jour et par visiteur.
En une phrase
Un outil gratuit en ligne qui crée un PNG de 1200 x 630 px avec votre titre et votre sous-titre, dimensionné pour l'image d'aperçu affichée lorsqu'un lien est partagé.
Points clés
- Champs : titre (jusqu'à 120 caractères), sous-titre (jusqu'à 200), nom du site (jusqu'à 60), couleurs du dégradé, du texte et d'accent, alignement à gauche ou au centre.
- Les titres longs sont réduits pour tenir et coupés après quatre lignes ; le sous-titre est coupé après trois. L'import d'un logo ou d'une image d'arrière-plan n'est pas pris en charge.
- Sortie : PNG, 1200 x 630 px.
- Gratuit sans compte : jusqu'à 10 conversions par minute et 50 par jour et par visiteur, sans filigrane. Connecté, chaque rendu coûte 1 crédit (100 crédits gratuits chaque mois).
- Les fichiers sont supprimés automatiquement : 10 minutes après la conversion sans compte, 1 jour avec un compte gratuit.
- Les développeurs peuvent effectuer le même rendu avec POST https://api.aiipworld.com/v1/render et une clé API (voir la page API de capture d'écran).
Sources
Dernière vérification:
Fonctionnement
- Saisissez le titre, un sous-titre facultatif et le nom de votre site.
- Choisissez les couleurs du dégradé d'arrière-plan, du texte et d'accent, ainsi que l'alignement.
- Vérifiez l'aperçu, puis cliquez sur « Créer l'image ».
- Téléchargez le PNG, importez-le sur votre site et faites pointer la balise og:image de votre page vers ce fichier.
Exemple de résultat
Ce qu'est une image open graph (Open Graph)
Une image open graph est l'image qui s'affiche dans l'aperçu d'un lien lorsque votre page est partagée. Les applications de messagerie, les réseaux sociaux et d'autres sites l'utilisent comme carte d'aperçu. Vous la déclarez avec une balise meta og:image. Ce générateur d'image open graph crée un PNG de 1200 x 630 pour cette balise.
Taille et conseils de mise en forme
Utilisez 1200 x 630 pixels, une taille couramment employée pour les images d'aperçu de lien et les images de partage sur les réseaux sociaux. Gardez un titre court. Utilisez un fort contraste entre le texte et l'arrière-plan. Laissez un peu d'espace autour du texte pour qu'il ne soit pas trop près du bord.
Ajouter l'image à votre page
Importez le PNG à une adresse publique de votre site, puis faites pointer la balise og:image vers cette adresse. Vérifiez l'aperçu du lien avant de le partager largement.
Titres longs et autres langues
Le titre se réduit à mesure qu'il s'allonge, et il s'arrête après quatre lignes. Le sous-titre s'arrête après trois lignes. Le texte chinois, japonais et coréen s'affiche, de même que les emoji. Vérifiez l'aperçu après avoir saisi un texte long.
Image OG dynamique pour chaque page (API)
Une image OG dynamique est créée à partir des données propres à la page, comme son titre, au lieu d'un seul fichier partagé par tout le site. Pour en créer une pour chaque page, envoyez le HTML de chaque page à l'API avec une fenêtre d'affichage de 1200 x 630 et une sortie au format png :
curl -X POST https://api.aiipworld.com/v1/render \
-H "Authorization: Bearer $AIIPWORLD_API_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"<body style=\"margin:0;width:1200px;height:630px;background:#312e81;color:#fff;font:700 64px sans-serif;display:flex;align-items:center;padding:0 80px;box-sizing:border-box\">How we cut build times in half</body>","output":"png","options":{"viewport":{"width":1200,"height":630}}}'
# returns {"job_id": "...", "status": "queued"}; then poll:
curl https://api.aiipworld.com/v1/jobs/JOB_ID -H "Authorization: Bearer $AIIPWORLD_API_KEY"L'API est asynchrone : la première réponse est un job_id, et vous interrogez la tâche jusqu'à ce qu'elle réussisse ou échoue. Téléchargez le résultat à partir du lien présent dans la réponse et enregistrez-le dans votre propre stockage. Le lien est de courte durée et les résultats sont supprimés après un délai défini. Ne pointez donc pas og:image vers l'API elle-même. Générez l'image au moment de la publication de la page, ou la première fois qu'elle est nécessaire, puis servez votre copie enregistrée.
Les webhooks ne sont pas encore disponibles et il n'existe pas d'endpoint par lots : envoyez donc une requête par image. Un rendu simple coûte 1 crédit. La page de l'API de capture d'écran répertorie toutes les options.
Créer l'image avec cet outil
Ce générateur d'image open graph prend un titre, un sous-titre et le nom de votre site, puis les dessine sur un dégradé dans un PNG de 1200 x 630. Choisissez les couleurs du dégradé d'arrière-plan, la couleur du texte, une couleur d'accent et l'alignement. Vérifiez l'aperçu avant de cliquer sur « Créer l'image ».
L'outil n'héberge pas le fichier à votre place. Téléchargez le PNG, importez-le à une adresse publique de votre site, puis ajoutez cette adresse à votre page. Gardez un titre court pour que le texte reste lisible.
Images de partage social et carte Twitter
Si vous avez recherché un générateur d'image de partage social, cet outil crée une seule image pour une seule page : un PNG de 1200 x 630 que vous référencez dans les balises meta de la page.
Si vous cherchez un générateur de carte Twitter, sachez qu'une carte Twitter est le nom de la carte d'aperçu qu'un lien peut afficher sur ce réseau. Le PNG est du même type, et vous pouvez le référencer dans les balises meta de votre page. Placez son adresse publique dans la balise og:image, et dans une balise twitter:image si votre page en utilise une.
Exemples d'images open graph et points communs
Les exemples d'images open graph ont généralement quelques traits communs : un titre court qui reste lisible quand l'aperçu est petit, un sous-titre discret et un fort contraste entre le texte et l'arrière-plan. Le générateur propose des champs pour ces mêmes éléments : un titre, un sous-titre et des couleurs.
On recherche aussi opengraph images en un seul mot. Le fichier est le même PNG de 1200 x 630 px. Si vous voulez un générateur d'image de carte Twitter, le PNG de cet outil convient aussi : référencez-le dans une balise twitter:image si votre page en utilise une.
Questions
Quelle est la taille de l'image ?
1200 x 630 pixels, une taille couramment employée pour les images d'aperçu de lien. Vérifiez les exigences des plateformes qui vous intéressent.
Comment utiliser l'image sur mon site ?
Importez le PNG à un emplacement public de votre site et ajoutez une balise meta dans l'en-tête de la page, par exemple <meta property="og:image" content="https://aiipworld.com/og.png">. Les URL absolues sont attendues.
Cela fonctionne-t-il avec un texte non anglais et des emoji ?
Le serveur de rendu dispose des polices Noto, y compris pour le chinois, le japonais et le coréen, ainsi que des emoji en couleur : ces caractères s'affichent donc. Nous avons testé le chinois, le japonais, les lettres latines accentuées et un emoji.
Que se passe-t-il avec un titre très long ?
Le titre devient plus petit à mesure qu'il s'allonge, et il est coupé après quatre lignes. Le sous-titre est coupé après trois lignes. Un titre court reste plus grand et plus facile à lire.
Puis-je ajouter un logo ou une image d'arrière-plan ?
Pas dans cet outil. Avec l'API, vous pouvez envoyer votre propre HTML, y compris des images, et obtenir le même type de PNG.
Puis-je en créer une pour chaque page de mon site ?
Oui, avec l'API : générez le HTML de chaque page dans votre code et demandez un PNG en 1200 x 630. La section de code présente la requête.
Combien de temps l'image est-elle conservée ?
Les résultats de l'outil en ligne sont supprimés après 10 minutes. Téléchargez-la et hébergez-la vous-même.
Qu'est-ce qu'une image open graph ?
C'est une image que les aperçus de liens peuvent afficher lorsqu'une personne partage une page de votre site. Vous la déclarez avec la balise meta og:image dans l'en-tête de la page. L'image de cet outil est un PNG de 1200 x 630.
Ai-je besoin d'une image spécifique à Twitter ?
Pas toujours. Vous pouvez ajouter une balise twitter:image pour les cartes Twitter, et beaucoup de sites la font pointer vers le même fichier que og:image. Consultez la documentation de chaque plateforme pour connaître les balises qu'elle lit.
Pourquoi l'ancienne image s'affiche-t-elle encore après que je l'ai modifiée ?
Les plateformes gardent leur propre copie d'un aperçu pendant un certain temps, si bien que l'ancienne image peut rester après l'import d'une nouvelle. Consultez la documentation de la plateforme pour savoir comment actualiser l'aperçu.
Le générateur d'image open graph est-il gratuit ?
Oui. L'outil en ligne est gratuit et ne nécessite pas de compte. Une utilisation anonyme demande une courte vérification de sécurité, qu'un compte connecté évite. Les résultats sont supprimés après 10 minutes, téléchargez donc le PNG à temps.
Puis-je utiliser le PNG sur plusieurs pages ?
Oui. Le fichier est un PNG ordinaire : vous pouvez faire pointer les balises meta de plusieurs pages vers lui. Vous pouvez aussi créer une image distincte pour chaque page, avec son propre titre, à l'aide du même outil.
Comment créer une image open graph dynamique pour chaque page ?
Créez un petit modèle HTML, renseignez le titre de chaque page et envoyez-le à POST /v1/render avec une fenêtre d'affichage de 1200 x 630 et une sortie en png. Interrogez la tâche, téléchargez le PNG et enregistrez-le avec votre page. Faites pointer la balise og:image de la page vers votre fichier enregistré, et non vers l'API, car le lien de téléchargement est de courte durée.
Besoin de ceci dans votre application ou en masse ?
Cet outil fonctionne sur l'API de rendu, donc le même image représente une seule requête HTTP depuis votre code. Un compte gratuit inclut 100 crédits par mois.