Outdated 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 matchPC 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 & 11Direct answer: The og:image metadata property gives Open Graph consumers a candidate image URL to represent a webpage or other object in a rich link preview. You place it as a <meta> element in the document’s HTML <head>. Social platforms and search systems may use that image, but each consumer decides whether and how to display it.
What og:image does
og:image is one of the Open Graph protocol’s four basic properties, alongside og:title, og:type and og:url. Open Graph is intended to let a web page become a rich object in a social graph. The image property tells a consumer which image should represent that object when it creates a card, message preview or other rich presentation.
The tag does not insert an image into the page itself. It is metadata, not a replacement for an HTML <img> element, CSS background or page hero image. A crawler reads the metadata from the document head and then decides whether to fetch and display the referenced resource.
A minimal declaration is:
<meta property='og:image' content='https://example.com/images/article-preview.jpg'>The Open Graph specification documents the property and its structured fields at ogp.me.
#1 Best Overall
How the core Open Graph properties fit together
| Property | Purpose |
|---|---|
og:title |
The title of the object or page shown in a rich representation. |
og:type |
The kind of object being described. |
og:image |
A candidate image URL representing the object. |
og:url |
The canonical URL identifying the object. |
Using the four together gives a consumer enough basic context to build a link representation. A page can expose additional metadata, but adding more tags cannot force a platform to use a particular layout.
How to add og:image to a page
- Choose a representative image. Select an image that explains or depicts the page rather than a generic site mark.
- Use an absolute URL. Put the complete HTTP or HTTPS URL in the
contentattribute so a remote consumer can request it without resolving a relative path. - Place the tag in the document head. Metadata in the body may not be read consistently by crawlers.
- Publish and inspect the rendered HTML. Confirm that the response delivered to a crawler contains the tag, not only HTML generated after a user-side script runs.
For example:
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>How to tune a database index</title>
<meta property='og:title' content='How to tune a database index'>
<meta property='og:type' content='article'>
<meta property='og:url' content='https://example.com/guides/database-indexes'>
<meta property='og:image' content='https://example.com/images/database-indexes.jpg'>
<meta property='og:image:alt' content='A query plan with an index highlighted'>
<meta property='og:image:width' content='1600'>
<meta property='og:image:height' content='900'>
<meta property='og:image:type' content='image/jpeg'>
</head>
<body>…</body>
</html>The image URL should be reachable by the consumer that needs it. Authentication requirements, robots rules, redirects, network failures or a response that is not actually an image can prevent a preview from using it.
Structured image properties
The protocol defines optional properties that add information about the image. Put them immediately after their associated root og:image declaration.
| Property | What it supplies | Example |
|---|---|---|
og:image:alt |
A description of what the image shows. The protocol recommends that a page specifying og:image also provide this description; it is not a caption. |
og:image:alt = A query plan with an index highlighted |
og:image:width |
The image width in pixels. | 1600 |
og:image:height |
The image height in pixels. | 900 |
og:image:type |
The image MIME type. | image/jpeg |
og:image:secure_url |
An alternate URL to use when an HTTPS resource is required. | https://example.com/images/database-indexes.jpg |
og:image:url |
An alias identical to og:image. |
The same URL as the root property. |
These fields describe the declared resource; they do not guarantee that a consumer will display every field or preserve the image’s original dimensions.
Choosing an image that is likely to work well
Make it relevant
Use an image that clearly represents the page’s subject. For an article, that might be a diagram, product photograph or illustration tied to the headline. A generic company logo gives a consumer little context and is specifically discouraged by Google for image previews.
Prefer a high-resolution source
Google says its image-preview choice is automated and can draw from several sources, including og:image. Its Image SEO Best Practices guidance recommends a relevant, representative, high-resolution image. This is guidance for influencing the selection, not a promise that Google or another service will choose the Open Graph image.
Check the shape
Avoid an extremely wide, extremely tall or otherwise unusual aspect ratio when the image is intended for a card. The reviewed guidance does not establish one universal width, height or aspect ratio that every consumer requires, so choose dimensions appropriate to the design and test the result in the destinations that matter to you.
Multiple og:image declarations
A page may declare more than one image. The Open Graph protocol treats the first image from top to bottom as preferred when there is a conflict. Associate each image’s structured fields with the root declaration that precedes them, and put the next root og:image only after the preceding image’s fields:
Recommended Free Tools
<meta property='og:image' content='https://example.com/images/primary.jpg'>
<meta property='og:image:alt' content='The primary article illustration'>
<meta property='og:image:width' content='1600'>
<meta property='og:image:height' content='900'>
<meta property='og:image' content='https://example.com/images/alternate.jpg'>
<meta property='og:image:alt' content='An alternate crop of the illustration'>Do not assume that every consumer will offer a gallery or let a visitor choose among the images. If one image is the intended default, declare it first.
Why a preview may not show the image you set
The consumer selected another source
Google’s selection is automated and may use several image sources. Other Open Graph consumers have their own parsers and presentation rules. Consequently, a valid tag is a candidate, not a rendering command.
The wrong image is first
When several root declarations exist, an earlier one can win. Inspect the order in the final HTML, including tags inserted by a framework, theme or plug-in.
The crawler cannot retrieve the resource
Open the exact image URL without a logged-in session and verify that it returns the intended bytes with an image content type. Check HTTPS certificates, redirects, access controls, hotlink protection and server errors. A URL that works only in your browser may fail for a remote fetcher.
Free tools Windows power users keep installed
One-click scans. No signup required.
The tag is not in the delivered head
View the page source or the server response, not only the post-JavaScript DOM in developer tools. Server-side rendering, static generation or a framework’s head component should emit the metadata in the initial HTML response.
The image itself is unsuitable
A tiny, blank, irrelevant or extreme-ratio file can be rejected or displayed poorly even when the markup is syntactically correct. Replace it with a clear, high-resolution representative image and provide accurate dimensions and alt text.
A practical verification workflow
- Inspect the source. Search the delivered
<head>forproperty='og:image'. Confirm the URL is absolute and that the intended image is first. - Check the asset directly. Request the URL anonymously, follow redirects, and verify the final response is successful and identifies an image MIME type.
- Compare metadata to the file. Make sure
og:image:widthandog:image:heightmatch the actual pixel dimensions when you provide them. - Review accessibility text. Write
og:image:altas a concise description of visible content, not marketing copy or a caption. - Test each destination. Preview behavior differs between consumers, and a change may not appear immediately if a service has retained an earlier fetch.
DIY way to inspect the rendered page
If you need to see what a page looks like after its scripts run, use a real browser or an automated browser such as Playwright. Wait for the page to load, dismiss consent UI when appropriate, and capture the page or the relevant element. This visual check complements source inspection: a screenshot can reveal a broken hero image or an overlay, but it cannot prove which metadata a social crawler parsed.
Keep the two checks separate. Read the HTML response to verify og:image; use a rendered capture to verify the visible page and image asset. If the page changes based on viewport, user agent, cookies or geolocation, repeat the checks under the conditions used by your audience.
Best Value
Or skip the browser setup
ScreenshotNeo can capture a rendered page with one request, which is useful for checking whether the image and surrounding layout appear as expected after JavaScript runs. It does not replace reading the HTML metadata, but it removes much of the browser orchestration.
cURL (the API documentation is at screenshotneo.com/docs/):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpPython:
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}`);Before the capture, ScreenshotNeo accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be turned off. Only clean shots are billed. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and response headers identify the page verdict and whether it was billed (X-Page-Verdict and X-Billed).
For this verification task, useful options include full-page capture with lazy images loaded, a chosen viewport or device preset, retina scale, waiting for a selector, delay or network idle, hiding selectors, custom CSS or JavaScript, and blocking ads, trackers or selected resource types. You can also capture one element by CSS selector, use custom headers, cookies, user agent, timezone or geolocation, and choose PNG, JPEG or WebP output. ScreenshotNeo provides an MCP server with take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Plans include a free allowance of 1,000 shots each month without a card. Paid plans start at $5 for 3,000 shots; the other listed plans are Growth at $15 for 15,000, Pro at $39 for 60,000, Scale at $99 for 250,000 and Business at $249 for 1,000,000. Yearly billing gives two months free, and every feature is available on every plan. Create a free ScreenshotNeo account to try the capture without adding a card.
Common implementation mistakes
- Using a relative path: replace
/images/card.jpgwith the complete image URL. - Putting tags in the body: move them into the initial HTML head.
- Declaring an unintended first image: reorder root declarations so the preferred image appears first.
- Providing inaccurate structured data: update width, height, MIME type and alt text when the asset changes.
- Expecting a guaranteed Google result: treat
og:imageas an input to an automated decision, not a command. - Testing only a logged-in browser: test the public URL as an unauthenticated remote consumer would.
Frequently Asked Questions
Is og:image the same as an image sitemap entry?
No. og:image is an Open Graph property attached to a page or object for rich representations. An image sitemap is a separate discovery mechanism with different markup and processing.
Can a page describe an image without showing it visibly?
Yes. The property is metadata in the document head, so the declared image can represent the page even when it is not the page’s visible hero image. It should still be relevant to the object it represents.
Who controls the final crop or card layout?
The consuming service controls presentation. Open Graph supplies the candidate URL and optional descriptors; the consumer can crop, resize, omit or replace the image according to its own rules.
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.
