Read each listed page’s og:image metadata and use its URL as the first thumbnail candidate. Keep it only if the image loads and suits your card; otherwise show a neutral placeholder. Open Graph defines og:image as the URL of the image that represents a page, but it does not prescribe a universal fallback order for other metadata or images.
Find the page’s Open Graph image
Fetch the page HTML on your server and parse its head for a tag such as <meta property="og:image" content="https://example.com/photo.jpg">. Store the extracted URL with the directory entry, rather than treating it as an image file hosted by your directory. The Open Graph Protocol identifies og:image as the representative image URL for the page’s object. Its basic properties also include og:title, og:type, and og:url (Open Graph Protocol).
As an Amazon Associate I earn from qualifying purchases.
Parse HTML rather than searching the response with a simple string match: attributes can appear in different orders, tags may use different quote styles, and pages may declare more than one image. If multiple og:image tags are present, define and document how your directory chooses among them—for example, use the first candidate that passes validation. That is a local selection rule, not a precedence rule specified by Open Graph.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesRetain optional image details when available
The protocol documents several optional properties that can provide context about an image:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
og:image:secure_url: an alternate HTTPS URL.og:image:type: the declared MIME type.og:image:widthandog:image:height: declared dimensions.og:image:alt: a description of the image, not a caption.
These properties are optional; do not assume they will be present or accurate. When they are available, retain them as hints for validation and presentation. A declared type or dimension does not replace checking that the asset can actually be used.
Validate the candidate before displaying it
Being declared in metadata does not guarantee that an image is accessible, relevant, or suitable for your card. Check that the URL is usable by your application, that the response is an image your rendering path supports, and that the result is appropriate for the available card shape. Google Search Central advises choosing an image relevant to and representative of the page, avoiding generic images such as a site logo, avoiding extreme aspect ratios, and using high resolution where possible (Google image best practices).
Rank #2
- Prefer an image that represents the listed page, not merely the site’s brand.
- Check actual load success and dimensions instead of relying only on optional metadata.
- Choose a crop or fit behavior suited to your card design; the reviewed official guidance does not prescribe one universal directory-card size or crop rule.
- Consider where the image is served from and whether your directory can display it reliably. If you proxy or cache images, apply your normal security and storage policies.
Define a fallback policy your directory can explain
The reviewed official sources do not establish a standard precedence order among og:image, Twitter Card image metadata, schema.org image fields, and ordinary images found in page content. If you want to inspect those sources after og:image, choose a local, testable order and make it clear to maintainers. Do not describe that order as an Open Graph requirement.
When no candidate passes your checks, show a neutral placeholder. This avoids presenting a generic site logo as though it were a page-specific thumbnail. The placeholder is a practical directory choice, not a behavior required by Google or the Open Graph Protocol.
Render useful alternative text
If the thumbnail conveys information as content, give it alternative text appropriate to its purpose and the information you have. The publisher may provide og:image:alt, but the property is optional; do not assume it exists. If the image is purely decorative beside a listing whose text already identifies the page, an empty alt value may be more appropriate than repeating the listing title. Choose based on the image’s role in your interface, not merely the metadata field’s presence.
Or skip the browser setup
If you also need a screenshot thumbnail rather than the page’s declared image, ScreenshotNeo is a website screenshot API and MCP server. It can remove known consent banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are not billed; and its MCP server lets AI agents take screenshots. Open Graph metadata still needs to be fetched and parsed separately when that is the thumbnail you want.
One GET request returns an image or PDF. This cURL example saves a WebP screenshot of the listed page:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #4
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. It includes 1,000 screenshots a month free with no card; paid plans start at $5 for 3,000. Sign up for free.
Quick Recap
Common implementation problems
- No
og:imagefound: The page may not declare one in the HTML your fetch retrieved. Use your documented local candidate policy, if any, or show the placeholder. - Metadata points to a broken or unsupported asset: Test the image response and format before rendering; discard it if it fails your checks.
- Thumbnail is a logo or unrelated image: Treat metadata as a candidate, not a guarantee of quality. Reject images that do not represent the listed page and use the placeholder.
- Image looks distorted or poorly cropped: Apply a consistent card presentation that accommodates the image’s aspect ratio; avoid extreme ratios when selecting candidates.
- Alt text is missing: Since
og:image:altis optional, provide alternative text based on the image’s purpose and available information, or use empty alternative text if the image is decorative.
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.
