OneTaskPublished
Open Graph images that look right everywhere
When someone shares your page on Slack, LinkedIn, WhatsApp or X, the preview card is built from a few meta tags in the page head. Get them wrong and the link shows a cropped logo and the wrong title; get them right and the preview does the selling for you. It is about an hour's work per site, done once.
The tags
The Open Graph protocol is a handful of <meta property="og:..."> tags. The ones that matter:
| Tag | What it does |
|---|---|
og:title |
The card headline. Keep it under about 60 characters or it truncates. |
og:description |
The line under the headline. Around 110–160 characters. |
og:image |
Absolute URL of the preview image. |
og:url |
Canonical URL of the page, so shares of tracked or trailing-slash variants collapse together. |
og:type |
website for most pages, article for posts. |
X reads Open Graph tags but also has its own: twitter:card set to summary_large_image is what makes the image display full width rather than as a thumbnail. The Open Graph generator produces the full block from a form, including the Twitter tags and the image dimensions tags that let platforms lay the card out before the image loads.
The image
Use 1200 × 630 pixels. That is the ratio (1.91:1) every major platform expects, and it is large enough that nothing upscales. Keep the important content in the central 1200 × 600, because some crops shave the edges, and avoid placing text within about 40px of any edge.
Keep the file under 300 KB. Platforms fetch it on every share and some have a size cap beyond which they silently drop it. A JPG at quality 80, or a PNG for flat graphics with text, is usually right. The OG image generator builds a correctly sized image with a title, background and logo in the browser, and the image resizer will crop an existing photo to the exact dimensions.
One image per page is the ideal. If that is too much work, one strong site-wide image is far better than none, which is what most sites ship.
Check it before you post
Every platform caches previews, some for weeks, so the first share of a page is the one that sticks. Check first. The Twitter card preview shows how the large-image card will render, and the meta tag checker reads a page's head and lists what is set, what is missing and what is too long. While you are there, the SERP preview shows the same title and description as Google will render them, which is worth checking because the Open Graph title and the HTML title do not have to match and often should not.
The common failures
- Relative image URL.
og:imagemust be absolute,https://included. Relative paths work in your browser and nowhere else. - Image behind a redirect or a login. The crawler follows at most one redirect and cannot log in.
- Blocked by robots.txt. If the image path is disallowed the platform will not fetch it.
- Changed image, same URL. Caches key on the URL. Add a query string (
?v=2) when you replace an image. - Description copied from the page title. The card then says the same thing twice.
The short version
Five tags, one 1200 × 630 image under 300 KB, absolute URLs throughout, and a preview check before the first share. After that it looks after itself.