The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →An Open Graph image is the image URL declared in a webpage’s og:image metadata. Social networks and other link-preview consumers use that URL as the representative picture when someone shares the page. It is not an inline <img> element and does not change the image a visitor sees inside the page.
The Open Graph protocol turns a normal webpage into a rich object in a social graph. Its four required properties are og:title, og:type, og:image, and og:url, as defined by the official Open Graph protocol.
What does og:image do?
When a platform fetches a page URL to build a preview, it reads metadata in the document’s <head>. The og:image value tells the platform which publicly reachable image should represent that page. A preview may show the image beside the title, description, and destination URL.
The value must be a URL, normally an absolute HTTPS URL such as https://example.com/images/article-preview.jpg. It points to an image file; it does not contain the image pixels inline. The social platform downloads the asset, caches it, and decides how to crop or display it in its own interface.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Open Graph is a protocol rather than a single social network. Facebook’s protocol project and other consumers can interpret the same metadata, but each service can impose additional size, format, caching, or cropping rules. Treat the protocol as the common foundation, not a promise that every platform will render an identical card.
Open Graph properties you should publish
Place Open Graph tags in the HTML document’s <head>. The protocol requires four properties; image-related structured properties add useful technical and accessibility information.
| Property | Purpose | Practical guidance |
|---|---|---|
og:title |
The page’s title in a rich preview. | Use the specific page title, not a generic site name. |
og:type |
The kind of object, such as an article or website. | Choose a value that matches the page. |
og:url |
The canonical URL of the object. | Use the preferred, absolute URL for that page. |
og:image |
The representative image URL. | Use an absolute, publicly reachable URL. |
og:image:secure_url |
An HTTPS version of the image. | Useful when the primary image value could be non-HTTPS. |
og:image:type |
The image MIME type. | For example, image/jpeg or image/png; make it agree with the response. |
og:image:width |
Declared pixel width. | Report the actual asset dimensions. |
og:image:height |
Declared pixel height. | Report the actual asset dimensions. |
og:image:alt |
Alternative text describing what is in the image. | Describe the visual content; it is not a caption or marketing slogan. |
The protocol specification allows multiple og:image tags. If values conflict, the first image is preferred. Structured properties belong to the image root tag that comes immediately before them, so keep each image and its width, height, type, and alt fields together.
Complete HTML example
This head declares the required properties and the structured image fields for one JPEG asset:
Free tools Windows power users keep installed
One-click scans. No signup required.
<html prefix="og: https://ogp.me/ns#">
<head>
<meta property="og:title" content="Example article" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:image" content="https://example.com/images/article-preview.jpg" />
<meta property="og:image:secure_url" content="https://example.com/images/article-preview.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:alt" content="Description of the article preview image" />
</head>
</html>Replace every example value with the title, canonical URL, dimensions, MIME type, and meaningful description for your own page. The image URL must work without a login, session cookie, or browser-only JavaScript. If a CDN or image service changes the file, update the declared dimensions and type so they remain accurate.
What size should an Open Graph image be?
There is no single universal dimension enforced by the Open Graph protocol. Platforms can crop, resize, or reject images according to their own sharing modules. LinkedIn’s sharing documentation currently lists a minimum image size of 1200 × 627 pixels for its sharing module. That figure is a LinkedIn requirement, not a rule that automatically applies to every network. Check the destination platform’s current documentation when a particular channel matters.
Regardless of the service, design for reduction. Put important text, logos, and faces away from the edges because a card may crop the image into a different ratio. Use a high-resolution source, strong contrast, and a composition that remains understandable as a small thumbnail. Declare the real width and height rather than copying a recommended number onto a differently sized file.
How to add an Open Graph image to a website
- Create the asset. Export a web-compatible JPEG, PNG, or another format accepted by your target platform. Keep the subject and any essential text inside a safe central area.
- Publish it at a stable URL. Upload the file to your own site or an image CDN. Confirm that an unauthenticated request returns the image with the correct
Content-Type. - Add metadata to the page template. Insert
og:title,og:type,og:url, andog:imagein the<head>. Add secure URL, type, width, height, and alt fields when you know their values. - Use one deliberate first image. If you publish fallbacks, put the preferred image first and keep each image’s structured fields directly below its root tag.
- Deploy the page. Make sure the final HTML delivered to crawlers contains the tags; tags added only after client-side JavaScript runs may not be read by every consumer.
- Inspect and share. Fetch the public URL, inspect the returned head, and test a share in the platform you care about. Preview services cache metadata, so a corrected tag may not appear immediately.
How to choose and validate the image
Coverage
Confirm that the target platform accepts the declared dimensions and format. LinkedIn’s documented minimum is 1200 × 627 pixels; other services may publish different limits or recommendations.
Clarity
View the asset as a small card and consider alternate crops. A clean background and short, high-contrast text usually survive reduction better than a detailed screenshot.
Technical validity
- Use an absolute HTTPS URL.
- Return the image directly rather than an HTML error page or login redirect.
- Send a supported and accurate MIME type.
- Make
og:image:widthandog:image:heightmatch the actual file. - Ensure robots, firewall, and hotlink rules do not block the platform’s crawler.
Accessibility
Write og:image:alt as a concise description of what the image shows. The protocol specification distinguishes this from a caption: describe the visual content rather than adding a call to action.
Rank #3
Control
One image avoids precedence surprises. If you need multiple alternatives, remember that consumers prefer the first og:image and associate structured properties with the root tag immediately before them.
Why is my link preview image wrong?
The old image is cached
Social platforms cache fetched metadata and images. After changing the tag or file, use the platform’s own URL-inspection or sharing-debugging workflow to request a fresh fetch, then allow for its cache policy. Renaming the asset or using a new URL can help distinguish a new file from an old cached object.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsA different image appears first
Inspect the final HTML for duplicate og:image tags emitted by a theme, SEO plugin, or framework. Move the intended image to the first position and keep its structured fields together.
The crawler cannot fetch the asset
Open the image URL in a private browser window and make a request without your session. Check HTTPS certificates, redirects, authentication, robots and firewall rules, response status, and the Content-Type header. A URL that works only after JavaScript executes is not a reliable image URL.
The image is cropped or blank
Compare the asset’s aspect ratio with the platform’s card. Keep critical content away from edges, use the documented minimum for the service, and verify that the declared dimensions match the file. A blank preview often indicates an access failure, unsupported format, or an HTML response masquerading as an image.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Metadata exists in a template but not in production
View the deployed page source or fetch it with an HTTP client. Server-side routing, canonical redirects, staging configurations, and cache layers can produce different head markup from your local development page.
Preview the deployed page before sharing
A browser check catches problems that reading source alone can miss: consent dialogs covering the page, newsletter popups, chat widgets, bot checks, delayed images, or a redirect to an error page. Test the exact production URL at the viewport and device conditions your readers use, then verify that the image and surrounding page load as expected.
Or skip the browser setup
ScreenshotNeo can capture the rendered page through one request, which is useful when you want to inspect a share target without maintaining browser automation. Its cleaner removes cookie or consent banners, newsletter popups, and chat widgets before the capture; bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and each response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers. It also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
For a direct capture, see the ScreenshotNeo documentation and run:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/article -o shot.webpThere is no card required for the Free plan, which includes 1,000 shots per month. Paid plans start at $5 for 3,000 shots; every plan includes the full feature set. Create a free ScreenshotNeo account to test your deployed pages.
Automate Open Graph checks with code
cURL
curl -L "https://example.com/article"Inspect the returned HTML for the expected og:image value, then request the image URL itself:
curl -I "https://example.com/images/article-preview.jpg"Look for a successful status, HTTPS response, and an image MIME type such as image/jpeg or image/png.
Python
import requests
from bs4 import BeautifulSoup
page_url = "https://example.com/article"
r = requests.get(page_url, timeout=30)
r.raise_for_status()
soup = BeautifulSoup(r.text, "html.parser")
image = soup.find("meta", attrs={"property": "og:image"})
if not image or not image.get("content"):
raise RuntimeError("og:image is missing")
image_url = image["content"]
asset = requests.get(image_url, timeout=30)
asset.raise_for_status()
if not asset.headers.get("content-type", "").startswith("image/"):
raise RuntimeError("og:image does not return an image")
print(image_url, asset.headers["content-type"])Node.js
const pageUrl = 'https://example.com/article';
const html = await (await fetch(pageUrl)).text();
const match = html.match(/<meta[^>]+property=["']og:image["'][^>]+content=["']([^"']+)["'][^>]*>/i);
if (!match) throw new Error('og:image is missing');
const asset = await fetch(match[1]);
if (!asset.ok || !asset.headers.get('content-type')?.startsWith('image/')) {
throw new Error('og:image is not a reachable image');
}
console.log(match[1]);Open Graph image checklist
- The page has exactly one intentional first
og:image, or a documented fallback order. - The URL is absolute, HTTPS, public, and stable.
- The response is an image with an accurate MIME type.
- Width and height metadata match the actual file.
- The image satisfies the destination platform’s current size rules; LinkedIn documents 1200 × 627 pixels as a minimum for its sharing module.
- Essential content remains legible after cropping and reduction.
og:image:altdescribes the visual content.- The deployed HTML, not only local source or client-rendered markup, contains the tags.
- You have rechecked after deployment and accounted for platform caching.
Frequently Asked Questions
Is an Open Graph image the same as a featured image?
Not necessarily. A featured image is a content-management concept; og:image is metadata that tells external preview consumers which URL to use. You can point both to the same file, but they are independent settings.
Can I use a relative URL for og:image?
Use an absolute HTTPS URL. Relative paths leave crawlers to infer a base URL and can fail when canonical URLs, redirects, or alternate hosts are involved.
Does og:image:alt replace normal image alt text?
No. It describes the image for the Open Graph object. Images displayed inside your page still need appropriate alt attributes on their own <img> elements.
Why does a platform show my page title but no image?
The platform may have cached an earlier fetch, been unable to access the image, received a non-image response, or rejected the format or dimensions. Check the deployed HTML, fetch the asset without authentication, and use the platform’s refresh or debugger workflow.
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.
