Générateur OG Image& Aperçu social
Rendu Canvas côté client. Créez des images de prévisualisation 1200x630 avec des modèles personnalisables.
Style de modèle
Couleur d'accent
Taille de police
Balises HTML Meta
Téléchargez l'image sur votre serveur, puis utilisez l'URL dans ces balises
<!-- Open Graph --> <meta property="og:image" content="https://yoursite.com/og.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://yoursite.com/og.png" />
Aperçu · 1200 x 630
Cet outil a-t-il résolu votre problème ?
Exemples de code
HTML
<!-- Open Graph meta tags --> <meta property="og:title" content="Your Title" /> <meta property="og:description" content="Description" /> <meta property="og:image" content="https://example.com/og.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:type" content="article" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://example.com/og.png" />
Next.js (App Router)
// app/page.tsx
export const metadata: Metadata = {
openGraph: {
title: "My Page Title",
description: "Page description",
images: [
{
url: "https://example.com/og.png",
width: 1200,
height: 630,
alt: "Preview image",
},
],
},
twitter: {
card: "summary_large_image",
},
};React (Helmet)
import { Helmet } from "react-helmet-async";
function SEOHead({ title, image }) {
return (
<Helmet>
<meta property="og:title" content={title} />
<meta property="og:image" content={image} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
name="twitter:card"
content="summary_large_image"
/>
</Helmet>
);
}WordPress (functions.php)
// Add OG Image to WordPress
function add_og_image() {
if (is_singular()) {
$image = get_the_post_thumbnail_url(
get_the_ID(), 'full'
);
if ($image) {
echo '<meta property="og:image"
content="' . esc_url($image) . '" />';
echo '<meta property="og:image:width"
content="1200" />';
echo '<meta property="og:image:height"
content="630" />';
}
}
}
add_action('wp_head', 'add_og_image');Questions fréquentes
What is an OG Image and why do I need one?
An OG Image (Open Graph Image) is the preview image displayed when a webpage is shared on social media. When you post a link on Twitter, Facebook, LinkedIn, or messaging apps, the platform fetches the og:image meta tag to create a visual card. A well-designed OG image significantly boosts click-through rates and is a key element of SEO and social media marketing.
What is the standard OG Image size?
The recommended size is 1200x630 pixels (aspect ratio 1.91:1), which is optimal for Facebook and most social platforms. Twitter's summary_large_image card also uses this size. LinkedIn recommends 1200x627, which is close enough to be interchangeable. This tool generates 1200x630 images compatible with all major platforms.
Are the generated images uploaded to any server?
No. Images are rendered entirely in your browser using the Canvas API with no server-side processing. When you click download, the image saves directly to your device. Your titles, descriptions, and other content are never transmitted or stored anywhere.
How do I add the generated OG Image to my website?
Upload the downloaded image to your web server or CDN, then add meta tags in your HTML <head>: <meta property="og:image" content="IMAGE_URL" />. Also add og:image:width and og:image:height for faster parsing. In Next.js, set openGraph.images in generateMetadata. In WordPress, most SEO plugins like Yoast handle this automatically.
Why doesn't my OG Image update after I change it?
Social platforms cache OG images. Use Facebook's Sharing Debugger (click 'Scrape Again'), Twitter's Card Validator, or LinkedIn's Post Inspector to force a cache refresh. Adding a version parameter to the image URL (e.g., ?v=2) also helps bypass caching.
What template styles are available?
Four templates are available: Gradient (ideal for tech blogs), Dark (for developer content), Minimal (for business documents), and Split (for product showcases). Each template supports custom accent colors (10 presets + custom color picker) and 3 font size options, creating hundreds of possible visual combinations.