Facebook Open Graph Image Generator

A Facebook Open Graph image generator creates the image shown when someone shares a URL. The reliable default is a 1200 × 630 pixel canvas (about 1.91:1), an absolute HTTPS image URL, and Open Graph metadata in the page head. A complete workflow also previews the card after deployment, because correct tags can still point to an inaccessible, stale, or cached image.

What a Facebook Open Graph image generator does

There are three parts to the job:

Create or crop the artwork. Use a template, a browser editor, a design tool, or code. Keep the title, logo, and other essential details away from the edges.
Publish the image at a stable URL. The URL should be absolute and use HTTPS. The server must return the image without requiring a login, cookie, or JavaScript challenge.
Describe it with Open Graph tags. Facebook reads og:image and related properties when it builds a link card.

The usual canvas is 1200 × 630 pixels. A Facebook-focused guide lists 600 × 315 pixels as a minimum reference, but 1200 × 630 is the practical working size and is also the size recommended in Vercel’s generated-image documentation. See the Open Graph protocol for the property definitions and Vercel’s OG image documentation for a programmatic approach.

Recommended dimensions, format, and safe area

Decision	Recommendation	Reason
Canvas	1200 × 630 px	Matches the common 1.91:1 social-card ratio.
Minimum reference	600 × 315 px	Useful fallback when an older system imposes a smaller limit.
Format	JPEG, PNG, or WebP	Choose the format your hosting and design pipeline serve consistently.
URL	Absolute HTTPS URL	Social crawlers need a directly reachable resource.
Safe area	Keep important content roughly 80–100 px from each edge	Downstream previews can crop or resize the card.

Use large, high-contrast type and one clear visual subject. Do not put critical text in a corner, because different clients may display the image at slightly different crops. The og:image:alt value describes the image for accessibility; it is not a caption.

A generator turns a page or template into a correctly sized social preview image.

Required Open Graph metadata

Put these tags inside the page’s <head>. The image URL must be the final public URL, not a local path or relative URL.

<meta property="og:title" content="How to Monitor Checkout Errors" />
<meta property="og:description" content="A practical guide to finding and fixing failed checkouts." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.example.com/guides/checkout-monitoring" />
<meta property="og:image" content="https://cdn.example.com/og/checkout-monitoring-1200x630.jpg" />
<meta property="og:image:secure_url" content="https://cdn.example.com/og/checkout-monitoring-1200x630.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="Dashboard showing checkout error monitoring metrics" />

The Open Graph specification defines og:image:url, og:image:secure_url, og:image:type, og:image:width, og:image:height, and og:image:alt as structured properties. If several og:image tags are present, the first one is preferred. Facebook’s documentation specifically says: “If the page specifies an og:image it should specify og:image:alt.”

You can include a Twitter card declaration as a compatibility layer:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How to Monitor Checkout Errors" />
<meta name="twitter:description" content="A practical guide to finding and fixing failed checkouts." />
<meta name="twitter:image" content="https://cdn.example.com/og/checkout-monitoring-1200x630.jpg" />

Option 1: Generate an image manually in a browser

A browser editor is suitable when you need an occasional image or want to adjust the crop visually.

Start with a 1200 × 630 document.
Place the page title in the safe area, using a short line length.
Add one recognizable illustration or product photograph with sufficient contrast.
Export as JPEG, PNG, or WebP and verify the output dimensions.
Upload it to a public HTTPS location. Test the exact URL in a private browser window.
Copy the metadata into the page head and deploy.

OpenGraph Studio describes itself as a free, open-source browser tool that can design, crop, compress, preview, export at 1200 × 630, and copy og: and twitter: tags. Its claims about local processing and no signup are product claims, so confirm the current behavior before relying on them for sensitive assets.

Option 2: Generate cards programmatically with @vercel/og

Use a code generator when every article, product, or campaign needs a different image. Vercel’s @vercel/og package renders an image from JSX in a Vercel Function. This example creates a 1200 × 630 response from a title and category.

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';
  const category = searchParams.get('category') || 'Guide';

  return new ImageResponse(
    (
      <div
        style={{
          width: '1200px', height: '630px', display: 'flex',
          flexDirection: 'column', justifyContent: 'center',
          padding: '80px', background: '#0b1220', color: 'white',
          fontFamily: 'Arial'
        }}
      >
        <div style={{ fontSize:  thirty = 30, color: '#8ab4ff', display: 'flex' }}>{category}</div>
        <div style={{ fontSize:  seventy = 70, fontWeight: 700, lineHeight: 1.1, display: 'flex', marginTop: 24 }}>{title}</div>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

In a real project, replace the illustrative numeric declarations with plain values such as fontSize: 30 and fontSize: 70; the important implementation details are the fixed dimensions, deterministic input, and publicly reachable route. Load fonts explicitly when typography must match your brand, and keep remote assets authenticated-free so the renderer can fetch them.

Generating images from HTML and CSS

If your design already exists as a web component, a browser screenshot can turn that component into an OG asset. Create a route with a fixed 1200 × 630 viewport, hide interactive controls, wait for fonts and images, and capture the element containing the card. This method preserves CSS layout but requires browser automation and careful handling of animations.

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage({ viewport: { width: 1200, height: 630 }, deviceScaleFactor: 1 });
  await page.goto('https://www.example.com/og-template?title=Checkout%20Monitoring', { waitUntil: 'networkidle' });
  await page.locator('#og-card').screenshot({ path: 'og-card.png' });
  await browser.close();
})();

