Open Graph Image Best Practices for Better Link Previews
Open Graph images shape how a page looks when it is shared. A poor crop, heavy file or unreadable text can make a useful page look unfinished in previews.
Open Graph images act like visual invitations for your pages. They can appear in link previews across social platforms, chat apps and publishing tools, so a weak crop can make a strong page look unfinished.
The best Open Graph workflow uses a dedicated wide image, centered focal content, readable text and a file size that does not slow down the page. It should support the page title rather than compete with it.
Use a dedicated preview image
Important pages usually deserve a dedicated Open Graph image instead of relying on a random inline image.
A dedicated preview gives you more control over crop, focal point, text size and brand consistency.
Keep the crop safe
A common target is 1200 x 630 pixels, but preview surfaces can still vary across apps.
Keep faces, products, logos and text away from the extreme edges so important content is not hidden.
Balance size and quality
A preview image should be clear, but it does not need to be an oversized camera original.
Compress the file and inspect small text, gradients and edges before publishing.
Match page metadata
The image works best when the page title, description and visual message all point in the same direction.
After publishing, test the final URL in the platforms or tools that matter for the campaign.
Open Graph planning table
These practical targets help reduce preview problems before a page is shared.
| Signal | Practical target | Risk if ignored |
|---|---|---|
| Dimensions | 1200 x 630 px | Low-quality or inconsistent previews |
| Aspect ratio | About 1.91:1 | Unexpected cropping |
| Safe area | Centered subject and text | Important content cut off |
| Format | JPG or PNG for broad sharing | Compatibility issues |
| Weight | Compressed but clear | Slower page delivery |
Open Graph pre-publish checklist
1. Use a dedicated preview image
Do not rely on the first image in an article when the page matters for sharing.
2. Keep the focal point centered
Preview surfaces can crop differently, so important details should not sit on the edge.
3. Make text readable
Use fewer words and larger type. Mobile previews make small text hard to read.
4. Test the final URL
After publishing, inspect the preview using the platforms or tools that matter for your audience.
Common Open Graph mistakes
Using the hero crop unchanged
A page hero may be too wide, too tall or too text-heavy for preview cards.
Putting logos and text at the edges
Edges are the first place crops and overlays create problems.
Exporting huge preview files
A preview image should be clear, but it does not need to be a large original.
Forgetting page metadata
The preview image works best with a matching title and description.
How PublishPixel helps
The Open Graph preset checks the common 1200 x 630 target, ratio, file weight and format guidance.
The preview simulator shows a wide crop so you can see whether the image has a useful focal area.
The report gives a copyable summary for editors or developers before the page goes live.
Related workflow
Check your image before publishing
Use these related tools and guides to review the final file before it reaches a website, CMS, store, campaign page or social publishing workflow.
Smart Image Publish Check
Run the full readiness check for size, ratio, format and publishing fit.
Free Image Compressor
Create a lighter browser-based export for website and content workflows.
Free Image Resizer
Resize images to practical web, social and preview dimensions.
Free Image Converter
Convert compatible raster images to JPG, PNG or WebP in your browser.
Image Publishing Guides
Read more practical guides about image SEO, privacy and performance.
FAQ
Questions about this guide
Is 1200 x 630 required everywhere?
No, but it is a common practical target for wide preview cards.
Can Open Graph previews crop differently?
Yes. Apps and platforms can render previews differently, so use safe margins.
Should preview images include text?
They can, but keep text short, large and centered.
Should I use WebP for Open Graph?
WebP can be useful on websites, but JPG and PNG remain common for broad sharing compatibility.