Open Graph Images for Sharing on Social Networks

To make an image appear when someone shares your page, publish a publicly reachable image and reference it in the page head with og:image. Add the other required Open Graph properties, use an absolute HTTPS URL, and validate the result with a preview debugger before sharing.

1. The complete Open Graph setup

The Open Graph protocol lets a web page become a rich object in a social graph. Its core properties are og:title, og:type, og:image, and og:url. The optional og:description supplies the text shown with the image. See the Open Graph protocol documentation.

<!doctype html>
<html prefix="og: https://ogp.me/ns#">
<head>
  <meta charset="utf-8">
  <title>Example page title</title>

  <meta property="og:title" content="Example page title">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:image" content="https://example.com/images/share-card.jpg">
  <meta property="og:description" content="A concise description of the page.">

  <meta property="og:image:secure_url" content="https://example.com/images/share-card.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="Description of the image content">
</head>
<body>
  ...
</body>
</html>

Put these tags in the server-rendered <head>. Use the property attribute, not name. The image is a URL in metadata; it is not uploaded into the social network when a person shares the page.

Required and recommended fields

Property	Purpose	Guidance
`og:title`	Preview headline	Use the page’s specific title.
`og:type`	Object type	Use `website` for a normal page.
`og:url`	Canonical shared URL	Use the final canonical HTTPS URL.
`og:image`	Preview image URL	Use an absolute, publicly fetchable HTTPS URL.
`og:description`	Supporting preview text	Keep it concise and specific.
`og:image:secure_url`	HTTPS image URL	Useful when the page is HTTPS.
`og:image:type`	MIME type	For example, `image/jpeg` or `image/png`.
`og:image:width`, `og:image:height`	Intrinsic dimensions	Declare the actual pixel dimensions.
`og:image:alt`	Accessible image description	Add it whenever `og:image` is present.

2. Choose dimensions, format, and layout

LinkedIn’s official sharing guidance lists a minimum of 1200 × 627 pixels and accepts JPG, PNG, or GIF. A 1200 × 630 canvas is a practical cross-platform baseline because its ratio is nearly identical. It is a design choice, not a universal guarantee for every network.

Keep the title, logo, and subject inside a central safe area. Preview cards can crop differently on mobile and desktop.
Use JPG for photographic artwork and PNG when sharp graphics or transparency matter.
Serve the file with the matching image MIME type and stable cache behavior.
Keep the file publicly readable without cookies, authentication, or a signed session.
Make the image legible when reduced to a small card.

3. Generate the image from HTML and CSS

