# Image open graph

> 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é.

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.

## 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

- [The Open Graph protocol](https://ogp.me/)
- [W3C: Portable Network Graphics (PNG) Specification](https://www.w3.org/TR/png-3/)

Dernière vérification: 2026-10-15

## Fonctionnement

1. Saisissez le titre, un sous-titre facultatif et le nom de votre site.
2. Choisissez les couleurs du dégradé d'arrière-plan, du texte et d'accent, ainsi que l'alignement.
3. Vérifiez l'aperçu, puis cliquez sur « Créer l'image ».
4. Téléchargez le PNG, importez-le sur votre site et faites pointer la balise og:image de votre page vers ce fichier.

## 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 :

```bash
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.

## Liées

- [Convertisseur HTML en PNG](https://aiipworld.com/fr/tools/html-en-png/index.md)
- [Outil de capture d'écran site web](https://aiipworld.com/fr/tools/capture-d-ecran-site-web/index.md)
- [Capture d'écran défilante](https://aiipworld.com/fr/tools/capture-d-ecran-defilante/index.md)
- [Générateur de texte en PNG](https://aiipworld.com/fr/tools/texte-en-png/index.md)
- [Code en image](https://aiipworld.com/fr/tools/code-en-image/index.md)
- [Maquette site web](https://aiipworld.com/fr/tools/maquette-site-web/index.md)
- [App store screenshot generator](https://aiipworld.com/fr/tools/app-store-screenshot-generator/index.md)
- [Convertir HTML en JPG](https://aiipworld.com/fr/tools/html-en-jpg/index.md)

Page : https://aiipworld.com/fr/tools/image-open-graph/