Add og:image as a <meta> element inside your document’s <head>. Its content value must be the URL of the image that represents the page. A complete basic Open Graph block also includes og:title, og:type, and og:url.
The minimal Open Graph image example
This is the smallest standards-based block to place in an HTML page. The four properties shown are the Open Graph protocol’s basic required properties: og:title, og:type, og:image, and og:url.
<html prefix="og: https://ogp.me/ns#">
<head>
<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/og-image.jpg" />
<meta property="og:image:alt" content="A concise description of the image contents" />
</head>
</html>The official protocol documentation is at ogp.me. The quoted image URL is not an image embedded in the HTML; it is a reference that a crawler can request. Use a complete URL rather than a relative path, and make sure the image can be reached by the service that reads your page.
Where the tags belong
Put them in the HTML head
Insert the Open Graph elements between <head> and </head>. They are metadata, not visible page content. In a server-rendered site, emit them in the response HTML for each page. In a template system, replace the title, canonical page URL, and image URL with values for the current route.
#1 Best Overall
Use an absolute image URL
The content value should identify the image itself, for example https://cdn.example.com/images/article-42.jpg. A crawler cannot use an image that is private, blocked, or otherwise inaccessible to it. HTTPS is the safest choice for both the page and the image; the protocol also defines og:image:secure_url for an HTTPS alternative.
Keep the page URL and image URL distinct
og:url identifies the page being shared. og:image identifies the representative image. Do not put the page URL in the image property unless that URL actually serves an image.
Open Graph image properties you can add
The root og:image property is enough to point to an image. These structured properties provide additional information about that image.
| Property | What it describes | Example |
|---|---|---|
og:image:url |
The image URL; the specification defines it as identical to og:image. |
https://example.com/og-image.jpg |
og:image:secure_url |
An HTTPS alternative for the image. | https://example.com/og-image.jpg |
og:image:type |
The image MIME type. | image/jpeg |
og:image:width |
The image width in pixels. | 1200 |
og:image:height |
The image height in pixels. | 630 |
og:image:alt |
A concise description of what the image contains. It is descriptive text, not a caption. | A blue dashboard showing monthly revenue |
The specification recommends supplying an alt description when og:image is present. Keep it specific enough to convey the visual subject without turning it into a marketing slogan.
What size should an Open Graph image be?
The Open Graph protocol documents width and height properties but does not mandate one universal pixel dimension. A current third-party Facebook guide recommends 1200 × 630 pixels. Treat that value as platform guidance, not as a protocol requirement, and recheck the guide when the platform changes its requirements: og-image.org Facebook platform guidance.
A 1200 × 630 image has a 1.91:1 aspect ratio. If your design uses another ratio, declare the real pixel dimensions in og:image:width and og:image:height; do not label a 1600 × 900 file as 1200 × 630. Supplying accurate dimensions helps consumers understand the asset before downloading it.
Declaring more than one image
You can repeat the root og:image tag to publish multiple candidates. Structured properties apply to the root image immediately before them. When consumers must choose between candidates, the first image has priority in conflicts.
<meta property="og:image" content="https://example.com/first.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image" content="https://example.com/second.jpg" />
<meta property="og:image:width" content="1600" />
<meta property="og:image:height" content="900" />In this example, the first image is the preferred candidate. Keep each image’s width, height, type, secure URL, and alt properties grouped directly after its own root tag. Adding a new root og:image starts a new group of structured properties.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →A complete reusable HTML template
Use this pattern in a page template, replacing every example value with data for the current page.
<!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/og-image.jpg" />
<meta property="og:image:secure_url" content="https://example.com/og-image.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 concise description of the image contents" />
</head>
<body>
<h1>Example page title</h1>
</body>
</html>- Change
og:titleand the document title together unless you intentionally want different text. - Set
og:urlto the canonical URL for this page. - Set
og:imageto the full URL of the intended image. - Make the declared MIME type, width, and height match the actual file.
- Write
og:image:altas a concise description of the visual content.
How to create and check the image
Design the asset
Create an image that still communicates its subject when shown at a small preview size. Put the important subject away from edges that might be cropped by a consuming platform. Export the file at the dimensions you intend to declare, then record its actual MIME type and pixel dimensions for the metadata.
Make the file reachable
Open the exact image URL in a browser without relying on a logged-in session. Check that it returns the image rather than an HTML error page, login form, consent wall, or redirect to a private location. If your server requires special headers or authentication, a crawler may not be able to retrieve it.
Inspect the generated HTML
View the page source or the server response and search for property="og:image". Confirm that the tags are in the head, that there is no accidental relative URL, and that the values belong to the page you are testing. If your framework renders metadata only in the browser after JavaScript runs, verify that the crawler you care about can see the rendered tags; server-rendering them avoids that dependency.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Common mistakes and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| No preview image appears | The og:image tag is missing, outside <head>, or has a malformed URL. |
Place one root tag in the head and test the exact absolute URL directly. |
| The wrong image is selected | Several root images are declared, or an old tag is still present in a shared template. | Remove unintended tags or put the preferred image first. Keep each image’s structured properties with its own root tag. |
| Dimensions do not match | The metadata describes a different file than the URL serves. | Measure the downloaded file and update og:image:width, og:image:height, and og:image:type. |
| HTTPS warning or blocked asset | The page uses HTTPS but the image URL is insecure, or the secure alternative is absent. | Serve the image over HTTPS and, when useful, provide og:image:secure_url. |
| The image URL shows an error page | The URL requires authentication, is blocked by access rules, or returns an application error. | Publish the image at a crawler-accessible URL and ensure the response serves the image file itself. |
| Alt text is unhelpful | The value is a slogan, filename, or generic phrase. | Describe the important visible subject in a short, literal sentence. |
| Changes are not visible immediately | A consumer may have retained an earlier page or image response. | Confirm the live HTML and image first, then allow the consuming service to fetch the updated values again. |
Or skip the browser setup
If the image you want to publish is a webpage capture, ScreenshotNeo can return a PNG, JPEG, WebP, or PDF from one GET request. It accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the capture; each cleanup step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the page verdict and billing result in X-Page-Verdict and X-Billed headers. For an Open Graph image, request an image format, host the resulting file at a public URL, and use that URL as og:image.
See the parameter reference in the ScreenshotNeo documentation. This cURL request captures a page to a WebP file:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webpPython equivalent:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://example.com/page"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js equivalent:
const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://example.com/page'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', data));ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. Its plans include 1,000 screenshots per month free with no card; paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.
FAQ
Does og:image upload or store the image?
No. The tag supplies a URL. Your site or image host remains responsible for storing and serving the file, and the URL must remain available when a consumer fetches it.
Can I use og:image:url instead of og:image?
The specification defines og:image:url as identical to og:image. Use the root og:image property in the basic block, and add the URL form only when your implementation specifically calls for it.
Best Value
Bottom line
Put an absolute image URL in og:image alongside og:title, og:type, and og:url inside the document head. Add accurate dimensions, MIME type, HTTPS alternative, and descriptive alt text when available. The protocol does not require one pixel size; 1200 × 630 is current Facebook-oriented guidance. If you publish several candidates, place the preferred image first and keep its structured properties directly after it.
Frequently Asked Questions
Does og:image upload or store the image?
No. The tag supplies a URL. Your site or image host stores and serves the file, and the URL must remain available when a consumer fetches it.
Can I use og:image:url instead of og:image?
The specification defines og:image:url as identical to og:image. Use the root property in the basic block, adding the URL form only when your implementation specifically requires it.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
