In brief: og:image tells Open Graph consumers which image URL to consider when representing a webpage as a rich link or social object. You place it as a <meta> element in the document’s <head>. Social networks and other clients may use that URL for a preview image, but each consumer can apply its own rules.
The tag is one of Open Graph’s four basic properties, alongside og:title, og:type and og:url. The protocol’s purpose is to let a web page become a rich object in a social graph; see the Open Graph protocol documentation.
What og:image does
An og:image declaration supplies a candidate image that represents a page when an Open Graph-aware service creates a link preview. For an article, that might be the article’s lead illustration; for a product page, it could be the product photo; for an event, it could be the event artwork.
The value is a URL, not image data embedded in the HTML. A minimal declaration looks like this:
#1 Best Overall
<meta property="og:image" content="https://example.com/images/article-preview.jpg">Put the element inside the page’s <head>. A crawler or preview client fetches the URL when it processes the page, then decides whether and how to display the image. Declaring the tag does not force every platform to use it, and it does not change the image shown inside your page.
How to add it correctly
1. Choose a page-specific image
Use an image that clearly represents the page being shared. A relevant, high-resolution image gives preview systems useful information; a generic company logo usually says less about the destination. Google says its image-preview selection is automated and can draw on several sources, including og:image. Its Image SEO Best Practices recommend relevant, representative, high-resolution images and caution against generic logos or extreme aspect ratios. Those are recommendations for influencing Google’s choice, not a guarantee of the result.
2. Use an absolute, fetchable URL
Use a complete URL such as https://example.com/images/story.jpg. Keep the asset publicly reachable by the services that need to fetch it, and serve it over HTTPS when possible. Check that the URL returns an image rather than an HTML error page, requires no interactive login, and does not expire before a crawler can retrieve it.
3. Add the tag to the HTML head
For server-rendered HTML, add the declaration directly between <head> and </head>:
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to make sourdough</title>
<meta property="og:title" content="How to make sourdough">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/sourdough">
<meta property="og:image" content="https://example.com/images/sourdough.jpg">
</head>
<body>...</body>
</html>The other Open Graph properties provide the title, object type and canonical URL. They are not substitutes for og:image; together they describe the object more completely.
Useful structured image properties
The protocol defines optional properties that add information about an image. Put each property after its corresponding root og:image declaration and before the next root image declaration.
| Property | Purpose | Example |
|---|---|---|
og:image:alt |
A description of what the image shows. The protocol recommends supplying it whenever og:image is present; it is not a caption. |
Fresh sourdough loaf on a wooden board |
og:image:width |
Image width in pixels. | 1200 |
og:image:height |
Image height in pixels. | 630 |
og:image:type |
The image’s MIME type. | image/jpeg |
og:image:secure_url |
An alternate URL for HTTPS use. | https://example.com/images/sourdough.jpg |
og:image:url |
An alias identical to og:image. |
https://example.com/images/sourdough.jpg |
Example with structured fields:
<meta property="og:image" content="https://example.com/images/sourdough.jpg">
<meta property="og:image:alt" content="Fresh sourdough loaf on a wooden board">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:secure_url" content="https://example.com/images/sourdough.jpg">The protocol does not establish one universal width, height, file format or aspect ratio that every consumer requires. Choose dimensions appropriate to the image and the services your audience uses, while avoiding an extremely tall or wide composition if you want a broadly usable preview.
What happens when a page has several images?
You can declare more than one root og:image. When a conflict exists, the Open Graph protocol says the first image in document order is preferred. Treat the first declaration as the primary preview:
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →<meta property="og:image" content="https://example.com/images/primary.jpg">
<meta property="og:image:alt" content="Primary article illustration">
<meta property="og:image" content="https://example.com/images/secondary.jpg">
<meta property="og:image:alt" content="Secondary article illustration">Keep each image’s structured fields immediately after that image’s root declaration. Do not place the second root declaration between an image and its width, height, type or alt fields.
Why a platform may show a different image
Automated selection
Consumers are not obligated to display the URL you supplied. Google explicitly says image-preview selection is automated and may use several sources, with og:image among them. A crawler can select another image if it considers it more representative, if the declared asset cannot be fetched, or if its own presentation rules intervene.
Cached previews
Preview services commonly cache fetched metadata and images. Correcting the tag therefore may not change an already-created preview immediately. Share the page again after the service refreshes its cache, and verify the live HTML rather than relying only on an old message.
Client-specific support
Open Graph metadata is a convention, not a universal rendering contract. A messaging app, search engine or social network can support different fields, image formats, cropping rules and refresh schedules. The official Open Graph specification is the authoritative reference for the properties themselves; platform-specific documentation is needed for a particular client’s behavior.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchBest Value
Debugging checklist
- Inspect the delivered source: View the page source or the server response and search for
property="og:image". A tag inserted only after client-side JavaScript runs may not be visible to a crawler that reads the initial HTML. - Check the URL directly: Open the image URL in a private window and confirm it returns the intended image without authentication, a redirect loop or an error document.
- Verify the spelling and attribute: The Open Graph form is
<meta property="og:image" content="...">. Do not put the URL innameor omitcontent. - Confirm the first image is intentional: If templates emit several tags, document order determines the preferred image when there is a conflict.
- Check associated fields: Keep
og:image:alt, dimensions and type after the correct root declaration. Make the alt value describe the visual content, not repeat a caption or marketing slogan. - Allow for cache delay: A corrected tag cannot retroactively update every cached preview at once.
- Review composition: Replace a generic logo or extreme aspect ratio with a relevant, representative image, following Google’s guidance.
Testing a page visually
Source inspection confirms that metadata exists, but a screenshot can reveal a different problem: a consent dialog, newsletter modal or chat widget covering the content you expect a browser to show. Capture the page after its scripts run, at the viewport and state you care about, and compare that result with the image selected for your preview. A screenshot is diagnostic evidence; it does not itself set og:image.
Or skip the browser setup
If you need a rendered page image for checking a layout or documenting how a page appears, ScreenshotNeo provides a website screenshot API and MCP server. It accepts a URL in one request and returns PNG, JPEG, WebP or PDF. Before capture, it can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups and chat widgets; each step can be disabled. Bot checks and CAPTCHAs, 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. Its MCP tools—take_screenshot, get_page_info and capture_pdf—work with Claude, Cursor and other MCP clients.
cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/article -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/article"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/article' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);See the ScreenshotNeo documentation for request options. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.
How og:image relates to accessibility
og:image:alt describes the shared image to consumers that support the field. It does not replace the normal alt attribute on an image displayed in the page, because the two belong to different contexts: Open Graph metadata describes a link preview, while HTML alt text describes an in-page image for users and assistive technology. Provide both when the image serves both purposes.
Practical implementation pattern
- Assign each indexable page a representative image URL.
- Emit one primary
og:imagein the initial HTML head. - Add
og:image:alt; add width, height, MIME type and secure URL when you know them and the target consumers benefit from them. - Keep optional fields grouped with their root image declaration.
- Inspect the delivered source and fetch the image URL independently.
- Test a real share or preview, then account for platform caching and automated selection.
Frequently Asked Questions
Is `og:image` required for every webpage?
No. It is an optional Open Graph image property, but adding a relevant image gives supporting consumers a candidate visual for the page’s rich preview.
Does `og:image` control the image in Google Search?
Not directly. Google says its image-preview choice is automated and can use several sources, including `og:image`; the tag influences the available information but does not guarantee the selected image.
Can I use a relative path such as `/photo.jpg`?
Use a complete absolute URL in the metadata so a consumer can resolve and fetch the asset consistently.
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.
Recommended Free Tools
