Open Graph / Social Card Image Generator

How to use this tool

1. Enter your page title and optional subtitle or site name; you can add a local logo.
2. Choose a layout, system font, image size, and colors, then review the live preview.
3. Download the PNG at the selected dimensions and host it on a public HTTPS URL.
4. Add the public image URL to create and copy matching Open Graph and X card tags.

What is an Open Graph image?

The Open Graph protocol lets a web page specify the image shown when someone shares its link. The common default is 1200×630 pixels. This tool can also make X (1200×600), LinkedIn (1200×627), and square (1200×1200) images. The selected dimensions apply to both the preview and PNG download. Rendering happens in your browser, so your title, colors, and image are not sent to a server.

OG image specification

The Open Graph standard defines several tags that describe an image and its page:

• og:image is the publicly accessible image URL. A 1200×630 image is a common choice for link previews.
• og:image:alt provides alternative text for the image and helps people using assistive technology.
• og:image:type declares the image format, such as image/png or image/jpeg.
• og:image:width and og:image:height give the image dimensions to social scrapers.

Choose a size based on where the card will appear. Facebook, Discord, and Slack commonly use the default Open Graph size. A square image may suit a square placement, but social platforms can crop or resize previews, so check the result on the service where you plan to post.

Platform-specific dimensions

Design best practices

• Use large text: fine details and small type can disappear when the image is reduced to a feed thumbnail.
• Keep one focal point: a short headline and a clear visual hierarchy are easier to scan than a crowded composition.
• Include branding: add a site name or logo in a corner. Logos are processed locally and are not retained after the current page session.
• Check contrast: choose text and background colors that remain readable at smaller sizes.

How to add the OG image tag

Download the PNG and host it at a public absolute URL before adding tags to your HTML <head>. The tool can build tags using the selected dimensions and your title and subtitle. It does not upload or host the image.

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief description of the page." />
<meta property="og:image" content="https://example.com/og-image.png" />

The image URL must be absolute, including https://; social crawlers do not follow relative paths. Replace the example URL in the generated snippet with the URL where you host your PNG.

Layouts, fonts, and local logos

Choose a bottom-bar card, a two-color gradient, a split panel, or a centered text layout. Sans, serif, and monospace options use fonts already available on your device, so the generator does not download fonts from another service. Add a PNG, JPEG, or WebP logo up to 5 MB to place it beside an optional site name. The logo is decoded and drawn locally, is never uploaded, and is not saved in browser storage. Text, colors, the selected layout and size, and the public image URL are saved in this browser so the next visit can restore your draft.

For example, a blog can add its site name and a small logo, choose a centered title, then select the LinkedIn preset and download a 1200×627 PNG. The matching meta tag snippet includes those dimensions. If you share the image on several services, check each platform's crop and file-size limits: one image can be resized or cropped differently, and detailed text may be hard to read at thumbnail size.