Set a deterministic background, disable transitions, and wait for the exact font or image selector. Otherwise, the capture can contain a fallback font or an empty image area.

Preview and validate the Facebook link card

Fetch the production page HTML and confirm there is one intended first og:image.
Open the image URL directly. Check status, content type, dimensions, and that it does not redirect to a login page.
Share the URL in Facebook’s link preview or sharing debugger and request a fresh scrape when the tool offers that option.
Check the rendered card on a mobile-sized viewport as well as desktop.
After changing the image, use a new filename or cache-busting deployment strategy if the old card persists.

Metadata can be syntactically correct while the image is blocked by a firewall, robots policy, expired certificate, or stale cache. Always validate the rendered result after deployment.

Or skip the browser setup

ScreenshotNeo can capture a page or a dedicated OG template endpoint with one request. Its cleanup step accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Only clean shots are billed: bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers.

Cleaning overlays before capture keeps the Open Graph image focused on the page content.

See the ScreenshotNeo API documentation for all options. A basic capture is:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

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)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

For OG work, useful options include a fixed viewport or device preset, retina scale, element capture by CSS selector, custom CSS, JavaScript, a wait-for-selector or network-idle condition, image resizing, transparent background, caching with a chosen TTL, and custom headers, cookies, user agent, timezone, or geolocation. You can block ads, trackers, requests, or resource types. Async jobs with signed webhooks help when rendering many cards; bulk capture accepts up to 100 URLs per call. The MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients.

There are 1,000 screenshots per month free with no card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan. Create a free ScreenshotNeo account and generate the first card without adding a payment method.

Common errors and fixes

Symptom	Likely cause	Fix
No image appears	Relative URL or blocked crawler request	Use an absolute HTTPS URL and test it without cookies.
Old image remains	Social scraper cache	Request a fresh scrape and publish a versioned filename.
Wrong image is selected	Several `og:image` tags	Put the intended image first and remove stale tags.
Image is cropped badly	Important content too close to an edge	Move text and logos into the safe area and preview at multiple sizes.
Image is blank	Fonts, images, or JavaScript were not ready at capture time	Wait for a selector or network idle, preload assets, and disable animation.
Generator returns an error	Missing access key, invalid URL, or timeout	Check credentials, URL encoding, response status, and use a longer timeout for slow pages.
Unexpected billing	Capture result was not inspected	Read `X-Page-Verdict` and `X-Billed`; cache hits and failed loads are not billed by ScreenshotNeo.

Performance, reliability, and cost considerations

Rendering performance

Static templates are faster and more predictable than full application pages. Avoid loading analytics, video, third-party fonts, and unnecessary widgets on the OG route. If you use a browser screenshot, set a fixed viewport, block irrelevant resource types, and wait for the one selector that proves the card is ready.

Reliability

Use deterministic data and stable asset URLs. Retry transient network failures with backoff, but do not create duplicate images for every retry. Cache an image by a content hash or page revision. Keep a fallback image available when a dynamic route cannot render.

Cost

Manual browser editing has little per-image infrastructure cost but requires design time. Programmatic rendering has runtime and font-management overhead. ScreenshotNeo offers a free 1,000-shot monthly tier, then $5 for 3,000, $15 for 15,000, $39 for 60,000, $99 for 250,000, and $249 for 1,000,000; yearly billing gives two months free. Its cache-hit and failed-load billing behavior can make repeated generation safer to operate.

Production checklist

Canvas is 1200 × 630 pixels.
Important text and logos fit inside a conservative safe area.
og:image is first, absolute, HTTPS, and publicly reachable.
Width, height, MIME type, secure URL, and alt text are supplied.
The image response has the expected content type and dimensions.
Fonts and remote assets are ready before automated capture.
Animations, cookie banners, popups, and chat widgets are absent from the final shot.
The deployed URL has been checked in a link-preview debugger.
Old images use versioned filenames or a controlled cache strategy.

FAQ

Can I use 600 × 315 instead of 1200 × 630?

Yes, 600 × 315 is cited as a minimum reference, but 1200 × 630 is the safer default for modern previews and generated-image services.

Should `og:image:alt` repeat the article title?

No. Describe the visual content and its purpose, such as “Illustration of a checkout dashboard monitoring failed payments.”

Why does Facebook show an image that is not in my HTML?

The scraper may be using a cached card, or another earlier og:image tag may appear before the intended one. Inspect the raw deployed HTML and request a fresh scrape.

Is a dynamic generator better than a static export?

Use a dynamic generator when images depend on structured page data or change frequently. Use static exports when a small set of designs needs maximum simplicity and review control.

Can an OG image URL require authentication?

It should not. Social crawlers need to fetch it anonymously over HTTPS, so publish the image at a stable public URL.