Open Graph Image

An Open Graph image is the preview image that social networks, messaging apps and collaboration tools show when someone shares a link. The page declares it with the og:image meta tag from the Open Graph protocol, which Facebook introduced in 2010.

The tag value is an absolute URL to the image. Optional tags give the width, height, MIME type and alt text: og:image:width, og:image:height, og:image:type and og:image:alt. X, formerly Twitter, reads its own twitter:image tags and falls back to Open Graph tags when they are missing.

Services fetch and cache the image when a link is first shared, so changes may not appear until the cache is refreshed.

Why OG images matter

A link with a clear preview image takes more space in a feed or chat than a bare URL, and shows readers what the page is about before they click. Without an og:image, services pick an image from the page or show no image at all.

OG image specifications

Property	Common practice
Size	1200×630 pixels
Aspect ratio	About 1.91:1
Format	PNG or JPG
URL	Absolute, publicly reachable over HTTPS
Text	Kept away from the edges, which some services crop

Each platform publishes its own guidance and changes it over time. Check the current documentation of the platforms that matter to you.

How to create effective OG images

1. Start from a 1200×630 canvas.
2. Add a short title in large type and a clear product screenshot or visual.
3. Keep important content in the center area.
4. Export as PNG for text-heavy designs or JPG for photos, and keep the file small.
5. Test the link in each platform's preview or debugging tool.

In a real publishing workflow

Teams often generate OG images from a template for every blog post or docs page. A product screenshot inside the template shows the actual interface. Capture it at a size larger than the slot, then scale it down for sharp text.

Common mistakes

• Using a relative URL in og:image.
• Placing text near edges where some platforms crop.
• Forgetting the cache after updating the image.
• Using a tall screenshot that is cropped to an unreadable strip.

Have an image to fix right now?

Build a 1200×630 preview from a screenshot with Social Image Composer, and confirm the ratio with Aspect Ratio Calculator.

Common questions

Is the OG image the same as the favicon?

No. The favicon is a small site icon. The OG image is a large preview for shared links.

Can I use SVG for og:image?

Many services do not render SVG previews. Use PNG or JPG.

Sources

• The Open Graph protocol

Related resources

• Favicon: the small icon shown in browser tabs.
• Image Compressor: keep the preview file small.