What size should an Open Graph image be?

The most widely recommended size is 1200x630 pixels. This works well across Facebook, LinkedIn, X (Twitter), and most messaging apps. Images smaller than 600x315 may appear as small thumbnails instead of large preview cards on some platforms.

What happens if a page has no og:image tag?

Platforms will attempt to find a suitable image on the page automatically — often selecting the first large image in the HTML. The result is unpredictable and frequently wrong: a logo, an ad, or an irrelevant photo may appear as the preview.

Can I use a different image for Twitter/X than for Facebook?

Yes. X supports its own meta tag (twitter:image) that overrides og:image. If twitter:image is present, X uses it; if not, it falls back to og:image. This lets you tailor the image for each platform's aspect ratio.

How do I test my Open Graph image?

Use platform-specific debuggers: Facebook Sharing Debugger, X Card Validator, and LinkedIn Post Inspector. These tools fetch your page and show exactly how the preview will appear, including the image, title, and description.

Do Open Graph images need alt text?

The og:image:alt tag lets you provide alternative text for the preview image. While not universally supported, it improves accessibility for users who rely on screen readers when encountering shared links.

What Is Open Graph Image? | Glossary

An Open Graph image is the preview image that appears when a URL is shared on social media, messaging apps, or search results — defined by the og:image meta tag in the page's HTML.

Why OG images matter

When someone shares a link on Facebook, LinkedIn, X, Slack, iMessage, or WhatsApp, the platform fetches the page and displays a rich preview: a title, description, and image. The image is the largest and most visually prominent element of that preview — it determines whether people stop scrolling and engage with the link.

Pages with well-designed OG images see significantly higher click-through rates than those with missing or generic previews. A missing OG image forces the platform to guess, often pulling an irrelevant image (or none at all), which makes the shared link look broken or unprofessional.

For marketing teams, product launches, blog posts, and landing pages, the OG image is effectively a billboard that appears every time the URL is shared. Investing in a consistent, branded OG image strategy ensures that every share reinforces visual identity and drives engagement.

OG images also appear in search engine results, bookmark managers, and link aggregators — extending their impact beyond social platforms.

OG image specifications

The Open Graph protocol, originally created by Facebook, defines a set of meta tags in a page's <head> section. The essential image-related tags are:

og:image — the URL of the image. Must be an absolute URL (not relative). HTTPS is strongly recommended.
og:image:width and og:image:height — the image dimensions in pixels. Including these helps platforms render the preview without waiting to download the full image.
og:image:type — the MIME type (e.g., image/png, image/jpeg). Optional but helpful for platforms that check format compatibility.
og:image:alt — alternative text describing the image content. Improves accessibility.

The recommended image size is 1200x630 pixels (approximately 1.91:1 aspect ratio). This works well as a large preview card on Facebook, LinkedIn, and most messaging apps. X (Twitter) uses a slightly different aspect ratio (1200x675 for summary_large_image cards), but 1200x630 displays acceptably on all major platforms.

File size should stay under 5 MB for Facebook and under 8 MB for most other platforms. JPEG and PNG are universally supported; WebP support varies.

How to create effective OG images

An effective OG image is readable, branded, and contextual. Key principles:

Include readable text. The image should communicate the page's topic even without the accompanying title. Use a headline or key phrase in a large, legible font. Avoid small text that becomes unreadable at thumbnail size.
Use consistent branding. Include your logo, brand colors, and a consistent layout template. When multiple links from your site appear in a feed, visual consistency makes them immediately recognizable.
Design for cropping. Different platforms crop the image differently. Keep critical content (text, logos) within the center 80% of the image to ensure nothing important is cut off.
Automate generation. Manually creating OG images for every page does not scale. Screenshot-based tools can generate OG images dynamically — rendering a styled template and capturing it as an image for each page.

In a real publishing workflow

For a Shotomatic-style publishing workflow, the best pattern is to treat OG images as a repeatable output, not a one-off design task. When a glossary term, blog post, or tool page moves to review, the page title, subtitle, and brand tokens can feed a fixed OG template and generate a matching preview automatically. That keeps every shared URL on-brand without slowing down publishing.

Common mistakes

Using a low-resolution image. Images under 600x315 pixels may appear as small inline thumbnails instead of large preview cards. Always use at least 1200x630 for the best display across platforms.
Forgetting to use absolute URLs. Relative paths (like /images/og.png) will not work. The og:image value must be a full URL including the protocol and domain.
Not testing across platforms. An image that looks good on Facebook may be cropped differently on LinkedIn or X. Test with each platform's preview debugger before publishing.
Caching stale images. Platforms aggressively cache OG images. After updating an image, use the platform's debugger tool to force a re-fetch. Simply changing the meta tag may not update the preview for hours or days.
Using the same generic image for every page. A site-wide default OG image is better than nothing, but page-specific images drive much higher engagement. Generate unique images that reflect each page's content.

Open Graph Image