Open Graph Image Size and OG Tags: The Complete Guide
When a link is pasted into Facebook, LinkedIn, X, Telegram, Slack or WhatsApp, the platform does not take a screenshot of the page. Its crawler downloads the HTML, reads a handful of Open Graph tags in the <head> and builds a preview card from them: a title, a short description and an image. If the tags are missing or wrong, the platform guesses, and the guess is usually a cropped logo or no picture at all. This guide covers which tags you need, what size the OG image should be, and how to make platforms forget an old preview.
The short answer: OG image size
Use one image of 1200×630 pixels (aspect ratio 1.91:1) in JPG or PNG, and keep the file reasonably light. That single image works as a large card on Facebook, LinkedIn and X, and messengers scale it down for their smaller previews. Keep the headline and logo inside the central area, because some apps crop the sides or show a square thumbnail.
| Platform | What its documentation recommends |
|---|---|
| At least 1200×630 for a large card; images under 600×315 get the small layout; absolute minimum 200×200; file up to 8 MB | |
| 1.91:1, recommended 1200×627 | |
X, summary_large_image | 2:1, minimum 300×157, file under 5 MB; JPG, PNG, WebP or GIF (first frame only) |
X, summary | 1:1 thumbnail, minimum 144×144 |
The 2:1 ratio on X and 1.91:1 elsewhere are close enough that a 1200×630 image works for both: X trims a few pixels at the top and bottom. Platforms change their layouts from time to time, so treat the table as a starting point and check the current card in each network's own tool before a big launch.
Which Open Graph tags are required
The Open Graph protocol (ogp.me) defines four required properties: og:title, og:type, og:image and og:url. In practice you also want a description and the X card type. A complete set for an article looks like this:
<meta property="og:title" content="How to choose running shoes for flat feet"> <meta property="og:description" content="Five checks before you buy, from a physiotherapist."> <meta property="og:type" content="article"> <meta property="og:url" content="https://example.com/blog/running-shoes-flat-feet"> <meta property="og:image" content="https://example.com/img/og/running-shoes-1200x630.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Runner's feet on a treadmill in neutral shoes"> <meta property="og:site_name" content="Example Running"> <meta property="og:locale" content="en_US"> <meta name="twitter:card" content="summary_large_image">
| Tag | Status | What to watch |
|---|---|---|
og:title | Required | Written for a feed: no " | Brand" suffix needed, since the card shows the domain anyway |
og:type | Required | website for the home page and sections, article for posts |
og:image | Required | Absolute https:// URL that a crawler can download without cookies or login |
og:url | Required | The canonical URL of this page; Facebook builds the card from the page it points to |
og:description | Recommended | One or two sentences; some apps show only the first line |
og:image:width, og:image:height | Recommended | Let Facebook render the card on the first share without waiting for the image |
og:image:alt | Recommended | Text description of the image for screen readers |
og:site_name, og:locale | Optional | Brand name and language, such as en_US or pl_PL |
Open Graph tags use the property attribute, X tags use name. Many parsers accept both, but sticking to the convention avoids surprises. If you do not want to write the markup by hand, the meta tag generator produces the Open Graph and X block together with the title and description.
twitter:card and the fallbacks
X reads its own twitter:* tags first. When twitter:title, twitter:description or twitter:image are missing, it falls back to og:title, og:description and og:image. So a page with full Open Graph needs only one extra line: twitter:card, set to summary_large_image for a big picture or summary for a small square thumbnail. Add separate twitter:* tags only when you want a different text or picture on X.
LinkedIn, Telegram, Slack, Discord and WhatsApp work from Open Graph too. When a platform finds no OG tags at all, it may fall back to the <title>, the meta description and the first suitable image on the page — which is how shares end up showing a tracking pixel or a footer logo.
Why an absolute image URL matters
A relative path such as /img/cover.jpg works in a browser because the browser knows which page it is on. Crawlers do not reliably resolve it, and many will simply show a card without an image. Always write the full address with the protocol. Three related checks:
- No login, no cookies. The image must open in a private window. Images behind hotlink protection, a firewall challenge or a signed URL that expires break later shares.
- No JavaScript. Social crawlers generally do not execute scripts. If a single-page app sets meta tags on the client, the crawler sees the empty template. Render the tags on the server or prerender the pages.
- Crawler not blocked. A
Disallowin robots.txt or an aggressive bot filter returns an error page to the crawler, and the card is built from that.
How platforms cache previews, and how to refresh them
Each network scrapes a URL once and keeps the result for a while. After you fix the tags, your page is correct, but the old card keeps appearing until the network fetches the page again. The official ways to force that:
- Facebook (and links in Messenger and Instagram DMs): open the Sharing Debugger on developers.facebook.com, paste the URL and click Scrape Again. The debugger also lists the tags it read and any warnings.
- LinkedIn: run the URL through Post Inspector (linkedin.com/post-inspector). Inspecting the URL makes LinkedIn fetch it again.
- Telegram: send the link to the official bot @WebpageBot. It refreshes the preview Telegram stores for that URL; you may need to send it more than once if the first reply still shows the old card.
- X: there is currently no public tool to clear the cache. A common workaround is to share the URL with a harmless parameter, such as
?v=2, which X treats as a new address. - WhatsApp, Slack, Discord: no official refresh button that we know of. They pick up changes over time; a new URL parameter is again the practical workaround.
cover-v2.jpg) and update og:image.Common mistakes
- Same card on every page. A theme that outputs the home page title and logo everywhere makes every share look identical. Generate
og:title,og:descriptionandog:imageper page. - og:url pointing to the home page. Facebook treats
og:urlas canonical and shows the home page card for every article. - Duplicate tags. An SEO plugin and the theme both print
og:image. Usually the first one wins, and it may be the wrong one. - Text too small or too close to the edges. The card is often shown at a few hundred pixels wide on a phone; 20-pixel text becomes unreadable.
- Image too small. Below 600×315 Facebook switches to the small layout with a thumbnail on the side.
- Changes tested only in a browser. The browser shows the new page; the networks still have the old one. Always re-scrape.
How to check your tags
Paste the URL into the Open Graph debugger. It fetches the page from our server without running JavaScript — the same way social crawlers do — and shows approximate Facebook, X and LinkedIn cards, the list of found and missing tags, the real pixel size of the image and a warning about relative URLs. The previews are close to the real ones, but each network's current design and its cache have the final word.
Open Graph does not affect Google rankings: search snippets are built from the <title>, the meta description and the page content. Check that side separately with the meta tag analyzer and the SERP preview. For the details, read checking meta tags and the search snippet and snippet preview.