Where the downloaded file will live on your site.
<meta property="og:image" content="https://example.com/og-image.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image:alt" content="How to write meta descriptions that people click" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://example.com/og-image.png" />
Need the other tags? Build them with the Open Graph Generator, then test the live page with the Open Graph Checker.
How to use
Write the text
Fill in Title, Subtitle (optional) and Site name or label. The title shrinks to fit, very long titles are trimmed with an ellipsis after four lines, and the preview shows exactly what you'll get.
Style the image
Pick a Layout, a Colour theme and a Font, then adjust Text size, the colours and Background pattern. Add a Background photo and Logo if you like, and use the darken slider for readable text.
Download and add the tags
Check the share mockups, choose Size and Format, then press Download or All sizes (ZIP). Type the image's final address in Image URL for the meta tags and copy the tag block.
Why OG Image Generator
- Type a title and subtitle and get a 1200 x 630 share image with a live preview.
- Three layouts, six colour themes, patterns, text size, a background photo and logo.
- Facebook, X, LinkedIn and Slack or Discord mockups before you publish.
- PNG, JPG or WebP in four sizes or a custom size, and ready-to-copy og:image meta tags.
Open Graph image sizes by platform
One 1200 x 630 image covers the main networks, because they all read the same og:image tag. The differences are in how they crop and how small they show it. Keep the title away from the edges, since some apps trim the image to 2:1 or a square thumbnail. If you only make one file, make it 1200 x 630.
| Where it shows | Image to use | Notes |
|---|---|---|
| 1200 x 630 | At least 600 x 315 for a large preview | |
| 1200 x 627 or 1200 x 630 | Same shape, 1.91:1 | |
| X (summary_large_image) | 1200 x 630 | Shown close to 2:1, so edges may be trimmed |
| Slack, Discord, Teams | 1200 x 630 | Read from og:image |
| Messaging apps | 1200 x 630 | Often shown as a small thumbnail; keep text large |
Writing text that reads in a link preview
Share images are often shown at a third of their real size or smaller, next to the page title the network already prints. The text on the image should add to that, not repeat it word for word.
- Keep the title to a few words. Long titles shrink and become hard to read in a feed.
- Use strong contrast: light text on a dark background or the reverse. The darken slider helps with photos.
- Keep important text away from the edges, where some apps crop.
- Use the subtitle for one supporting detail, such as the topic or a date, not a second headline.
- Put your site name or logo on every image so shares are recognisable at a glance.
- Check the result on a phone-sized preview before publishing.
Adding the image and testing it
After downloading, upload the image to your site at a permanent address, ideally one that won't change when you edit the page. Type that address into Image URL for the meta tags, copy the block, and paste it into the page's head. The block includes og:image, its width and height, alt text from your title, and the twitter:card and twitter:image tags.
For the rest of the Open Graph tags, such as og:title, og:description and og:url, use the Open Graph Generator. Then run the live page through the Open Graph Checker to see how the preview looks and to catch a wrong image address before anyone shares the link. Networks cache previews, so if you replace the image later, give the new file a new name and rescrape the page with each network's debugging tool.