Workflows
How to Prepare Images for Open Graph Cards
Open Graph images are small pieces of content design, not just technical tags, so they need the right frame, file weight, and message clarity.
Design for the smallest likely card first
An Open Graph image has to survive an external card renderer, crop, and small preview while still representing the linked page honestly. File format is secondary to a clear focal point, readable composition, and valid page metadata.
The card should still work when it is small
Zoom an Open Graph image out until it is roughly feed size. If the subject disappears or the headline becomes a grey line, the card is too busy. One clear idea, a strong focal point, and generous margins usually beat a miniature poster full of details nobody can read.
Test the published URL, not only the image file. A perfect export cannot rescue a broken og:image URL, a blocked crawler, or stale cache. Social debuggers are useful because they show what the platform fetched rather than what the page author hoped it fetched.
Start with a common share frame, then verify each preview
A 1200 x 630 image is a common Open Graph starting frame, but platforms can change minimums, crops, card layouts, and fallback behavior. Declare a stable public image URL and its dimensions, then use each relevant preview tool to see what was fetched.
Keep the subject and any essential wording within a generous center area. One master can work across several services, but a dedicated crop is worthwhile when a square or vertical preview would remove the point of the image.
- Create a wide master for Open Graph link sharing.
- Keep important content away from every edge.
- Check the link preview on the platforms that drive real traffic.
- Use a dedicated square or vertical variant only when the distribution surface needs it.
- Confirm the image URL returns successfully to an unsigned-out crawler.
- Refresh cached previews after changing the file or metadata.
Publish, fetch, and inspect the public card
Choose the card message and focal point before cropping. Export a right-sized copy, verify the page tags, and use current preview/debugging tools for the networks that matter because cached cards and crops can differ.
- Decide what message or visual should be readable in a shared card preview.
- Crop and resize the image to the share-card frame your site uses consistently.
- Choose a format and compression level that keep the card lightweight but trustworthy.
- Review the image on desktop and mobile preview contexts before publishing.
Start with a common frame, then respect the subject
Moderate dimensions and a format that preserves the visual style are usually enough. Text-heavy cards may need a sharper export than ordinary photos.
Make the card readable at feed size
A share card is commonly displayed far smaller than its source. Use a short headline, large type, strong contrast, and one focal point. Preview at phone width; if the words cannot be read there, more export resolution will not fix the composition.
Leave generous margins for crop variation and place text over a controlled background rather than a busy part of a photograph. Build the card at final aspect ratio before adding type so later resizing does not blur or reposition it.
News links, product pages, and evergreen guides crop differently
A blog post with a quote-led cover image.
A product launch page that needs a strong branded share card.
A documentation page where the preview image should remain readable in a crowded feed.
Metadata, fetching, and composition are separate checks
Strong Open Graph images support click-through and shared-preview trust, which helps distribution even if they do not directly change rankings.
Teams should standardize share-card ratios and fallback behavior so content editors do not improvise every image.
Why a correct tag can still produce a poor preview
- Using the article hero image blindly when the share frame is different.
- Putting text too close to edges or interface-safe areas.
- Uploading oversized share cards that add unnecessary weight.
- Ignoring how the card looks on mobile-sized previews.
Frequently Asked Questions
Can I use the article hero as the Open Graph image?
Yes if its crop, dimensions, and focal point work in the card ratio. Otherwise export a dedicated share version from the same master.
Why does an old social image still appear?
Platforms cache preview metadata and images. Use the relevant sharing debugger or re-scrape tool after publishing the corrected URL.
Should important text touch the card edges?
No. Leave a safe margin because platforms and device previews can crop or scale the card differently.
Related Tools
Sources and related reading
For the Open Graph metadata fields, consult Open Graph protocol reference. For a hands-on companion to How to Prepare Images for Open Graph Cards, continue with Blog featured-image format guide.