Open Graph Images: The Complete Guide (2026)

An Open Graph image is the preview image that appears when someone shares a link on Facebook, LinkedIn, X, Slack, or Discord. Get it right and your posts earn up to 48% more clicks (Hootsuite 2025), and get it wrong and your link shows up as a text-only blob that nobody clicks. This guide covers the real specs, the meta tags you need, why your image isn’t showing, and how to automate the whole thing.

What Is an Open Graph Image?

An Open Graph image is the visual preview defined by the og:image meta tag in your HTML, used by social platforms and messaging apps to generate link previews. Facebook created the Open Graph protocol in 2010, and it’s since become the de facto standard for link unfurling across X, LinkedIn, Slack, Discord, iMessage, WhatsApp, Bluesky, and Reddit.

The critical thing to understand: Open Graph images don’t affect your Google rankings. They have zero SEO impact. What they do affect is social CTR, which is a completely different lever. Posts missing an og:image tag receive 18% fewer clicks from X and Slack unfurls according to BlogSEO’s 2025 testing, and custom branded OG images lift shares by 70% compared to stock or missing images.

If you want to boost organic search rankings, OG images won’t help you there. But if your LinkedIn posts keep going out as bare text links, you’re in the right place.

What Size Should an Open Graph Image Be?

The recommended Open Graph image size is 1200×630 pixels (1.91:1 aspect ratio), under 5MB, in JPG, PNG, or WebP format. This works across every major platform and is what Facebook, LinkedIn, Slack, Discord, WhatsApp, and iMessage all recommend or accept cleanly.

Here are the exact specs per platform as of 2026:

Sources: Facebook Sharing docs, ogp.me, platform testing.

If you want one number to rule them all, use 1200×630. It renders correctly on every platform. X will show it fine (their 16:9 preference is just a preference), LinkedIn will accept it (1200×627 vs 1200×630 is a three-pixel difference nobody can see), and Facebook/Slack/Discord treat it as ideal.

Sizing gotchas worth knowing:

• Don’t go below 1200×627 on LinkedIn. LinkedIn has a hard minimum and silently renders links as text-only if your image is smaller. No fallback, no warning, just no image.
• Facebook’s 200×200 minimum is a trap. Anything under 600×315 renders as a tiny thumbnail next to the text, not the full-width card you actually want.
• Keep important content out of the bottom 20% of your image on Facebook. That’s where Facebook sometimes overlays the domain name and timestamp.

The “1200×630 vs 1200×627” debate you’ll see in other guides is noise. Platforms scale and crop anyway. Pick 1200×630 and stop worrying.

The Open Graph Meta Tags You Actually Need

The minimum required tag is og:image with an absolute HTTPS URL. Everything else is optional but useful. Here’s the full recommended set:

<meta property="og:image" content="https://yoursite.com/og-image.jpg" />
<meta property="og:image:secure_url" content="https://yoursite.com/og-image.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of what's in the image" />

Some things here are non-obvious:

Absolute URLs are mandatory. content="image.jpg" fails everywhere. Social crawlers have no concept of your page’s base URL, so you must provide the full scheme and domain. This is the single most common cause of broken previews.

HTTPS is effectively required in 2026. The OGP spec technically allows HTTP, but X rejects non-HTTPS images and most platforms treat HTTPS as mandatory in practice.

og:image:width and og:image:height are optional but smart. Including them lets platforms load the preview card instantly instead of waiting for the image to download so they can measure it. Facebook specifically uses these to skip the async image fetch step.

Yoast intentionally doesn’t set og:image:alt. Joost de Valk explained on the Yoast developer blog that most platforms don’t actually display or use it, and when they do it can conflict with the user’s own caption. If you’re building accessibility into your workflow, still set it, but know that platform support is spotty.

twitter:image is redundant if you have og:image. X falls back to og:image when twitter:image is missing. You only need a separate twitter:image if you want a different image on X than on other platforms.

