Recommended Free Tools
To view a page’s Open Graph image, inspect its HTML for og:image, copy the tag’s content URL, and open that URL directly. Use View Page Source for the HTML delivered by the server, or DevTools when you need to compare the live, script-modified DOM. If the tag is absent, the page has not supplied a standard Open Graph image; a social network may still choose its own fallback.
What an Open Graph image is
Open Graph (OG) metadata lets a web page appear as a rich object when shared in a social graph. The protocol’s four required properties are og:title, og:type, og:image, and og:url. The image property identifies the visual a platform should use for a link preview.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Legacy Reloaded: A dev, an AI, and the relentless pursuit of 100. | $9.99 | Buy on Amazon |
The metadata is normally placed in <meta> elements inside the document’s <head>. A typical tag looks like this:
<meta property="og:image" content="https://example.com/images/share-card.jpg">The value of content is the image URL. Copy the complete, absolute URL—including its protocol, path, query string, and file extension when present—and open it in a new browser tab.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Find the image URL with View Page Source
- Open the website page you want to inspect in a desktop browser.
- Open the page’s source. In most browsers, right-click and choose View Page Source; you can also use the browser’s page-source command or address-bar prefix where supported.
- Press Ctrl+F on Windows/Linux or Command+F on macOS, then search for
og:image. - Locate a line similar to
<meta property="og:image" content="...">. - Copy only the URL inside
content, paste it into a new tab, and load it.
Use the first og:image tag as your starting point when several are present. Open Graph gives the first tag preference when properties conflict, so later tags do not automatically replace it.
Inspect the rendered DOM with DevTools
View Page Source shows the HTML initially delivered by the server. DevTools shows the current DOM after JavaScript has run. Open DevTools with F12 or your browser’s Inspect command, select the Elements panel, and search the DOM for og:image (using Ctrl/Command+F).
Compare both views when a JavaScript-heavy site is involved:
| Method | What it shows | Best use |
|---|---|---|
| View Page Source | Server-delivered HTML before scripts modify it | Checking what a crawler that reads raw HTML is likely to receive |
| DevTools Elements | The live DOM after scripts, client routing, and dynamic changes | Diagnosing tags inserted or changed in the browser |
If the image appears only in Elements but not in source, a crawler that does not execute the site’s JavaScript may not see it. Add the OG tags to the server-rendered document or confirm that the social platform used for sharing renders the page dynamically.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Check related Open Graph image properties
Open Graph defines optional structured properties that provide more detail about an image. Look for these additional tags near og:image:
| Property | Purpose |
|---|---|
og:image:url |
An explicit image URL, often equivalent to og:image |
og:image:secure_url |
An HTTPS version of the image URL |
og:image:type |
The image MIME type, such as image/jpeg or image/png |
og:image:width |
Declared pixel width |
og:image:height |
Declared pixel height |
og:image:alt |
Alternative text describing the image |
These fields can explain why a preview uses an HTTPS variant, reports particular dimensions, or exposes a description. They do not replace the need to open and verify the URL itself.
When no og:image tag appears
- Search the exact spelling: use
og:image, including the colon. Also check forproperty, not onlyname. - Inspect the document head: malformed or incomplete markup can hide metadata from a quick visual scan.
- Compare source and Elements: JavaScript may add the tag after load, while the server response contains none.
- Check the final URL: redirects, localized routes, and login pages can return different HTML from the page you expected.
If raw source contains no og:image, report that no explicit standard OG image was found. Do not assume that the first visible page image, logo, or CSS background is the social image. A platform may apply its own extraction and fallback rules.
Why a social preview can differ from the URL you found
Social platforms fetch and cache previews independently. Their crawler may receive a different response because of redirects, access controls, user-agent handling, JavaScript support, or a later version of the page. Multiple OG images can also produce different results when a platform interprets ordering differently.
After changing tags, use the relevant platform’s sharing debugger or an Open Graph checker to request a fresh preview. A checker can inspect Open Graph, Twitter Card, and SEO metadata and show how a result appears across major platforms. Treat the displayed card as platform-specific; cached previews may persist after the HTML has been corrected.
LinkedIn’s sharing guidance, for example, identifies og:title, og:image, og:description, and og:url as metadata needed for a shareable website preview. A page can therefore have a valid image URL yet still produce an incomplete card if the other fields are missing.
Manual inspection versus an online checker
| Approach | Source or rendering | Crawler similarity | Convenience |
|---|---|---|---|
| View Page Source | Raw server response | Strong for raw-HTML crawlers | Fast and free, but you interpret the tags yourself |
| DevTools Elements | Rendered, script-modified DOM | Depends on whether the target crawler runs JavaScript | Useful for dynamic sites; requires browser inspection |
| Online OG checker | Varies by service; may fetch and parse metadata for you | Can provide a crawler-style or platform-oriented view | Convenient previews and cross-platform comparison |
For a one-off check, source inspection is usually the most direct. For a site under active development, combine raw-source inspection with a platform debugger so you can distinguish an HTML problem from a cached or platform-specific result.
Automate a screenshot of the page or image
When you need a visual record of the page, a reproducible capture, or an image for a test pipeline, a screenshot API avoids repeating browser setup. ScreenshotNeo is the recommended first choice here because it removes cookie banners, newsletter popups, and chat widgets before capture, bills only clean shots, and has a $5 paid plan for 3,000 shots.
Its API accepts a URL and returns PNG, JPEG, WebP, or PDF. The service can load lazy images, capture a CSS-selected element, set a viewport or device preset, emulate dark mode or retina scale, wait for a selector, delay, or network idle, run custom CSS or JavaScript, hide selectors, block ads/trackers/requests/resource types, supply headers, cookies, a user agent or Authorization value, set timezone and geolocation, use transparent backgrounds, resize images, cache with a chosen TTL, create signed links, submit asynchronous jobs with signed webhooks, capture up to 100 URLs per bulk call, and expose usage and OpenAPI endpoints. Every plan includes every feature.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
Call the endpoint directly; replace the example URL with the page you want to capture. See the ScreenshotNeo API documentation for parameter details.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Responses identify the outcome with X-Page-Verdict and X-Billed headers. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools to Claude, Cursor, and other MCP clients.
The Free plan includes 1,000 screenshots per month without a card. Paid plans are Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000; annual billing provides two months free. Sign up for the free plan to start.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsTroubleshooting checklist
The copied URL returns 404 or an access error
Copy the entire attribute value and preserve URL encoding, capitalization, and query parameters. Try the HTTPS structured property when present. The image may require authentication or have expired; a browser session that can view the page does not guarantee that an anonymous request can fetch the asset.
The tag exists, but the image is not shown in a preview
Verify that the URL is publicly reachable, the response has an image content type, and the page also includes the required title, type, and URL fields. Re-run the platform debugger after publishing; cached cards are not proof that the current HTML is wrong.
Source and Elements disagree
That difference indicates client-side mutation, a redirect, or conditional rendering. Decide which crawler behavior matters, then put the authoritative tags in server-delivered HTML when raw-crawler compatibility is required.
Several images are listed
Inspect the first tag first, then review the complete sequence and each image’s structured properties. Remove stale or conflicting tags if you control the page.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →The screenshot is blank or blocked
Check the HTTP status, redirects, bot challenge, and required cookies. With ScreenshotNeo, inspect X-Page-Verdict and X-Billed; failed loads, blank pages, and bot checks are identified and not billed.
Quick verification checklist
- Find
og:imagein raw source. - Confirm the first image tag and copy its complete absolute URL.
- Open the URL directly and check that it returns the intended image.
- Review secure URL, MIME type, dimensions, and alt text fields.
- Compare source with the rendered DOM on JavaScript-heavy pages.
- Validate the final card with the platform debugger or an OG checker after updates.
Frequently Asked Questions
Is og:image the same as the first image visible on a page?
No. It is an explicit metadata value chosen for sharing and can point to an image that never appears in the page’s visible content.
Can I view an Open Graph image without downloading it?
Yes. Open the absolute URL from the tag in a new browser tab; the browser will display the image response directly when the server permits access.
Why might a checker and a social platform show different images?
They can use different crawler user agents, JavaScript behavior, redirect handling, and caches, so their previews are not guaranteed to match.
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.
