Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Use a 1200 × 630 pixel (about 1.91:1) image as your default Facebook Open Graph canvas. A useful generator creates or crops that image, keeps important content in a safe area, previews the link card, and gives you valid Open Graph metadata. For occasional graphics, an in-browser editor such as OpenGraph Studio is convenient; for page-specific images generated from titles, prices, authors, or other data, Vercel’s @vercel/og is the developer-oriented choice.
What size should a Facebook Open Graph image be?
Design at 1200 × 630 pixels. That is the working recommendation in Vercel’s 2025 documentation and OpenGraph Studio’s 2026 guidance, and it preserves the familiar 1.91:1 share-card shape. A current Facebook-focused guide lists 600 × 315 pixels as a minimum reference, but starting at 1200 × 630 gives you a sharper source for large previews and other services that read the same metadata.
![Marketing Magic: How I produced 7 billion views, 50 million social media followers and $250,000,000 in yearly revenue without paid advertising! ... ... Manuel Suarez [Hardcover] Manuel Suarez](https://m.media-amazon.com/images/I/41DEmJulOkL._SL160_.jpg)
- Canvas: 1200 × 630 px.
- Ratio: approximately 1.91:1.
- Minimum reference: 600 × 315 px (og-image.org guide).
- Keep logos, headlines and faces away from the outer edges; downstream cards can crop differently.
- Export a web-friendly PNG, JPEG or WebP at a size your hosting and social crawler can serve reliably.
The dimensions alone do not make a card appear. Facebook must be able to fetch the image at the URL in your page’s metadata, and the URL can be cached after your first share.
How Open Graph image metadata works
The Open Graph protocol defines og:image as the image representing a shared object. If you provide more than one og:image, the first image is preferred. Use an absolute HTTPS URL, not a relative path.
#1 Best Overall
<meta property="og:image" content="https://example.com/images/article-og.webp">
<meta property="og:image:secure_url" content="https://example.com/images/article-og.webp">
<meta property="og:image:type" content="image/webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Illustrated title card for the article">Facebook’s documentation states: “If the page specifies an og:image it should specify og:image:alt.” The alt value describes the image for accessibility; it is not a caption or a replacement for the page title. Add og:image:url when you want to state the canonical image property explicitly.
Complete page-level essentials
<meta property="og:type" content="article">
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A concise description of the page">
<meta property="og:url" content="https://example.com/articles/example">
<meta property="og:image" content="https://example.com/images/example-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="Description of the visual">Put these tags in the document’s <head>. Ensure the image is publicly reachable over HTTPS without a login, robots challenge or expiring authorization token.
Choose a generator: browser editor or code
| Option | Best for | What it provides | Trade-offs |
|---|---|---|---|
| OpenGraph Studio | Occasional manual assets | Design, crop, compress, preview, 1200 × 630 export, and copyable og:/twitter: tags |
Manual work for every page; local-processing and no-upload behavior are product claims to verify against the current release |
Vercel @vercel/og |
Dynamic, per-page images | Generate cards from title, author, category, price and other structured values in Vercel Functions | Requires code, deployment and font/layout testing |
| ScreenshotNeo | Rendered screenshots of live pages | API and MCP capture with cleanup controls, PNG/JPEG/WebP or PDF output | It captures a rendered URL rather than replacing a template-based OG generator |
OpenGraph Studio workflow
- Create a 1200 × 630 document.
- Place the headline, logo and key visual inside a conservative inner safe area.
- Preview the crop and card appearance.
- Compress and export the image.
- Copy the generated tags into your page’s
<head>, then replace the example URL, title and alt text with your own values.
Use this path when a designer or editor makes a limited number of share images. Check the tool’s current privacy and export behavior before putting confidential material into any web app.
Dynamic generation with Vercel @vercel/og
Vercel documents @vercel/og for generating Open Graph images in Vercel Functions and recommends a 1200 × 630 output. A route can read a slug, load the page’s structured data, and return a new image for each URL. This avoids hand-editing hundreds of cards and keeps typography consistent.
Rank #2
import { ImageResponse } from '@vercel/og';
export const runtime = 'edge';
export async function GET(request) {
const { searchParams } = new URL(request.url);
const title = searchParams.get('title') || 'Example article';
return new ImageResponse(
(
<div style={{
width: '1200px', height: '630px', display: 'flex',
background: '#111827', color: 'white', padding: '72px',
fontSize: 64, fontWeight: 700
}}>{title}</div>
),
{ width: 1200, height: 630 }
);
}In production, constrain title length, load fonts in the way your deployment supports, and test long words, non-Latin scripts, missing data and unusually large prices. A generated image route still needs a stable, absolute URL in og:image.
Build and publish a reliable OG image
- Define the template. Decide which fields are variable and reserve space for the longest realistic title.
- Design the safe area. Keep essential text and logos comfortably inside the edges; treat decorative content as expendable.
- Choose output. Use PNG for crisp UI-like art, JPEG for photographic backgrounds, or WebP when your delivery stack and social crawler behavior are confirmed.
- Publish a permanent URL. Use HTTPS, a correct MIME type and a URL that does not require cookies or authentication.
- Add metadata. Include dimensions, type, secure URL and descriptive alt text alongside
og:image. - Deploy before testing. A local file or staging-only URL cannot produce a dependable public card.
- Inspect the real share preview. Confirm the rendered card after deployment, not just the HTML source.
Preview and validate the Facebook card
Validation has two separate parts: metadata and retrieval. View the deployed page source or DOM to confirm that the first og:image is the intended absolute URL and that width, height, type and alt text match the file. Then use Facebook’s current sharing-debug workflow to request the URL again and inspect the fetched preview. If you changed an image at the same URL, a cached result can remain visible; changing the asset URL (for example, with a versioned filename) is often more dependable than relying on an immediate refresh.
- Open the image URL directly in a private browser window.
- Check that it returns an image status, not an HTML error page or redirect loop.
- Verify the file’s actual dimensions and MIME type.
- Look at the card on a narrow viewport and a desktop viewport for unexpected cropping.
- Share the deployed URL again after correcting metadata or the asset.
Common failures and fixes
The old image keeps appearing
Social crawlers cache fetched images. Keep the old URL available while debugging, request a fresh scrape in Facebook’s debugger, and publish a versioned image URL when you need an unambiguous change.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesThe card has no image
Check for a relative URL, HTTP instead of HTTPS, a blocked crawler, authentication, a timeout, or a response whose MIME type is HTML. Test the exact URL without your browser session.
Rank #3
The wrong image is selected
Multiple og:image declarations are allowed, but the first is preferred. Remove stale tags and ensure your framework is not injecting another image before the intended one.
Text is cut off
Reduce title length, increase inner margins and test the actual card crop. Do not put critical information at the extreme top, bottom or sides.
Dynamic images fail only in production
For @vercel/og, inspect edge-runtime compatibility, font loading, remote asset access and data that is undefined at build time. Return a known fallback image when a record is missing.
The image works in a browser but not for Facebook
A logged-in browser may send cookies or bypass a bot check. Test from an unauthenticated request, remove access controls and make sure redirects end at a directly fetchable image.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server when you need a rendered page captured rather than a hand-designed card. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing result. Its MCP server provides take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients.
Every plan includes features such as full-page capture with lazy images loaded, CSS-selector element capture, device presets and custom viewports, dark mode, retina scale, custom CSS and JavaScript, waits, request blocking, cookies and headers, geolocation, resizing, chosen-TTL caching, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, a usage API and an OpenAPI specification.
One-call examples
See the ScreenshotNeo documentation for all parameters. cURL:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The Free plan includes 1,000 shots each month with no card. Paid plans start at $5 for 3,000 shots; yearly billing gives two months free. Sign up for the free ScreenshotNeo plan.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Cost, caching and operational notes
For a template generator, your costs are primarily design, function execution and image delivery. Dynamic routes should cache deterministic images by content version so a crawler does not regenerate the same card repeatedly. When using a screenshot API, choose a cache TTL that matches how often the page changes, use asynchronous jobs for slow pages, and inspect the returned billing and verdict headers. A cache hit is explicitly not billed by ScreenshotNeo, while failed loads and blank pages are also not billed.
Frequently Asked Questions
Can I use 600 × 315 pixels for Facebook?
Yes, 600 × 315 is cited as a minimum reference, but 1200 × 630 is the safer default working canvas.
Should og:image:alt repeat my headline?
No. Describe the visual itself; alt text is an image description, not a caption.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Do I need both og:image and og:image:url?
Use og:image as the core declaration; og:image:url can state the same canonical image explicitly, with the other structured properties added when available.
Is a screenshot API the same as an OG image generator?
Not exactly. A generator creates a designed share asset, while a screenshot API captures a rendered page. Choose based on whether you need a template card or a faithful page image.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