Why Your Open Graph Image Isn’t Showing (8 Common Fixes)

If your OG image isn’t appearing when you share a link, one of these eight issues is almost certainly the cause.

1. Relative URL. content="/og.jpg" or content="og.jpg" breaks every platform. Use the full absolute URL with HTTPS.

2. Image behind authentication or hotlink protection. Social crawlers don’t send cookies, follow redirects to login pages, or bypass Referer-based hotlink rules. If curl -I https://yourimage.jpg from an incognito context fails, the crawler will fail too.

3. Image too small. Below 200×200 Facebook often shows nothing. Below 1200×627 LinkedIn renders text-only. Below 600×315 you get a tiny thumbnail instead of a full card.

4. File size over the limit. Slack softly breaks past ~500KB. X caps at 5MB. WhatsApp chokes past 600KB.

5. Client-side rendered meta tags. If you’re building with React, Vue, or Svelte and your og:image tag is injected via JavaScript, social crawlers won’t see it. Crawlers fetch the initial HTML only and don’t execute JS. You need server-side rendering, static generation, or a framework-level metadata API (Next.js generateMetadata, Nuxt’s head config, SvelteKit’s <svelte:head>).

6. Meta tags past the first 32KB of HTML. Slack reads only the first 32KB of your response. If your build tool inlines a giant CSS blob above your meta tags, Slack never sees them. Check your output HTML and make sure meta tags are near the top.

7. HTTP instead of HTTPS. Most platforms, X in particular, reject non-HTTPS image URLs outright.

8. Stale platform cache. This is the frustrating one. Your image is correct, your tags are correct, but the platform is serving a cached version from the last time it scraped your URL. See the next section for how to fix it.

How to Clear the Open Graph Cache on Each Platform

Social platforms cache scraped link previews aggressively, and cache behavior varies wildly between them. Here’s how to force a refresh.

Facebook: Use the Sharing Debugger. Paste your URL, click “Scrape Again.” Facebook caches for up to 30 days, and the Scrape Again button sometimes does nothing on the first click, so try it two or three times. Also make sure you’ve purged your own site’s cache (CDN, WordPress cache plugins) before clicking, because Facebook can’t see your updated tags if your server is still serving the old HTML.

LinkedIn: Use the Post Inspector. LinkedIn caches for 7 days and there’s no way to force-purge for links that were already shared. Post Inspector will refresh the cache for new shares, but existing posts that linked to your URL will keep showing the old preview until the cache expires naturally.

X (Twitter): X deprecated its Card Validator preview feature in 2023, so there’s no official real-time tool anymore. The workaround is to share the link in a draft or DM and see how it renders. X’s cache is aggressive, but updating the meta tag and waiting 24 hours usually works.

Slack: Append a query string like ?v=2 to the URL before sharing. Slack treats URLs with different query strings as different resources, so this forces a fresh unfurl. The previous version will still be cached for any messages that already had it, but new posts pick up the new image right away.

Discord, iMessage, WhatsApp: No public debug tools exist. Cache-busting query strings usually work, otherwise wait 24-48 hours.

Always verify in an incognito window. Your browser cache can trick you into thinking a fix worked when the platform is still serving stale previews to everyone else.

Can You Use WebP for Open Graph Images?

Yes. As of late 2024, all major platforms support WebP for Open Graph images. LinkedIn was the last holdout and added WebP support in December 2024, completing universal coverage across Facebook, X, LinkedIn, Slack, Discord, WhatsApp, and iMessage.

WebP gives you 25-35% smaller file sizes than JPG at equivalent quality, which matters if you’re serving from a bandwidth-billed CDN or pushing against Slack’s ~500KB soft limit.

One caveat: Facebook’s official documentation still lists only JPG, PNG, and GIF as “supported” formats, but Facebook’s apps and Messenger render WebP fine. It’s a documentation lag, not an actual compatibility issue.

