How to Use Relative URLs for Open Graph Images

Use a fully qualified absolute URL in og:image. Write the scheme, host, and path directly in the content value, for example:

<meta property="og:image" content="https://example.com/images/share.jpg">
<meta property="og:image:alt" content="A description of the shared page image">

A relative value such as /images/share.jpg depends on the consumer to infer the page origin. The Open Graph Protocol documents og:image as an image URL and its example uses a complete URL, so an absolute value is the dependable implementation choice. The protocol does not specify identical relative-URL handling for every crawler or messaging client.

What “relative” means here

A relative image path omits some or all of the URL:

<meta property="og:image" content="/images/share.jpg">
<meta property="og:image" content="images/share.jpg">

An absolute URL includes the scheme and host:

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

When your application stores only /images/share.jpg, combine that path with the canonical site origin while rendering the HTML. Do not expect a preview consumer to know which deployment host, protocol, or base path you intended.

Required and optional Open Graph image properties

og:image is one of the four required basic Open Graph properties. Add the structured image properties that describe the asset:

Property	Purpose
`og:image`	Absolute URL representing the page in the graph.
`og:image:url`	Equivalent to `og:image`.
`og:image:secure_url`	Alternate HTTPS URL for an image on an HTTPS page.
`og:image:type`	Image MIME type, such as `image/png`.
`og:image:width`	Image width in pixels.
`og:image:height`	Image height in pixels.
`og:image:alt`	Description of what is in the image, rather than a caption.

The protocol recommends supplying og:image:alt whenever og:image is present. See the Open Graph Protocol documentation for the property definitions.

Correct static HTML

<!doctype html>
<html lang="en">
  <head>
    <meta property="og:title" content="Relative URLs for Open Graph Images">
    <meta property="og:type" content="article">
    <meta property="og:url" content="https://example.com/guides/open-graph-images">
    <meta property="og:image" content="https://example.com/images/share.jpg">
    <meta property="og:image:secure_url" content="https://example.com/images/share.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 an absolute image URL">
  </head>
</html>

Generate the absolute URL in an application

JavaScript (Node.js)

const origin = 'https://example.com';
const imagePath = '/images/share.jpg';
const imageUrl = new URL(imagePath, origin).href;

console.log(`<meta property="og:image" content="${imageUrl}">`);

Keep the origin in configuration for each environment. A production canonical origin should not be replaced by a temporary preview hostname unless that is intentional.

Python

from urllib.parse import urljoin

origin = "https://example.com"
image_path = "/images/share.jpg"
image_url = urljoin(origin, image_path)
print(f'<meta property="og:image" content="{image_url}">')

Template example

<meta property="og:image" content="{{ site_origin }}{{ image_path }}">

Ensure site_origin includes the scheme and has no accidental double path prefix. Escape the final value for HTML attributes.

Framework and deployment details

Static sites: hard-code the production origin or expose it as a build-time setting.
Server-rendered apps: derive the origin from trusted configuration and render the tag in the initial HTML response.
CDNs and object storage: use the public HTTPS asset URL, not an internal bucket address.
Subpaths: preserve the application base path, such as https://example.com/docs/images/share.jpg.
Multi-tenant sites: select the origin from the tenant’s verified canonical host rather than an arbitrary request header.
Staging: prevent staging pages from publishing staging image hosts if those pages can appear in production previews.

Image selection and accessibility

Choose an image that represents the page and avoid generic imagery or extreme aspect ratios. Google Search Central recommends relevant, representative, high-resolution images when possible; these are image-selection recommendations, not a universal social-platform dimension rule. Read its image guidance.

Write og:image:alt as a concise description of visible content: “Blue architecture diagram showing request, browser capture, and PNG output.” Do not use it as a marketing caption or repeat the page title.

Validate the rendered result

Open the page’s final HTML response, not only the template source.
Confirm og:image starts with https:// (or another intentional scheme) and contains the correct host.
Request the image URL directly and verify it returns the intended image content type.
Check that redirects, authentication, robots rules, and firewall settings do not block the consumers that must fetch it.
Inspect the canonical URL and image URL in the same environment where the preview is generated.

curl -I https://example.com/images/share.jpg
curl -s https://example.com/guides/open-graph-images | grep -i 'og:image'

Common failures and fixes

Symptom	Likely cause	Fix
No image in the preview	Relative path, malformed origin, or blocked fetch	Render an absolute HTTPS URL and make the asset publicly reachable.
Old image remains	Preview consumer cached earlier metadata	Keep the URL stable while debugging markup, then use the consumer’s documented refresh tool or a deliberate versioned filename.
Image works in a browser but not for a crawler	Authentication, hotlink protection, firewall, or user-agent rule	Allow the required fetch and return the image without an interactive session.
Wrong host in production	Origin inferred from a preview request or proxy header	Use a configured canonical origin and validate proxy configuration.
Broken path under a subdirectory	Path joined against the current document instead of the site root	Resolve the stored path against the canonical origin with a URL library.
Alt text missing	Only `og:image` was emitted	Add `og:image:alt` describing the image content.

Performance, reliability, and cost considerations

Generating a string URL is effectively constant-time; the expensive operation is the consumer’s later image fetch. Serve a cacheable image with a correct MIME type, avoid unnecessary redirects, and keep the metadata in the initial HTML so crawlers do not need client-side JavaScript. If image URLs are generated dynamically, cache the rendered page or computed URL rather than regenerating image bytes for every request.

There is no universal image dimension mandated by the sources for this question. Select dimensions appropriate to the channels you support, and verify the result in those channels.

Or skip the browser setup

If you need to generate the Open Graph image itself, ScreenshotNeo returns a clean PNG, JPEG, WebP, or PDF from one GET request. It can capture a full page or an element, apply custom CSS or JavaScript, wait for a selector or network idle, use a chosen viewport and retina scale, and cache results with a TTL you choose. Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status.

See the ScreenshotNeo API docs for parameters. cURL:

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

Python:

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

Node.js:

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

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 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

FAQ

Are relative `og:image` URLs forbidden?

The protocol’s example is absolute and does not define uniform relative-path resolution across consumers. Use an absolute URL for predictable behavior.

Should I include both `og:image` and `og:image:url`?

og:image:url is documented as identical to og:image; one absolute og:image is sufficient unless your integration specifically benefits from both.

Does `og:image:secure_url` replace `og:image`?

No. Keep og:image and add the secure URL as an alternate HTTPS value when useful.

Can JavaScript add the tag after page load?

Render it in the initial HTML response. Consumers may not execute client-side JavaScript before reading metadata.