DEV3 Technologies home

Design tool

OG Image Generator

Design a 1200 x 630 Open Graph share image from six templates with your title, logo and colours, download the PNG and copy the meta tags.

Free, no sign-up. Runs in your browser; nothing is uploaded.

Template

Content

Style

Alignment

Preview (1200 x 630)

Add it to your page

<meta property="og:title" content="How we cut our page load time by 60 percent">
<meta property="og:description" content="A practical checklist for faster websites">
<meta property="og:image" content="https://example.com/og/post.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/og/post.png">

How to use the og image generator

A share image that gets clicked

When someone pastes your link into a chat or a social post, the preview image is the first thing they see. A clear, branded Open Graph image with a readable headline can lift click-through noticeably compared with a blank link or a random crop.

Make yours in a minute

  1. Choose one of the six templates: Classic, Gradient, Split, Dark tech, Minimal or Bold. Selecting a template also loads its colour set.
  2. Write the title. It is the star of the card, so keep it short and specific. The tool shrinks the font to fit and wraps lines for you.
  3. Add an optional subtitle, your site or author line and a small tag such as Guide, News or Case study.
  4. Upload your logo. PNG or SVG with a transparent background looks best. Set its height with the slider.
  5. Choose a font and alignment, then adjust any colours to match your brand.
  6. Press Download PNG. The file is exactly 1200 x 630 pixels.

Add it to your website

Upload the image, then paste the generated meta tags into the head of the page. Fill in the full public URL of the uploaded file in the box and the tags update. The image tags should use an absolute address that starts with https.

Design tips

  • Use strong contrast between the title and its background. Test by looking at the preview at thumbnail size.
  • Keep text inside a safe margin of about 60 pixels. Some apps round the corners or crop a few pixels.
  • Avoid tiny text. At small preview sizes anything under about 28 pixels becomes unreadable.
  • Use one image per page type, such as a template for blog posts, so your links look consistent.

Privacy

The card is drawn in your browser. Your title and logo are not uploaded. Fonts load from Google Fonts for the style options.

Frequently asked questions

What size should an Open Graph image be?

1200 x 630 pixels, a ratio of about 1.91:1. It works for Facebook, LinkedIn, Slack, WhatsApp, Discord and the large summary card on X. Keep the file under about 5 MB, ideally under 1 MB.

Where do I put the image and the tags?

Upload the PNG to your site, then add the og:image and twitter:card tags to the head of the page. The generator writes the tags for you, using the URL you enter. Remember it must be a full absolute URL.

Why does my old image still show on social networks?

Platforms cache previews. Use a new file name, or refresh the cache with the platform debugger tools, such as the Facebook Sharing Debugger or the LinkedIn Post Inspector.

How much text fits?

Titles up to about 80 characters look best. Longer titles shrink automatically, and very long ones are shortened with an ellipsis. Keep important words away from the extreme edges, since some apps crop slightly.

Does my logo get uploaded?

No. The logo is read by your browser and drawn onto the canvas locally. Nothing is sent anywhere.