Open Graph Image Generator Online

An Open Graph image generator creates the visual card that appears when someone shares your URL on a social network or messaging app. For most pages, generate a 1200×630 PNG, host it at a stable public URL, and reference it with an absolute og:image URL in your document head. Use a browser editor for occasional cards; use an API or framework route when every page needs a different image.

The Open Graph protocol describes how a web page becomes a rich object in a social graph. An image generator handles the visual asset; your page still needs the metadata that tells crawlers where to find it.

What an online Open Graph image generator does

Most generators combine a canvas, a template system, and an export step. You enter a title, description, author, product name, or background, preview the result, and download a PNG. Some services also return copyable HTML tags. Dynamic services expose URL parameters or a JSON API so your application can render a different card for each route.

The practical standard canvas is 1200×630 pixels. This ratio is documented by og-image.org and used in Vercel’s official OG image examples. It gives social crawlers a large image while matching the wide preview cards used by major networks.

Choose the right generation method

Method	Best for	Advantages	Trade-offs
Browser editor	One-off or occasional cards	Templates, live preview, no build pipeline	Manual updates; difficult to generate thousands of variants
Hosted template/API	Marketing sites and catalogs	Reusable layouts, URL or JSON variables, stable image URLs	External service and pricing considerations
Framework route	Engineering teams with a dynamic site	Version-controlled code, custom fonts and data access	Must follow runtime CSS and bundle limits
Screenshot API	Rendered pages, dashboards, or existing HTML	Captures the actual page or selected element	Requires careful loading, privacy, and failure handling

The path from page data to a shareable Open Graph image.

How to make an OG image online without code

Open a browser-based editor such as og-image.org and select a 1200×630 template.
Replace the title and supporting text. Keep the title short enough to remain readable on a phone.
Choose a high-contrast background and one focal visual. Avoid placing essential details near the edges.
Preview the image at its final size. Check punctuation, line breaks, and contrast.
Export a PNG and give it a stable filename such as og-home.png or og-post-slug.png.
Copy the generated metadata into the <head> of the page.

og-image.org documents a client-side workflow that runs in the browser, with templates, editing controls, PNG download, and copyable tags. A client-side editor is useful when the source material should not be uploaded to a server and you only need a few cards.

Add the image to your website

Use an absolute HTTPS URL. A relative path such as /images/og.png may not resolve for every crawler. The minimum tag is:

<meta property="og:image" content="https://example.com/images/og.png">

A fuller head section supplies dimensions, MIME type, secure URL, and alternative text:

<meta property="og:title" content="Example article title">
<meta property="og:description" content="A concise description for the shared page.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/articles/example">
<meta property="og:image" content="https://cdn.example.com/og/example.png">
<meta property="og:image:secure_url" content="https://cdn.example.com/og/example.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Illustration for the example article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://cdn.example.com/og/example.png">

The Open Graph protocol defines og:image:secure_url, og:image:type, og:image:width, og:image:height, and og:image:alt as image properties. X/Twitter large-image previews use twitter:card set to summary_large_image. Keep the canonical URL, title, and image aligned so a crawler does not combine metadata from different pages.

Generate dynamic images with a URL or API

Dynamic generation is appropriate for blogs, documentation, ecommerce catalogs, and profiles. Store a template and substitute values such as title, author, price, or category. Prefer immutable URLs that include a content identifier or hash. That lets a CDN cache the result and prevents an old social preview from being silently replaced.

When accepting user-controlled values, escape HTML, limit string length, and reject unexpected URLs used as backgrounds. If a route renders on demand, return a cacheable response and make sure crawlers can reach it. Vercel recommends allowing OG routes in robots.txt.

Generate an OG image in code with Vercel OG

Vercel’s @vercel/og uses Satori and Resvg to convert a supported HTML/CSS tree into a PNG. The documented ImageResponse defaults to 1200×630 and adds immutable cache headers. It supports flexbox and a subset of CSS; advanced grid layouts are not supported. Fonts can be TTF, OTF, or WOFF, and the documentation lists a 500KB bundle limit.

import { ImageResponse } from 'next/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: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          padding: '72px',
          background: '#101828',
          color: '#ffffff',
          fontSize: 64,
          fontWeight: 700,
        }}
      >
        {title}
      </div>
    ),
    { width: 1200, height: 630 }
  )
}

Keep the component simple: use flexbox, explicit dimensions, and bundled fonts. Test long titles, missing data, non-Latin characters, and error states. If the route depends on a database, decide whether a failed lookup should return a fallback image or a non-success response; social crawlers generally handle a stable fallback better than an intermittent 500.

Capture an existing page or design with ScreenshotNeo

