Open Graph Social Card Image Generator

颜色开发人员图像

[iotools_open_graph_image_generator]

指导

Open Graph Social Card Image Generator

Design pixel-perfect social share images for Open Graph, Twitter Cards, LinkedIn, and Facebook directly in your browser. Type your title, description, and site name, pick a layout and theme, then download a PNG, JPG, or WebP at the exact dimensions each platform expects — no design tool or upload required.

如何使用

Pick a preset (1200×630 for Open Graph, 1024×512 for Twitter) or set custom width and height.
Type the title, description, and site name you want on the card.
Choose a layout (centered, left-aligned, or top-bar accent) and a theme (light, dark, brand color, or gradient).
Tweak typography — font family, title size, and description size — to match your brand.
点击下载 and save the PNG, JPG, or WebP for use as your og:image 或 twitter:image.

特征

Correct social dimensions – Presets for Open Graph (1200×630), Twitter Card (1024×512), LinkedIn, and Facebook.
Multiple layouts – Centered, left-aligned, and top-bar accent templates for different brand looks.
Light, dark, brand, and gradient themes – Switch backgrounds in one click or use your own brand color.
Auto-shrinking title – Long headlines wrap and resize so your card stays readable.
Live canvas preview – Every change re-renders instantly on a real HTML5 canvas — what you see is what you download.
PNG, JPG, and WebP export – Pick the format that fits your hosting and CDN.
完全在浏览器中运行 – No upload, no account, no watermark.

 常问问题

What is the Open Graph protocol?

Open Graph is a set of <meta> tags introduced by Facebook that lets a web page describe itself to social platforms. The most common tags are og:title, og:description，并且 og:image. When someone shares a link, the platform reads these tags and renders a rich card instead of a plain URL.
What image size should an og:image be?

The Open Graph specification recommends an aspect ratio of 1.91:1 with a minimum of 600×315 pixels. Most platforms render best at 1200×630, which keeps the card sharp on retina displays while staying under the 8 MB Facebook size limit. Twitter Cards typically use 1024×512 for the summary_large_image format.
Why do social platforms cache og:image URLs?

Platforms like Facebook, LinkedIn, and Slack fetch the og:image once and store it on their CDN to avoid hammering your origin every time the link is shared. That cache can persist for days or weeks. To force a refresh after updating an image, change the file URL or use the platform debugger (for example, the Facebook Sharing Debugger) to scrape the page again.
What is the difference between og:image and twitter:image?

og:image is part of the Open Graph protocol and is read by Facebook, LinkedIn, Slack, Discord, and most messaging apps. twitter:image belongs to Twitter Cards and is read by X (Twitter). If only og:image is present, X will fall back to it, so a single high-quality image often works for both — but providing both lets you optimize sizing for each platform.
Why does the title shrink automatically when it gets long?

Social cards have a fixed canvas, so a long headline that runs off the edge looks broken. The HTML5 Canvas API does not wrap text by itself, so the generator measures each word with ctx.measureText(), breaks the headline into lines, and reduces the font size in steps until the title fits within the safe area. This keeps every export legible without manual tweaking.