OG image definition
An OG image is the preview picture shown when a link is shared on social media or in a messaging app. The page sets it with the Open Graph og:image meta tag, and the recommended size is 1200 × 630 pixels.
OG stands for Open Graph, a protocol Facebook introduced in 2010 that lets a web page describe itself to any service that fetches it. Paste a link into LinkedIn, Slack or WhatsApp and the service downloads the page, reads its Open Graph tags and builds a card from the title, description and image. The image takes up most of that card, so it largely decides whether the link looks worth opening.
Without an og:image, each platform improvises. Some grab an arbitrary image from the page, others show a text-only card.
What size should an OG image be?
1200 × 630 pixels, which is an aspect ratio of about 1.91:1. That's Facebook's recommendation for sharp display on high-resolution screens, and LinkedIn and most messaging apps handle the same shape well. Facebook accepts files up to 8 MB. X's large summary card uses a 2:1 ratio and caps images at 5 MB.
Some apps show a smaller, cropped thumbnail instead of the full card, so keep the headline and logo near the centre and leave the edges for background.
Which meta tags does an OG image need?
Only og:image is required. Its value is an absolute URL to the image, https included. Three more tags are worth adding:
- og:image:width and og:image:height, so Facebook can render the image the first time the link is shared instead of processing it in the background
- og:image:alt, a description of the image for screen reader users. The Open Graph spec says any page that sets og:image should set this too.
X reads its own twitter:image tag first and falls back to og:image, so one image covers both. For the large card you still need twitter:card set to summary_large_image.
How do you make OG images for a whole site?
Designing one per page in Figma works until the first blog post somebody forgot to make an image for. Generating them is more reliable. In Next.js, an opengraph-image file in a route folder sets the image for that route, and when that file is code it can draw the image from a JSX template with ImageResponse. This site uses one OG route that takes the page title and renders the card on request, so a new post has its preview as soon as it's published.
Webflow and Framer both let you set a social preview image per page, and on Webflow CMS template pages it can come from an image field in the collection.
Why isn't my OG image updating?
Platforms cache link previews. After changing the image, run the URL through Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a fresh fetch. Changing the image URL itself, for example with a version query parameter, also gets around a stale cache on platforms that offer no such tool.
Related terms
- Alt textAlt text is a short written description of an image, stored in the alt attribute of an HTML img element. Screen readers read it aloud and browsers show it when the image fails to load. Good alt text says what the image means in that spot on the page.
- TypographyTypography is the craft of choosing and arranging type so text is easy to read and its hierarchy is obvious. It covers typeface, size, line height, line length and spacing. On a website it also covers how fonts load and how text scales between screen sizes.
- APIAn API (application programming interface) is a defined way for one piece of software to request data or actions from another. On the web it usually means sending an HTTP request to a URL and getting a structured response back, typically JSON.