An OG image (Open Graph image) is the picture that a social network or a chat app shows when someone shares a link to your page. You set it with one meta tag, og:image, in the head of the page.
X, Facebook, LinkedIn, Slack, Discord, WhatsApp, and iMessage all read this tag. Without it, the link preview has no image, or the platform picks an image from the page that you did not choose.
What does OG image mean?
OG is short for Open Graph. Facebook published the Open Graph protocol in 2010. It is a set of meta tags that describe a page: the title, the type, the URL, and the image. Other platforms started to read the same tags, and it became the standard for link previews.
The OG image is the image that the og:image tag points to. People also call it a social preview image, a link preview image, a share image, a social card, or a Twitter card image. They all mean the same file.
What the tag looks like
<meta property="og:image" content="https://example.com/og/launch.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Acme launch week: five features in five days" />The full rules are in the og:image meta tag guide. For the other tags, see the list of Open Graph tags.
What size is an OG image?
Use 1200×630 pixels. That is a ratio of 1.91:1. Save it as PNG or JPEG and keep the file below 1 MB. This one size works on all large platforms.
The OG image size guide has the limits for each platform and the safe zone for text.
Why an OG image matters
- It makes the link larger. A preview with an image takes much more space in a feed than a line of blue text.
- It says what the page is before the click. A reader decides in a second. The image and the title do that work.
- It keeps your brand under your control. If you do not set an image, the platform can show a cookie banner, an avatar, or nothing.
OG image examples
The fastest way to learn what works is to look at cards from sites that ship them well. The OG image gallery has more than 300 real examples from live startups, sorted by category: SaaS, design, ecommerce, and more.
Good cards have the same properties:
- One short title in large type. It must be readable when the card is 300 pixels wide.
- One idea. The page title, a product screenshot, or an illustration. Not all three.
- A logo or a domain, so that people know who speaks.
- High contrast between text and background.
- Space at the edges. Some apps crop the image.
How to add an OG image to your site
- Make the image. Use the free OG image generator, or copy one of the open-source templates if you want one image for each page.
- Upload it. The image needs a public https URL.
- Add the meta tags to the head of the page. Use the full URL of the image.
- Test the page with the OG image checker.
OG image and Twitter card image
X has its own tag, twitter:image. You do not need it. When it is missing, X uses og:image. You do need one X tag to get the large layout:
<meta name="twitter:card" content="summary_large_image" />Questions
Is an OG image a ranking factor for SEO?
No. Search engines do not rank a page higher because it has an OG image. The image changes how many people click your link when someone shares it. More clicks and more shares bring visitors and links, and those help.
Do I need a different OG image for each page?
Set one default image for the site first. Then make specific images for the pages that people share most: the home page, blog posts, and product pages. If you have many pages, generate the images in code. The Next.js OG image guide shows how.
Why does my OG image not show?
The usual causes are a relative URL, an image that is too small, or tags that JavaScript adds after the page loads. Run the checker. It names the problem.