If you’re worried about legacy platforms or obscure scrapers, stick with JPG. If you’re targeting modern platforms and care about file size, WebP is fine.

AVIF is a different story. It saves more bandwidth than WebP but support is still spotty in 2026. Avoid it for OG images for now.

Do Open Graph Images Help SEO?

No, Open Graph images have no impact on Google search rankings. Google has explicitly confirmed that OG tags, including og:image, are not ranking signals. They affect how your link appears when shared on social platforms, not where it appears in search results.

This myth persists for a few reasons. OG tags live in your HTML <head> alongside real SEO tags like <title> and <meta name="description">, so they look like SEO tags by association. Some SEO plugins (Yoast, Rank Math) handle both OG tags and actual SEO tags in the same interface, which blurs the distinction. And older SEO content sometimes mixed OG images in with “SEO best practices” lists out of sloppy categorization.

OG images drive social referral traffic by making your links more clickable on social platforms. If you want to rank in Google, focus on content quality, internal linking, and proper <title>/<meta description> tags. If you want people to actually click your links when shared, use great OG images.

There’s one narrow exception worth knowing: Google Discover can use og:image as a hint for article card visuals if no max-image-preview:large meta directive is set. BlogSEO’s 2025 tests showed a 16% CTR lift in Google Discover from optimized OG images. But this is a specific feed context, not organic search rankings.

How to Generate Open Graph Images Automatically

You’ve got four options for generating Open Graph images at scale, each with different trade-offs.

Manual creation in Figma or Canva gives you full creative control but costs 20-30 minutes per image. That’s fine for a landing page hero. For a blog publishing weekly, it’s 80+ minutes a month you could spend writing.

Template-based tools like Bannerbear and Placid let you design a template once, then map dynamic fields (title, author, date) from your CMS. The output is consistent and fast, but every image follows the same layout. After 20 posts your blog looks like a spreadsheet.

Code-based generation with @vercel/og lets you write JSX components that get rendered to PNG at the edge. It’s free, flexible, and fits cleanly into Next.js’s metadata API. The downside: you need to build templates in code, which means doing design work as a developer instead of a designer. Also works with SvelteKit, Remix, and Astro via Satori.

AI contextual generation is the newest category. Tools like imghero read the actual content of the URL you’re sharing and generate a unique image that matches what the post is about. No template, no prompt engineering, no design decisions. You paste a URL and get back an image. For a broader look at this category, see our guide to the best AI blog image generators.

Which approach makes sense depends on your situation:

• Hand-designed one-offs → manual in Figma
• WordPress blog with Yoast already handling OG tags → let Yoast fall back to the featured image
• Next.js shop with design system → @vercel/og
• Product marketing team that needs brand consistency across thousands of assets → Bannerbear or Placid
• Blog publisher who wants unique, contextual hero images without prompts or templates → imghero

How imghero Generates Open Graph Images from a URL

imghero is built for automatic blog hero and OG image generation. Instead of asking for a prompt or template, it reads your content and figures out what to generate.

The pipeline runs in four stages:

1. Scrape the URL and extract the article content
2. Summarize the content, detecting topic, vertical (tech, finance, travel), and language
3. Optimize a visual prompt from the summary, plus your brand colors, chosen style, and text treatment
4. Generate the image at 1200×675px using Flux and Nano Banana models

Generation takes 10-30 seconds.

The output is 1200×675 (16:9), which is slightly taller than the 1.91:1 ratio Facebook and LinkedIn prefer, but platforms scale cleanly and the image renders correctly everywhere. X and Google Discover prefer 16:9 anyway, so you’re optimized for the platforms where OG images matter most for CTR.

A few things that make imghero work well for OG:

