OG image size and aspect ratio that still previews

Link previews die for boring reasons. The image URL 404s. The file is a tiny logo on a white field. The aspect ratio is a tall phone screenshot, so Facebook or LinkedIn crop the middle of a face or cut the headline you designed for the edge. A practical og image size for most sites is a landscape frame around 1200×630 (about 1.91:1). That size sits in the same cluster as og image dimensions and open graph image size guides. Keep important art and short text inside a center safe zone, host a stable absolute HTTPS URL, then wire og:image with the Open Graph tags generator. Platform crops and caches change; treat this as a durable default, not a forever pixel guarantee.

Why the wrong size blanks or wrecks the preview

You paste a URL into Slack, Facebook, LinkedIn, or a chat app. The card should show a title, a short description, and a large image. When the image fails, the card looks empty, picks a random page photo, or shows a crushed crop that makes the page look unfinished.

Size problems show up in three common ways. First, the file is too small. Scrapers often ignore or soft-fail images under the minimum width they expect, so a 200px favicon never becomes a hero. Second, the ratio is wrong for the slot. A square product shot or a 9:16 story frame gets center-cropped into landscape, and edge logos vanish. Third, the URL is relative (/images/share.png) or blocked. Crawlers need a full https:// address they can fetch without a login wall.

People search og image size and og image dimensions after a share already looked bad. The fix is usually not more tags. You need a file built for the preview slot, then tags that point at it. If the markup is missing entirely, build it after the image exists rather than chasing debugger errors on a broken asset.

Caches make the problem feel random. You replace the PNG, refresh the page in your browser, and Facebook still shows yesterday’s crop. Debuggers and scrapers store the old fetch. Plan for a re-scrape after every image change. That habit matters as much as picking 1200×630 once.

Practical open graph image size and dimensions

For a single default that works across Facebook, LinkedIn, and most OG consumers, export 1200×630 pixels at a landscape ratio near 1.91:1. That recommendation has been the industry default for years for link shares. You can go larger at the same ratio (for example 2400×1260) if you keep file weight under control, but you rarely need it for a clean card.

Minimums matter less for design and more for “will the scraper accept this.” Many docs cite a floor around 600×315. Anything below that invites blank cards or soft fallbacks. Anything far above a few megabytes invites timeouts. Aim for a sharp 1200-wide JPEG or PNG that loads in a second from your CDN.

Match width and height in the tags when your stack supports og:image:width and og:image:height. Those hints help some platforms allocate layout before the full download finishes. They do not fix a bad crop. They only describe the file you already chose.

Do not ship one square master and hope. Design the share image as its own artboard. Blog covers, product photos, and Instagram crops are source material, not finished OG assets. Duplicate the artboard, set 1200×630, and recompose once.

What 1200×630 buys you

At 1200×630 you get enough pixels for a photo, a short headline, and a small brand mark without looking soft on a desktop feed. The same file still works in smaller mobile cards because the networks downsample. You stay inside the common open graph image size guidance publishers cite for Facebook-class previews.

That size also keeps production simple. One master file per page or template. One URL in CMS fields. One place to update when the campaign changes. Teams that invent a unique size per network usually forget one platform and ship mismatched crops.

If your brand already owns a 16:9 library (1920×1080), you can crop to 1.91:1 with a slight letterbox or a gentle center crop. Check faces and logos after the crop. 16:9 is close to 1.91:1, but “close” still clips edges.

When a different ratio is fine

A product detail page that only shares inside a marketplace with square cards can use a square OG image if that network’s docs say so. A video watch page might prefer a 16:9 still. For a general marketing site, blog, or SaaS landing page, stay on the 1.91:1 landscape default so one asset covers Facebook, LinkedIn, and iMessage-class previews.

Vertical screenshots of mobile UI fail often. The preview becomes a thin strip of middle UI chrome. If you must show a phone UI, place the device inside a landscape canvas with padding instead of uploading the raw screenshot as og:image.

Twitter/X card sizes overlap but are not identical. Large image cards often tolerate the same landscape master. If X is a primary channel, skim current card docs and test with their validator. Do not invent a second master until a live test proves the shared 1200×630 fails.

Aspect ratio and Facebook or LinkedIn crop quirks

Aspect ratio decides what survives. Facebook link shares lean landscape. LinkedIn article and link cards also lean landscape, with their own padding and rounded frames. Both can crop. Neither promises the exact pixels you uploaded will appear forever in the same frame.

Treat the outer 5–10% of the canvas as disposable. Put faces, product edges, and short headlines in the center safe zone. Leave quiet margins so a slightly tighter crop still reads. If your logo must appear, place a small mark in a corner of the safe zone, not flush against the border.

High-level quirks to expect: Facebook may show a large landscape card in feed and a tighter crop in some chat or comment contexts. LinkedIn may add more chrome around the image and can prefer different crops for company page shares vs personal posts. WhatsApp and iMessage often use OG data but render smaller thumbnails. Design for the large landscape card first; accept that chat thumbnails will shrink further.

