OG image generator
Open Graph image, 1200 × 630, PNG or JPG, no watermark
- Free
- No account required
Your browser draws the image. The text, logo and photo are not sent anywhere.
Content and style
Meta tags for <head>
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:type" content="image/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-image.png">Upload the downloaded file to your server, enter its URL above and paste the tags into the page <head>. Check the full Open Graph set with the Open Graph checker.
This OG image generator creates the 1200 × 630 pixel image that social networks and messaging apps show with a shared link. Type a title, add a logo or a background photo, pick colours and download a PNG or JPG. It also gives you the og:image and twitter:card meta tags to paste into your <head>. The image is drawn in your browser, and neither the text nor the files you add reach our server.
Why a link card shows no image
Size matters, but it is rarely the only cause. Meta recommends an image of at least 1200 × 630 pixels, as close to 1.91:1 as possible, and a file no larger than 8 MB. Anything under 600 × 315 is shown as a small thumbnail.
The most common reason for a missing image is the URL. og:image has to be a full address, ideally https, reachable without logging in. A relative path, an http URL or a file that needs a login ends in a card with no picture.
Every network crops differently. That is why text and logo stay inside an 80-pixel margin, and the safe area also shows the centre square: what survives a 1:1 crop.
Networks cache the card they fetched. After you change the image, the new one may appear only once you refresh it in that network's debugger or publish the file under a new URL.
One template per page type
Instead of designing each card, set a look per page type: article, product, tool. Change only the title. A shorter title on the card works better than the full page title: something read in a second in a feed, not in search results.
Meta for Developers, Images in link sharesHow to make an Open Graph image (og:image) for shared links
You design an OG image at 1200 × 630 px, publish it at a full https URL and point to it in the og:image tag. Five steps take you from a title to the card people see when the link is shared.
-
Type a short card title
The title on the image does not need to repeat the page title. A few words that read in a second in a feed are enough, and the full title appears below the image from og:title anyway.
-
Pick a template, colours and a logo
The Solid or Gradient template suits text alone, Photo suits a card with a background picture. If the text does not stand out from the background, the generator shows a contrast warning.
-
Show the safe area and check the crop
Show safe area marks the 80 px margin and the centre square that survives a 1:1 crop. Keep the logo and key words inside that square, because some networks crop the image.
-
Download the file and upload it to your server
Download a PNG or JPG. The generator draws the image in your browser, so the text, logo and photo never reach our server. You upload the file yourself, ideally under a name that includes the page or a version number.
-
Paste the tags into the head and check the card
Enter the URL where you will publish the file and fill in the alt text. Copy the og:image and twitter:card tags into the head section, then check the page with the Open Graph checker or the network’s debugger.
Examples of og:image tags and their mistakes
The markup that most often decides whether a card has an image.
<meta property="og:image" content="/img/og.png"><meta property="og:image"
content="https://example.com/img/og-pricing-v2.png">The Open Graph protocol defines og:image as an image URL, and a relative path often ends in a card without an image. A version number in the file name also makes it easier to replace the image in network caches.
<meta property="og:image" content="https://example.com/img/og-pricing-v2.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Pricing plans on a background with the company logo">
<meta name="twitter:card" content="summary_large_image">According to Meta, the dimension tags let the crawler render the image immediately, without downloading and processing the file first.
image: 1200 × 630 px (ratio about 1.905:1)
centre square: 630 × 630 px
from x = 285 px to x = 915 pxThis is what remains when a network crops the card to 1:1. Place the logo and the title inside it.
Common Open Graph image mistakes
-
An image behind a login or at an http URL
A social network crawler fetches the file as an anonymous visitor. If the file needs a login, is blocked or is served over http, the card usually appears without an image.
-
An image that is too small
According to Meta, an image smaller than 600 × 315 px appears as a small thumbnail next to the text. LinkedIn shows a thumbnail when the image is less than 401 px wide.
-
Text right at the edge
Every network crops the card in its own way, and some messaging apps show a smaller section. Text a few pixels from the edge can then get cut off, which is why the generator keeps an 80 px margin.
-
One image for the whole site
The same graphic on an article, the pricing page and a tool looks identical everywhere, so people cannot tell the links apart. A template per page type with a different title gives a better card at no extra cost.
-
Missing og:image:alt
Without this tag the image on the card has no text description. The generator has a separate field for it. The Open Graph specification defines og:image:alt as a description of what is in the image.
Open Graph image sizes and requirements
| Value | What it means | Source |
|---|---|---|
| 1200 × 630 px | The size Meta recommends so the image displays well on high resolution screens, with an aspect ratio as close to 1.91:1 as possible. | Meta for Developers, Images in link shares |
| 600 × 315 px | The minimum, according to Meta, for a link to show with a large image. Smaller images appear much smaller. | Meta for Developers, Images in link shares |
| 8 MB | Maximum OG image file size according to Meta. | Meta for Developers, Images in link shares |
| 1200 × 627 px | Minimum link preview image dimensions according to LinkedIn, with a recommended ratio of 1.91:1 and a file of up to 5 MB. | LinkedIn Help, link previews |
| 4 | Number of properties the Open Graph protocol requires: og:title, og:type, og:image and og:url. | The Open Graph protocol |
Sources checked:
Four rules
- 1.911200 × 630
- The recommended size and ratio for a shared link image.
- httpsFull URL
- Give og:image as an absolute https URL, not a relative path.
- 80Margin
- Keep text and logo away from the edges, because networks crop.
- 8 MBFile limit
- Meta's ceiling. For speed, keep the file far smaller.
Meta recommends at least 1200 × 630 pixels and an aspect ratio as close to 1.91:1 as possible, so the image shows in full without cropping. The minimum for a large card is 600 × 315 pixels, and the file must not exceed 8 MB. This generator creates exactly 1200 × 630.
Upload the file to your server and add <meta property="og:image" content="https://your-domain/path/image.png"> to the page <head>. It is worth adding og:image:width, og:image:height, og:image:alt and twitter:card set to summary_large_image as well. The generator gives you the full set under the preview.
PNG keeps text and logo edges sharp, so it usually suits text-only cards on a solid background. JPG gives a smaller file when there is a photo behind the text. Social networks accept both.
Networks cache the card they fetched first. Force a refresh in that network's debugger, or publish the new file under a different URL, for example with a version number in the name.
Usually not. When twitter:image is missing, X uses og:image. The twitter:card tag set to summary_large_image tells it to show a large image card instead of a small thumbnail.
No. Your browser draws the image on a canvas element. The text, logo and photo stay on your device, and you save the downloaded file yourself.
LinkedIn does not need a separate image, because its requirements match Meta’s recommendations. LinkedIn lists a minimum of 1200 × 627 px and a 1.91:1 ratio, and the 1200 × 630 px file from this generator meets both, as long as it stays under 5 MB.
The og:image:alt tag describes what is in the image, which is how the Open Graph specification defines it. If the image is a title on a background, use that title and the brand name, for example the article title and the company logo.
What else might come in handy
File or code ready? Check the result on the live page
Indexability, metadata and structure, with priorities and a client report.