• Stable public URLs. Every generated image lives at https://img-hero.com/img/url_xxxxx/ with a permanent, CDN-backed URL. You drop this in your og:image tag and forget about it. Cache-Control headers are set to 7 days, which is right for platform OG caching.
• Brand colors applied automatically. Set your brand colors once in account settings and every generated image inherits them.
• 20 visual styles. Pick from photo, illustration, minimal, cinematic, watercolor, 3D render, isometric, and more, or let the auto-selector match a style to your content type.
• Text treatment options. none (pure image), overlay (text on top), split (image on one side, text panel on the other).
• REST API and Zapier integration. POST /api/v1/generate/ with a URL and style returns a stable image URL as soon as generation completes. Pair it with Zapier to auto-generate OG images when you publish in WordPress, Ghost, or any CMS with webhooks.

imghero is built for blog and content publishing. If you need pixel-perfect brand templates with dynamic text fields across thousands of product pages, Bannerbear or Placid fits better. If you want full JSX control over every pixel, @vercel/og wins. imghero works best when you publish content regularly and don’t want to think about OG images. Starter plans begin at €7/month for 20 images.

How to Test Open Graph Images Before You Publish

Run through all four of these before publishing anything with a new OG image. Each platform has quirks the others don’t catch.

• Facebook Sharing Debugger shows how Facebook and Messenger will render your preview and lets you force a cache refresh.
• LinkedIn Post Inspector shows LinkedIn’s rendering and refreshes the cache for future shares.
• opengraph.xyz is the best free multi-platform previewer. Paste your URL and see how it renders across Facebook, X, LinkedIn, Slack, Discord, and iMessage in one view.
• metatags.io generates meta tags from scratch if you’re starting fresh, and shows live previews.

Pre-flight checklist before publishing a new OG image:

• [ ] Absolute HTTPS URL in the og:image tag
• [ ] Image is publicly accessible (test with curl -I from an incognito context)
• [ ] Dimensions at least 1200×630, under 5MB
• [ ] og:image:width and og:image:height set
• [ ] Meta tags appear in the first 32KB of HTML (Slack requirement)
• [ ] Previewed on at least two platforms via debug tools
• [ ] Verified in an incognito window, not your own browser

Open Graph Image FAQ

Is 1200×630 or 1200×627 correct? Both work. 1200×630 is a true 1.91:1 ratio and what Facebook, Slack, and Discord recommend. 1200×627 is what LinkedIn’s docs show. The three-pixel difference is invisible and platforms scale the image anyway. Use 1200×630.

Do I need og:image:width and og:image:height tags? They’re optional but recommended. Including them lets platforms render the preview card instantly without downloading your image first to measure it. Facebook specifically uses these to skip an async fetch step and show the preview faster.

Why does Twitter/X show my OG image differently than Facebook? X prefers 1200×675 (16:9 or 2:1 aspect ratio), while Facebook renders 1200×630 (1.91:1). The difference is minor in practice, but if you’re seeing dramatic differences, check whether you have a separate twitter:image tag overriding og:image on X only.

Can I A/B test Open Graph images? Not natively on any platform. The workaround is to rotate different OG images for the same URL over time and measure social referral traffic in your analytics. Some link shortener tools (Bitly, Rebrandly) support per-link custom previews for paid plans.

Do I need a separate twitter:image tag? No. X falls back to og:image when twitter:image is missing. Only add a separate twitter:image if you want a different image on X than on other platforms, which is rare.

How often should I update OG images for old posts? Only if you’re trying to revive traffic or re-share the post. LinkedIn and Facebook cache for 7-30 days, so changes take a while to propagate. For evergreen content, one good OG image set at publish time is enough.

Can AI-generated OG images hurt my SEO? No. Google has confirmed that AI-generated images don’t receive ranking penalties. OG images aren’t a ranking factor anyway. Focus on image quality, not origin.

What’s the best free tool for testing OG images? opengraph.xyz shows previews across every major platform in a single view. It’s the fastest way to verify a new OG image before publishing.

---

imghero reads your content and generates a matching OG-ready image in under 30 seconds, no credit card or prompts needed. Get started →