If the card already exists as a rendered HTML page, ScreenshotNeo can capture the page or a specific element. It supports PNG, JPEG, WebP, and PDF output, full-page capture with lazy images loaded, CSS selectors, custom CSS and JavaScript, dark mode, device presets, retina scale, waits, blocked resources, cookies, headers, and caching. Read the ScreenshotNeo documentation for the complete option list.

Its clean-shot processing accepts consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be disabled. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing result.

Or skip the browser setup

Use the ScreenshotNeo API when you want one request instead of managing a browser. The following calls capture the target page as WebP:

Cleaning page chrome before capturing the final image.

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,
)
r.raise_for_status()
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}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const bytes = Buffer.from(await res.arrayBuffer());
await fs.promises.writeFile('shot.webp', bytes);

Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents such as Claude or Cursor call take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

Relevant capture options

Viewport: choose a device preset or specify width and height; use retina scale for sharper assets.
Page scope: capture the full page or one element with a CSS selector.
Timing: wait for a selector, a fixed delay, or network idle. Lazy-loaded images often need full-page mode or an explicit wait.
Interaction: click an element before capture, inject JavaScript, or apply custom CSS.
Privacy and routing: set headers, cookies, user agent, Authorization, timezone, or geolocation.
Noise control: hide selectors and block ads, trackers, requests, or resource types.
Output: select PNG, JPEG, WebP, or PDF; resize images or use a transparent background where appropriate.
Delivery: cache with a chosen TTL, use signed links for public image tags, submit asynchronous jobs with signed webhooks, or capture up to 100 URLs in one bulk call.

Design and implementation checklist

Use 1200×630 unless a channel requires another ratio.
Keep text large, short, and readable without zooming.
Use a stable, publicly reachable HTTPS image URL.
Set og:image, dimensions, type, alt text, and twitter:card.
Generate one deterministic image per page, or include a version in the URL when content changes.
Allow dynamic image routes in robots.txt.
Validate after deployment on each target network because crawlers cache previews.
Check fallback behavior for missing titles, unavailable fonts, blocked assets, and very long localized strings.

Troubleshooting

The preview shows no image

Confirm that og:image is an absolute HTTPS URL and returns an image with a successful status. Check DNS, TLS, redirects, authentication, and robots rules. A private CDN URL cannot be fetched by a social crawler.

An old image remains after replacement

Social platforms cache metadata and image bytes. Publish a versioned filename or query value, keep the old URL available during the transition, and revalidate with the platform’s preview debugger when available.

The image is cropped

Use 1200×630, keep key content inside a generous safe area, and inspect the preview at the target platform’s card ratio. Do not put a logo or title against an edge.

Dynamic text overflows

Limit input length, insert controlled line breaks, reduce font size for long values, and provide a fallback title. Test numbers, emoji, right-to-left text, and accented characters.

Vercel OG returns a build or rendering error

Replace unsupported CSS with flexbox, ensure fonts are TTF, OTF, or WOFF, reduce bundled assets below the documented 500KB limit, and avoid fetching private resources at render time.

Wait for the page state you need, hide known selectors, block unnecessary requests, or use ScreenshotNeo’s consent and popup cleanup. For lazy content, use full-page capture or wait for a selector.

Performance, reliability, and cost

Pre-rendering at publish time removes request-time latency from page views. For dynamic routes, cache immutable outputs at a CDN and avoid regenerating the same title repeatedly. Bulk jobs reduce orchestration overhead for catalogs, while asynchronous jobs and signed webhooks keep long captures out of a user-facing request.

There is no universal engagement or speed winner among generators; the useful comparison axes are editing speed, template quality, client-side privacy, API support, permanence and caching, formats, font control, preview validation, and total cost. Track failed renders, cache hit rate, and crawler fetch errors in your own system.

With ScreenshotNeo, clean shots are the billable unit: failed loads, blank pages, bot checks, timeouts, and cache hits cost nothing, and X-Page-Verdict and X-Billed headers explain each response. Plans include Free (1,000/month), Starter ($5 for 3,000), Growth ($15 for 15,000), Pro ($39 for 60,000), Scale ($99 for 250,000), and Business ($249 for 1,000,000); yearly billing gives two months free, and every feature is available on every plan.

FAQ

Is an OG image the same as a favicon?

No. A favicon identifies a browser tab or bookmark; an OG image is the large visual attached to a shared URL.

Can I use WebP for an OG image?

PNG is the safest default for broad crawler support. If a target network documents WebP support, test that network and keep a PNG fallback where necessary.

Should every page have a unique image?

Unique images help readers distinguish shared links. For low-value pages, a consistent branded fallback is acceptable if it remains accurate.

The browser reads your page directly while the social app uses its own crawler and cache. Verify public access, metadata in the initial HTML, and the crawler’s cached copy.

Can an OG image endpoint require authentication?

Usually no. Social crawlers need unauthenticated access to the image URL. Put access control on the authoring API and publish a signed or public delivery URL for the final asset.