Do not promise teammates an exact crop map. Platforms update scrapers and card UIs without a changelog aimed at marketers. Re-test after a redesign, after HTTPS or CDN changes, and when a campaign image swaps.

Facebook share preview habits

People who search facebook og image size usually want the 1200×630 answer plus a reason their old image still shows. Facebook’s Sharing Debugger (and related scrapers) cache aggressively. After you upload a new file at the same URL, scrape again. After you change the URL, update og:image and scrape the page URL, not only the image URL.

Avoid transparent PNGs with tiny centered logos. On some backgrounds the card looks blank. Prefer a full-bleed photo or a solid brand color field with clear contrast. Keep text large; fine print disappears at feed scale.

If the debugger shows the right tags but no image, check robots rules, hotlink protection, and whether the image CDN blocks non-browser user agents. Size is irrelevant when the fetch never completes.

LinkedIn link-preview quirks

LinkedIn readers see a professional feed. Busy collages and tiny captions look worse there than on casual networks. Use a clean photo or a simple diagram, keep the headline short, and leave margin.

LinkedIn also caches. Posting the same URL twice after an image swap can still show the old card until their crawler refreshes. Use LinkedIn’s post inspector or equivalent preview tools when a launch depends on the first impression. For low-volume posts, wait and reshare after a successful scrape rather than editing in place ten times.

Company page admins sometimes set default share images that override a page’s OG tags in specific share flows. If a campaign URL looks wrong only from the company composer, check page settings before you rebuild the PNG.

How to prepare the image file

Start from the story of the page, not from a leftover screenshot. Ask what a stranger should understand in half a second: product in use, place, result, or a short claim. Build that on a 1200×630 board.

Export JPEG for photos and complex gradients. Export PNG when you need sharp UI chrome or flat graphics with few colors. Compress until the file sits in a few hundred kilobytes when you can; stay well under several megabytes either way. Huge files stall scrapers on slow connections.

Host on HTTPS with a stable path. Prefer a content-hashed filename when you replace art (share-launch-a3f2.jpg) so caches cannot serve the old bytes under the same URL. If your CMS overwrites one filename forever, plan a debugger pass after every swap.

Strip private metadata from camera originals before they become public share art. Family or office photos can carry GPS. Use Strip EXIF when the source is a phone photo, and read Remove EXIF GPS before sharing kids' photos if location privacy matters for that asset.

Resolution, format, and file weight

Confirm the export is truly 1200×630 (or the same ratio larger). Phone “share sheets” sometimes downscale without telling you. Open the file properties before you upload.

Watch color profiles and extreme HDR exports that look fine on your laptop and muddy on the card. sRGB JPEG is the boring choice that travels well. Animated GIFs and video posters are special cases; for a standard link card, use a still.

If the page already has a hero image at another size, do not point og:image at a 4000px retina asset “because it is sharper.” Scrapers pay for download time. Give them a purpose-built share file.

Composition and text in the frame

Limit on-image text to a few words. The HTML og:title already carries the headline for many cards. Duplicate headlines fight each other when the network shows both.

Keep contrast high. Cream-on-cream fails. Thin script fonts fail. Busy stock photos with faces at the extreme left fail after a center crop.

Brand marks should be small. The card is advertising the page, not reprinting your full homepage header. If legal requires a mark, use a compact lockup inside the safe zone.

Wire the image into Open Graph tags

Once the file is live, set:

• og:image to the absolute HTTPS URL
• og:title and og:description that match what you want on the card
• og:url to the canonical page
• optional og:image:width / og:image:height matching the file
• optional Twitter card tags if you care about X previews

Toolsy’s Open Graph tags generator builds that markup in the browser. You paste the image URL you already host; the tool does not host the PNG for you. Copy the tags into your page <head>, CMS SEO fields, or framework metadata API.

Pair the share image work with ordinary head tags when you are already editing the template. The Meta tags generator covers title, description, robots, and canonical in the same pass. For Google snippet length, the title and meta description checker catches truncation before you publish.

Validate that the HTML on the live URL contains the tags you think you deployed. Local preview and production CDN configs diverge more often than teams expect. View source on the public URL, not only on localhost.

How to check the preview after you deploy

Open the live page. Confirm og:image in view-source. Fetch the image URL in a private window. Then run a platform debugger or an og image checker / open graph image checker against the page URL.

Expect one of four results. Tags missing: fix the template. Image 404 or blocked: fix hosting. Image present but ugly: fix artboard and safe zone. Image correct in the debugger but stale in a feed: force a re-scrape and wait for cache expiry.

Test the networks you actually use. A clean Facebook scrape does not guarantee LinkedIn or iMessage. Send the URL to yourself in each app after the debugger looks right.

