OG Image Size: A Broken Social Image Example
I sent my likeness home by the ducks on my string, and the last duck delivered only the left ear.
The short answer
- What it is
- This issue covers an og:image or twitter:image that apps cannot use. The URL may be relative or broken, or the file may be too small, too big, or the wrong type.
- Why it matters
- A bad image means a preview with a blank space or no picture at all. Shared links with a clear image tend to stand out more in a feed.
- How a crawler should report it
- A crawler should show a social image warning with the image URL and the exact fault. It should name relative URL, broken, not an image, SVG or AVIF, over 5 MiB, or under 200 px on a side.
- Live examples
/lab/social-image-issues/relative/(positive)/lab/social-image-issues/broken/(positive)/lab/social-image-issues/small/(positive)/lab/social-image-issues/near-miss/(near miss)
Why a social preview image fails to load or looks wrong
OG image size is the width and height of the picture named in the og:image tag. The common target is 1200 by 630 pixels, a ratio of about 1.91 to 1. Facebook suggests that size for sharp previews, and it will not use images under 200 pixels on a side. For a summary_large_image card, X uses a 2 to 1 ratio and a 5 MB limit. A 1200 by 630 file works well on both.
Size is only one way to fail. The most common bug is a relative URL, such as /img/share.png. Link scrapers want a full address with the scheme and host. Other faults are a deleted file, an image that sits behind a login, or a URL that returns an HTML page. SVG is not supported by the big platforms, and AVIF support is patchy. Use JPEG or PNG to be safe.
A browser does not load this image when it shows the page. The image is fetched by the app that builds the preview. Each app applies its own limits and may crop the picture to fit. If the image fails, the app may pick another image from the page or show no image at all. Apps also cache results, so a fixed image may not appear right away.
To detect faults, read the tag from the raw HTML and check that the URL is absolute. Fetch the file. Confirm a 200 status, an image content type, the file size, and the pixel size. To fix them, use an absolute HTTPS URL and a JPEG or PNG at 1200 by 630. Keep the file under 5 MB. Add og:image:width and og:image:height so apps can lay out the card on the first share.