What Is an OG Image URL? · ScreenshotNeo

Direct answer: An OG image URL is the fully qualified URL in an HTML <meta property="og:image"> tag. It tells Open Graph consumers which publicly reachable image should represent your page when its link is shared.

Put the tag in the document’s <head>:

<meta property="og:image" content="https://example.com/images/share-card.jpg">

The URL points to the image file; it does not contain the image bytes. A crawler fetches that URL and uses the response to build a link preview.

How Open Graph image URLs work

The Open Graph protocol defines four basic properties for representing a page or object: og:title, og:type, og:image, and og:url. The specification describes og:image as “An image URL which should represent your object within the graph.” Open Graph Protocol specification

og:url and og:image have different jobs:

Property	Purpose	Example
`og:url`	Canonical URL identifying the page or object	`https://example.com/articles/og-images`
`og:image`	Image URL representing that page in a preview	`https://example.com/images/og-images.jpg`

Complete HTML example

Use all four basic properties in the page head. Add optional image metadata when you know the values.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>What Is an OG Image URL?</title>
  <meta property="og:title" content="What Is an OG Image URL?">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/guides/og-image-url">
  <meta property="og:image" content="https://example.com/images/og-image-url.jpg">

  <meta property="og:image:secure_url" content="https://example.com/images/og-image-url.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="A diagram showing how an OG image URL becomes a link preview">
</head>
<body>
  <h1>What Is an OG Image URL?</h1>
</body>
</html>

URL requirements and good defaults

Use an absolute URL. Include the scheme and hostname, such as https://example.com/image.jpg. A path like /image.jpg depends on the crawler resolving it against the page URL and is less portable.
Prefer HTTPS. HTTPS is the safest practical default, and Google’s structured metadata examples use HTTPS image URLs. Google Search Central structured data documentation
Make the file publicly fetchable. A crawler must be able to request the image without your login, a browser-only session, or an internal network connection.
Return the correct media type. Serve a JPEG, PNG, WebP, or another format supported by the sharing consumer with a matching Content-Type.
Keep the image representative. It should describe the page’s object, product, article, or video. og:image:alt is a description for accessibility and metadata; it is not a visible caption.

Optional structured properties

The protocol defines these properties for an image:

Tag	What it describes
`og:image:url`	An alias identical to `og:image`.
`og:image:secure_url`	An alternate HTTPS URL.
`og:image:type`	The image MIME type, such as `image/jpeg`.
`og:image:width`	Image width in pixels.
`og:image:height`	Image height in pixels.
`og:image:alt`	A text description of the image.

For multiple images, provide multiple og:image entries in the order you want consumers to consider them. Platform-specific selection rules, preferred dimensions, file-size limits, and cache behavior are not universal, so check the documentation for each network you target.

Where to put the OG image URL

Upload or generate the image at a stable, public location.
Open the page template that outputs the HTML <head>.
Add <meta property="og:image" content="..."> inside that head.
Add og:title, og:type, and og:url for a complete basic object.
Publish the page and request the image URL directly to confirm it is reachable.
Run the published page through an Open Graph parser or social-preview debugger. The Open Graph site references Facebook’s Object Debugger for inspection. Open Graph Protocol

Framework and CMS notes

In a static site, edit the shared head template. In a server-rendered application, emit values from the page’s data model so every route has its own canonical URL and image. In a client-rendered application, make sure the tags exist in the initial HTML response if the crawler does not execute JavaScript reliably. Confirm the final response source, rather than only the DOM after your browser finishes running scripts.

Generate an OG image from a page

You can design a static share card, render HTML/CSS in a browser, or use a screenshot API. A screenshot should be hosted at a stable public URL before you place that URL in og:image.

Or skip the browser setup

ScreenshotNeo creates a PNG, JPEG, WebP, or PDF from one GET request. It accepts cookie and consent banners, then 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 cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed.

See the ScreenshotNeo API documentation for all options.

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

import requests

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

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/guides/og-image-url' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const bytes = await res.arrayBuffer();
// Save bytes as og-image.webp with your runtime's file API.

Host the resulting file at a public HTTPS address, then use that address as the og:image value. ScreenshotNeo also supports full-page capture with lazy images loaded, CSS element capture, device presets, custom viewport and retina scale, custom CSS and JavaScript, click and wait actions, blocked resource types, custom headers and cookies, timezone and geolocation, resizing, caching with a chosen TTL, signed public links, asynchronous jobs, bulk capture, and HTML/CSS to image.

An MCP server provides take_screenshot, get_page_info, and capture_pdf tools to Claude, Cursor, and other MCP clients. Plans include 1,000 free shots per month with no card; paid plans start at $5 for 3,000 shots. Every feature is available on every plan. Create a free ScreenshotNeo account.

Why a link preview image can be missing

Symptom	Likely cause	Fix
No image appears	The tag is absent, misspelled, or outside `<head>`.	Publish a correctly spelled `og:image` meta tag in the head.
Image URL works in your browser but not to crawlers	Authentication, robots/network controls, or an internal hostname blocks fetches.	Make the asset publicly reachable and test without browser cookies.
Preview shows an old image	The sharing service cached an earlier response.	Verify the current HTML and use that service’s debugger or refresh workflow.
Only some platforms show it	Consumers have different parsing, format, dimension, and cache rules.	Check each target platform and provide optional type and dimension tags.
Wrong image appears	Several image tags exist or the consumer selected another valid entry.	Remove unintended entries and order multiple images deliberately.
Broken or blank preview	The server returns an error, redirects unexpectedly, or sends the wrong content type.	Request the URL directly, inspect status and headers, and return the actual image bytes with a matching MIME type.
Image appears after a delay only	Tags are injected by client-side JavaScript.	Render metadata in the initial server response when possible.

Performance, reliability, and cost considerations

Serve the image from dependable public hosting and avoid generating it synchronously during every crawler request.
Use a stable URL. If you change the pixels, a versioned filename or query string can help distinguish a new asset, while platform caches may still persist.
Keep metadata generation separate from image generation. The page should render its head even if a background job is producing a new card.
For automated captures, wait for a known selector or network idle when the design depends on late-loaded content. Use a fixed delay only when necessary.
Cache identical captures when content has not changed. ScreenshotNeo lets you choose a cache TTL; cache hits are not billed.
Use asynchronous jobs and signed webhooks for slow or high-volume capture workflows, and bulk capture for up to 100 URLs per call.
Do not put API keys in public page HTML. Generate the image server-side, then publish only the resulting image URL.

Implementation checklist

Image is representative of the page.
og:image is inside <head>.
Value is an absolute HTTPS URL.
URL is publicly fetchable without authentication.
Image response has a correct MIME type.
og:title, og:type, and og:url are present.
Optional secure URL, type, dimensions, and alt text are accurate.
Published HTML has been checked with a parser or social-preview debugger.
Each important social platform has been checked after publishing.

FAQ

Is an OG image URL the same as the page URL?

No. og:url identifies the page; og:image identifies the representative image file.

Can I use a relative URL?

An absolute, fully qualified HTTPS URL is the reliable choice because every consumer can resolve it without guessing the base URL.

Does the tag download or embed the image?

No. It supplies an address that a sharing consumer fetches later.

Do I need every optional image property?

No. The basic og:image URL is the essential value; type, dimensions, secure URL, and alt text improve clarity and compatibility when supplied accurately.

Why does changing the file not immediately change a preview?

Sharing services can cache page metadata and images. Confirm the published source first, then use the relevant debugger or cache-refresh process.