When the card still shows an old image, change the image URL (new filename), update the tag, redeploy, and scrape again. Overwriting one path is the classic way to fight a cache for a week.

Related jobs next to the share image

Share previews sit beside other on-page SEO chores. After the image works, check that title and description lengths still read in Google. Align canonical and robots so scrapers and searchbots see the same indexable URL. If you publish FAQ blocks, keep schema work on its own checklist so you do not overload one launch day.

Privacy habits belong here when the asset is a photo. Uploading documents or images to any online tool has a risk profile; Is it safe to upload documents online? covers the decision frame for uploads in general. Prefer browser-only generators for markup when you can, and keep original camera files off public CDNs until EXIF is clean.

A later guide on full Open Graph tag sets for LinkedIn and Facebook share workflows will expand markup patterns beyond size. Until that post is live, use this article for pixels and ratio, and the Open Graph tags tool for the HTML. For re-scrape habits without living in Meta’s developer console, see Open Graph debugger workflow without Facebook login.

Limits platforms still spring on you

No size guide survives every client. Messenger surfaces, embed widgets, and email link unfurls each clip differently. AMP-style caches and privacy proxies can refetch through their own URLs. Corporate networks may block image hosts that personal phones allow.

Do not treat a blog post, including this one, as a contract with Meta or LinkedIn. When a channel is mission-critical for a launch, re-check official debugger docs the week you ship. Keep the 1200×630 landscape master as your default so you are wrong less often, then adjust if a live test fails.

Framework helpers (Next.js opengraph-image, CMS “social image” fields, SEO plugins) only help if the exported bytes match the ratio you designed. Plugin defaults that stamp a logo on a blank canvas still produce weak cards. You still own the artboard.

If legal or brand forbids photos, a flat color field with a short wordmark still beats a missing image. Missing images teach scrapers to invent something worse from the page body.

Frequently asked questions

What og image size should I use in 2026?

Use 1200×630 pixels at about 1.91:1 as the default open graph image size for general websites. That og image size remains the practical answer people seek for Facebook-class link previews and works for most LinkedIn cards too. Re-test after major redesigns, because clients change even when the pixel advice stays stable.

What are standard og image dimensions?

Og image dimensions of 1200×630 are the common standard for a single share asset. Keep a minimum near 600×315 if you must ship a temporary file, then replace it. Matching width and height meta tags to the real file helps some scrapers lay out the card sooner.

Does Facebook still want 1200×630?

For ordinary link shares, yes: a 1200×630 landscape file is still the safe facebook og image size target. Facebook may crop more tightly in some surfaces, so keep a center safe zone. Always re-scrape in the Sharing Debugger after you change the file or URL.

What aspect ratio works for LinkedIn previews?

A landscape ratio near 1.91:1 (the same 1200×630 master) is the practical default for LinkedIn link previews. Leave margin so LinkedIn’s chrome and crop do not clip logos. Confirm with LinkedIn’s inspector when the first share of a campaign URL matters.

Can I use a square image for Open Graph?

You can, but Facebook and LinkedIn will often crop it into a landscape card and drop the edges. Use square only when a specific network’s current docs favor it for that surface. For a sitewide default, export landscape.

How large can the OG image file be?

Keep the file light: hundreds of kilobytes is ideal; multiple megabytes invite timeouts. Resolution can be 1200×630 or a 2× version of the same ratio if compression stays sane. Scrapers abandon slow downloads more often than they complain about mild JPEG artifacts.

Why does my preview still show the old image?

Caches. Debuggers and apps store prior fetches of your page and image URL. Change to a new image filename, update og:image, redeploy, and run the debugger scrape again. Waiting without a re-scrape rarely clears a stubborn card.

Do I need og:image:width and og:image:height?

They help when they match the real file. They do not repair a bad ratio or a 404. Add them once the asset is final, especially in frameworks that make the properties easy to set.

Should the OG image match my Google snippet image?

Not necessarily. Google may pick another image for search results. Open Graph controls social and many chat unfurls. Design the OG file for the link card; keep on-page images optimized for the article itself.

How do I add the image URL to my tags without writing HTML by hand?

Use the Open Graph tags generator: paste title, description, page URL, and the absolute image URL, then copy the meta tags into your head. Host the image on your own HTTPS origin first. For the rest of the head, pair with the Meta tags generator.

When you finish the share image, confirm head tags and privacy on the asset itself. Start with Open Graph tags, then tidy ordinary meta with Meta tags generator. If your logo master is SVG, rasterize a PNG fallback first — see Rasterize SVG logos for slides and social preview fallbacks. For LinkedIn profile banners and in-feed post canvases (separate from OG cards), see LinkedIn banner and post image specs. For soft hero fills behind type-free OG art, see CSS gradient generator for hero backgrounds. For photo location risk before a public CDN upload, see Remove EXIF GPS before sharing kids' photos.