For the first year of running the SEOJuice blog, I didn't think about Open Graph images at all. We published posts, shared them on LinkedIn and Twitter, and moved on. The previews looked fine to me — or so I thought, because I never actually checked what other people saw when they clicked "share."
Then a customer sent me a screenshot of our blog post shared in their company Slack. The preview was our logo at 50x50 pixels, stretched into a gray rectangle. The title was truncated. It looked broken. That post had taken two days to write, and the social preview made it look like spam.
I spent a weekend adding custom OG images to our top 20 posts. Within a month, social click-through rates on those posts went from an average of 1.8% to 4.1%. That's a 2.3x improvement from what is, honestly, about 15 minutes of work per post. (I should note: this is our own data from LinkedIn and Twitter analytics, not a controlled study. Your results will vary by audience and platform.)
Open Graph is a protocol Facebook created in 2010 that lets you control how your pages appear when shared on social media. The OG image is the visual preview — the large image that shows up in the link card on Facebook, Twitter/X, LinkedIn, Slack, WhatsApp, Discord, or any platform that supports link previews. Without OG tags, platforms guess. With them, you design the ad for your content.
Every platform reads OG tags, but they display them differently. I learned this the hard way when a perfectly good Facebook preview showed up cropped on LinkedIn. Here's the reference table I keep bookmarked:
| Platform | Recommended Size | Aspect Ratio | Format | Max File Size | Notes |
|---|---|---|---|---|---|
| 1200 x 630 px | 1.91:1 | JPEG, PNG | 8 MB | Won't show images under 200x200px. 600x315 minimum for large card. | |
| Twitter / X | 1200 x 675 px | 1.78:1 (16:9) | JPEG, PNG, GIF, WebP | 5 MB | Won't render large card for images under 300x157px. Uses twitter:image if set, falls back to og:image. |
| 1200 x 627 px | 1.91:1 | JPEG, PNG | 5 MB | Hard minimum: 1200x627. Below this, LinkedIn won't show the image at all. | |
| 1200 x 630 px | 1.91:1 | JPEG, PNG | 300 KB recommended | Struggles with images over 300KB on slow mobile connections. Aim under 200KB for reliable display. | |
| Slack | 1200 x 630 px | 1.91:1 | JPEG, PNG | 5 MB | Unfurls link previews automatically in channels. |
| Discord | 1200 x 630 px | 1.91:1 | JPEG, PNG, GIF | 8 MB | Supports animated GIFs in previews. |
| iMessage | 1200 x 630 px | 1.91:1 | JPEG, PNG | N/A | Uses OG tags for link previews in chat bubbles. |
Twitter's slightly taller aspect ratio (16:9 vs 1.91:1) means your 1200x630 image might get a tiny crop. In practice, I've never noticed a difference. Don't create separate images per platform unless you're running a major campaign where every pixel matters.
One thing I want to flag because it tripped me up: LinkedIn's minimum is a hard minimum. If your image is 1199 pixels wide, LinkedIn shows nothing. Not a smaller version — nothing. I burned half an hour debugging this before measuring the actual image dimensions.
OG tags go in the <head> section of your HTML. Here's the complete set you need for every page:
<!-- Essential OG Tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A compelling 1-2 sentence summary" />
<meta property="og:image" content="https://yoursite.com/images/og/page-name.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://yoursite.com/your-page/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />
<!-- Twitter-Specific (falls back to OG if not set) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A compelling 1-2 sentence summary" />
<meta name="twitter:image" content="https://yoursite.com/images/og/page-name.jpg" />
Important technical details, most of which I've gotten wrong at least once:
og:image. Relative paths break on most platforms. This was my single most common mistake when we first set these up.og:image:width and og:image:height tags help platforms render the preview faster without downloading the full image first.twitter:card to summary_large_image for the full-width image card. Without this, Twitter shows a tiny square thumbnail instead. I missed this on our first implementation and couldn't figure out why Twitter previews looked so small.WordPress: Plugins like Yoast SEO, RankMath, and SEOPress add OG tag fields to every post and page editor. You upload the image, fill in the title and description, and the plugin outputs the meta tags. This is the simplest path if you're on WordPress.
Next.js / React: Use the next/head component or the Metadata API (App Router) to set OG tags per page. If you're building with the App Router, the metadata export makes this straightforward.
Static sites: Add the meta tags directly to your HTML template. Most static site generators (Hugo, Eleventy, Jekyll) support front matter variables that populate OG tags automatically.
A technically correct OG image that looks bad is worse than no image at all. I've iterated on our OG image template probably five times, and here's what I've learned works:
Every platform crops slightly differently. Keep all important content — text, logos, key visuals — within the central 80% of the image. That means at least 120px of breathing room from each edge on a 1200x630 canvas. I learned this after LinkedIn cropped the first letter off a title in one of our OG images.
If your OG image includes text (and it usually should — the title of the article or page), make it large. At least 48px at 1200px canvas width. These images are often displayed at 300px wide on mobile feeds. If you can't read the text when the image is 300px wide, it's too small. I test this by zooming out in Figma to roughly 25% — if I can still read the headline, it'll work.
Use your brand colors, fonts, and logo placement consistently. When someone sees your OG image in a feed, they should recognize it as yours before reading the text. We built a Canva template with our brand colors and logo placement and reuse it for every post. Takes about 5 minutes per image now.
What doesn't work: generic stock photos, your logo alone on a white background, or an image that has nothing to do with the content. I've tested all three. They get scrolled past every time.
I check OG tags as part of every website audit we run through SEOJuice. These same problems show up over and over:
og:image, platforms auto-detect an image from your page. The result is usually your logo at 100x100 pixels or a random sidebar image. Check your pages with our SEO audit tool — it flags missing OG tags.http://, it won't display.Always test your OG tags before and after changes. I run every post through at least two of these before publishing:
| Tool | Platform | URL | Notes |
|---|---|---|---|
| Facebook Sharing Debugger | developers.facebook.com/tools/debug/ |
Also flushes Facebook's OG cache. Click "Scrape Again" after updating tags. | |
| Twitter Card Validator | Twitter / X | cards-dev.twitter.com/validator |
Preview how your card will render. Also clears Twitter's cache. |
| LinkedIn Post Inspector | linkedin.com/post-inspector/ |
Check and clear LinkedIn's OG cache. | |
| OpenGraph.xyz | Multi-platform | opengraph.xyz |
Preview across multiple platforms at once. Also generates OG images. |
| SEOJuice Screenshot Generator | Creation | /tools/screenshot-generator/ | Generate branded OG images from your pages automatically. |
yoursite.com/page/?v=2. Remove it once the cache updates.
I want to be precise here because this gets overstated: OG images don't directly affect Google rankings. Google doesn't use your og:image tag as a ranking signal. Full stop.
But the indirect effects are real, and I've observed them firsthand on our own content:
<img> elements on your page, having a high-quality OG image as a fallback doesn't hurt.The CTR data across the industry is compelling: pages with optimized social preview images see up to 70% higher click-through rates from social platforms compared to pages with no image or auto-generated thumbnails. Even conservative estimates put the improvement at 20%+ for pages that go from no OG image to a well-designed one. Our own numbers fall roughly in the middle of that range.
No. A 1200x630 image works on both. Twitter technically prefers 1200x675, but the 45-pixel difference is invisible in practice. Only create platform-specific images if you're running paid social campaigns where every detail matters.
JPEG for photographs and complex images (smaller file size). PNG for graphics with text, logos, or transparency (sharper edges). For most OG images that combine text over a background, JPEG at 80-85% quality gives you the best size-to-quality ratio. That's what we use for all of ours.
Twitter supports WebP. Facebook and LinkedIn do not reliably. Stick with JPEG or PNG for maximum compatibility. When every platform reliably supports WebP, switch — but as of March 2026, we're not there yet.
Only when the content changes significantly. If you refresh an article and add "2026 Guide" to the title, update the OG image to match. Don't update OG images for the sake of it — you'll have to flush caches across every platform, and it's not worth the hassle unless the content has materially changed.
Check these in order: (1) Is the URL absolute and HTTPS? (2) Is the image actually accessible at that URL? (3) Does the image meet minimum size requirements? (4) Is the platform cache stale? Use the debugging tools above to diagnose. The most common cause, in my experience, is a relative URL instead of an absolute one.
Yes, for content pages (blog posts, articles, guides). The title overlaid on a branded background is the most effective OG image format. For product pages, a clean product screenshot with your logo works better. The one exception: don't put text on images where the title already shows in the link card — some platforms show both, and it looks redundant.
Hey — updating OG images now for my family's cafe after the bit about CTR and brand perception; made a simple Canva template at 1200×630 so every post looks consistent. Quick question: how long did you see CTR lifts, and do you recommend purging Facebook/Twitter caches after each update?
Article claims OG images boost CTR (not rankings) — fair, but is the lift worth the complexity? In production I'd avoid per-request dynamic renders: serve static 1200×630 assets from a CDN, invalidate social caches on deploy, and A/B test variants with UTM tagging to prove causation. What sample size supports the CTR claims?
no credit card required