How to create an OG image that looks good when shared
A practical guide to Open Graph images: dimensions, safe typography, dynamic generation, metadata and the checks that prevent broken social previews.
At a glance
- Design for a 1200×630 canvas and keep the title inside a generous safe area.
- Generate a deterministic image from the page title, category and brand—not a random screenshot.
- Verify the final `og:image` URL, content type, dimensions and cache behaviour.
What an OG image needs to do
An Open Graph image is the visual fallback for a shared URL. It should identify the page quickly at a small size, preserve readable contrast and remain useful when the title is truncated by the platform showing it.
Use one stable template with a clear title zone, a small category or brand mark and enough empty space around the edges. A busy screenshot is rarely as useful as a simple page-specific composition.
Static versus generated images
Static images work well for a small set of evergreen pages. Generated images scale better for resources and articles because the title, category and update date can be derived from the same content record. The generator must still be deterministic: the same URL should produce the same image until its content changes.
Launch checklist
Test the page itself and the image endpoint.
- The page has one canonical URL and a matching `og:url`.
- The image responds with HTTP 200 and an image content type.
- The image is 1200×630 or another deliberately supported size.
- The title is readable on mobile-sized previews.
- The image URL is absolute and does not depend on a preview host.
- You re-fetch the URL after changing the template because social caches persist.