HTML and CSS make repeatable social cards easier to maintain than manually edited files. Create a fixed 1200 × 630 composition, render the title and supporting details, and capture that page with a browser tool.

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=1200">
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      width: 1200px;
      height: 630px;
      font-family: Inter, Arial, sans-serif;
      background: #101827;
      color: #f8fafc;
    }
    .card {
      width: 100%;
      height: 100%;
      padding: 76px 86px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: radial-gradient(circle at 80% 20%, #2563eb, transparent 42%), #101827;
    }
    h1 { max-width: 900px; margin: 0; font-size: 74px; line-height: 1.05; }
    p { max-width: 760px; margin: 24px 0 0; font-size: 30px; color: #cbd5e1; }
    .brand { font-size: 26px; letter-spacing: .08em; text-transform: uppercase; }
  </style>
</head>
<body>
  <main class="card">
    <div>
      <div class="brand">Example site</div>
      <h1>Open Graph Images for Social Sharing</h1>
      <p>A practical guide to reliable link previews.</p>
    </div>
    <div>example.com</div>
  </main>
</body>
</html>

When capturing this template, wait for the web fonts and images to load. Hide controls and debug elements, and capture the card element rather than the full page if your browser automation supports element selectors.

4. Capture and publish the file

Render the card at 1200 × 630 or another deliberate size.
Wait for fonts, remote images, and any asynchronous content.
Capture the card as JPG, PNG, or WebP.
Upload it to a stable HTTPS URL such as https://example.com/images/share-card.jpg.
Set the Open Graph tags to that exact URL.
Fetch the URL without a logged-in browser and confirm the response is an image with the intended dimensions.

Multiple images and precedence

You may declare multiple og:image values. When values conflict, the first image is preferred. Put the intended primary image first, followed immediately by its structured properties:

<meta property="og:image" content="https://example.com/images/primary.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Primary article illustration">
<meta property="og:image" content="https://example.com/images/fallback.jpg">

View the raw HTML and confirm every tag is inside <head>.
Check that og:image is absolute HTTPS and does not require authentication.
Request the image directly and verify its status, MIME type, and dimensions.
Inspect the card at mobile size for cropping and unreadable text.
Run the URL through a social preview debugger. OpenGraph.dev documents how networks apply their own image, fallback, and cache rules and provides URL preview tooling.
After changing an image, re-run the relevant network inspector. Existing previews can remain cached.

6. Or skip the browser setup

ScreenshotNeo captures a URL through an API and can render an HTML/CSS social-card page for you. Its cleanup steps accept cookie and consent banners and remove 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 the response identifies the result with X-Page-Verdict and X-Billed headers.

See the ScreenshotNeo API documentation for the available capture options, including element capture, custom CSS and JavaScript, wait conditions, device presets, retina scale, image format, caching, and signed links.

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

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/social-card"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/social-card' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());

ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots each month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

7. Troubleshooting common failures

Symptom	Likely cause	Fix
No image appears	Missing tag, wrong attribute, or tag outside `<head>`	Use `property="og:image"` in the server-rendered head.
Old image still appears	Social platform cache	Re-run its URL inspector after publishing the new file and allow cache refresh time.
Image request fails	Relative URL, HTTP URL, authentication, robots or firewall rule	Use a public absolute HTTPS URL and test it without a session.
Wrong image selected	Several `og:image` tags	Put the intended image first and keep its structured fields adjacent.
Image is cropped badly	Platform-specific preview ratio	Use a central safe area and test at mobile card size.
Broken or blank capture	Fonts, scripts, lazy images, or consent UI were not ready	Wait for a selector or network idle, load lazy content, and hide overlays before capture.
Wrong dimensions or format	Rendered viewport differs from the design	Set the capture viewport explicitly and verify the downloaded file’s metadata.

8. Performance, reliability, and cost

Generate cards ahead of time for stable pages; regenerate only when title, artwork, or branding changes.
Use caching with a TTL appropriate to your publishing workflow. Version image URLs when an immediate cache separation is needed.
Keep third-party fonts and images to a minimum so crawlers and capture jobs have fewer failure points.
Use deterministic data and fixed dimensions. Avoid animations and time-dependent content.
For high-volume publishing, queue captures and retry transient network failures. Check the returned verdict and billing headers before storing a result as successful.
With ScreenshotNeo, cache hits and failed loads are not billed; clean successful shots are the billable result.

9. Open Graph image checklist

og:title, og:type, og:url, and og:image are present.
The image URL is absolute, HTTPS, public, and stable.
Width, height, MIME type, and alt metadata match the file.
The image meets your target network’s documented dimensions and format rules.
Important artwork and text sit inside a central safe area.
A debugger has fetched the final URL successfully.
You revalidated after changing a cached image.

10. FAQ

Does `og:image` upload the image to Facebook or LinkedIn?

No. It tells the crawler which public image URL to fetch when it builds the preview.

Can I use a relative image path?

Use an absolute HTTPS URL. Relative paths are a common reason crawlers cannot fetch the image.

Which image size should I start with?

Use 1200 × 630 as a practical baseline, while checking each network’s current guidance.

Why does the debugger show the new image but a shared link shows the old one?

Preview caches are independent and can update at different times. Re-run the platform’s inspector after the new file is live.

Should every page have a unique image?

A unique image helps readers distinguish shared pages, but a consistent fallback is useful for pages without custom artwork.