Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesThe picture that appears in a card when you share a page URL is usually called a link preview image or social preview image. When you mean the image selected in the page’s Open Graph metadata, the technical term is an Open Graph image (often shortened to OG image), supplied with the og:image property.
“Thumbnail” is understandable but imprecise. A favicon, a search-result image and a shared-link preview are different assets selected in different ways.
The name depends on where you see the picture
Use the name that describes both the location and the mechanism. This avoids calling a browser icon or a search image an OG image when it is not one.
| Where the image appears | Best term | How it is selected |
|---|---|---|
| A card created when a URL is posted in a social network, chat or messaging app | Link preview image or social preview image | Often supplied by the page’s Open Graph metadata, including og:image |
| The image URL declared in a page’s metadata | Open Graph image or OG image | The page author declares it with the Open Graph protocol’s og:image property |
| The small mark beside a site name in a browser tab, bookmark or address interface | Favicon or site icon | Browser and operating-system icon metadata, not the shared-link image |
| An image shown with a Google Search or Discover result | Search-result image or Discover image preview | Google selects it automatically from multiple page signals; it may not use the declared OG image |
If you are writing a product requirement, design ticket or support answer about the large picture in a shared URL card, “link preview image” is the clearest phrase. If you are discussing the HTML that supplies it, say “OG image” and name og:image.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
What “OG image” technically means
The Open Graph protocol lets a web page describe itself as a rich object in a social graph. The og:image property contains an image URL intended to represent that page or object. The protocol also defines og:image:alt, which provides a text description of the image.
The OG image is only one part of a preview. A platform may display the image together with a page title, description, domain and other interface elements. Calling the entire card an “OG image” is therefore inaccurate: the OG image is the image asset inside (or associated with) the card.
How to declare the image in HTML
Put the metadata in the document’s <head>. The content value should be the complete URL of the image that represents the page.
<meta property="og:image" content="https://example.com/images/article-preview.jpg">
<meta property="og:image:alt" content="A laptop displaying the article's dashboard tutorial">Use an image that represents the page
The declared image should make sense for the page it represents. A page-specific illustration, product view or editorial scene gives a reader more context than an unrelated stock image. Google advises relevance and representativeness, warns against generic imagery such as a site logo, cautions against extreme aspect ratios and recommends high resolution when possible.
Recommended Free Tools
Write useful alternative text
og:image:alt describes the image for people who cannot see it and gives your metadata a meaningful text fallback. Describe the important subject and action rather than repeating a file name such as hero-final-2.jpg.
Keep the distinction between content and decoration
A favicon identifies the site. An OG image represents a specific page or object. Reusing a favicon as the page’s social image can make the preview technically valid while giving people no information about what they are opening.
Rank #2
Why search results may show another image
Open Graph metadata is most directly associated with shared-link previews. Google says its image previews are selected automatically from multiple sources. Declaring og:image can be a useful signal, but Google does not promise that every Search or Discover surface will display that exact image.
That means two statements can both be true: your page has a correctly declared OG image, and a Google result still displays a different image. Treat the OG image as the image you are offering to platforms that read Open Graph data, not as a command that controls every search interface.
Which term should you use in common conversations?
When asking a designer for the asset
Say, “Please create the link preview image for this article,” or “Please create the social preview image.” Add the target page and the intended sharing context. This wording tells the designer that the asset will appear in a URL card rather than in a browser tab.
When filing a development ticket
Use wording such as, “Set the page’s Open Graph image by adding og:image and og:image:alt in the document head.” This identifies the implementation, not just the visual outcome.
When answering a nontechnical question
If someone asks, “What is the picture that pops up when you share a link called?”, answer “a link preview image” first. You can add, “It is often an OG image supplied through og:image,” if the technical detail is useful.
A practical check before you publish
- Identify the surface. Decide whether you are checking a social or messaging card, a browser icon or a Google preview. Do not use a favicon test to answer an OG-image question.
- Inspect the page head. Confirm that
og:imagepoints to the intended image URL and thatog:image:altdescribes it. - Check the image choice. Make sure it represents the page, is not merely a generic logo and does not use an extreme aspect ratio. Use a high-resolution source when possible, following Google’s guidance.
- Check the page as a visitor. The image URL and page must be reachable to the service attempting to create the preview. A private, blocked or missing resource cannot be shown reliably.
- Test the actual destination. Share the URL in the service where readers will see it. A successful metadata check does not guarantee identical behavior on every platform, and Google may choose a different image.
Common terminology mistakes
- Calling the favicon a thumbnail: a favicon is a site icon, not the large image in a shared-link card.
- Calling the whole card an OG image: the OG image is the image URL; the card may also contain title, description and domain information.
- Assuming Google must use
og:image: Google selects image previews automatically from multiple signals. - Using “thumbnail” without context: people may interpret it as a video frame, a search image, a favicon or a social preview. Add “link preview” or “social preview” when precision matters.
If you need a rendered screenshot of a page
An OG image is metadata you declare. A screenshot is a rendered capture of the page itself. They can support different workflows: the metadata helps a platform build a link card, while a screenshot can document a page, create a visual reference or feed an image-based process.
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 & 11Crashes, 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 minuteScreenshotNeo is the first option to try for an automated website screenshot API because it removes consent banners, newsletter popups and chat widgets before capture, bills only clean shots, and has a $5 paid plan for 3,000 shots.
Or skip the browser setup
ScreenshotNeo accepts one GET request and returns a PNG, JPEG, WebP or PDF capture. The API base is https://api.screenshotneo.com/v1/shot. See the full parameter reference in the ScreenshotNeo documentation.
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}`);Those calls capture the rendered URL; they do not replace the page’s og:image declaration. Use the metadata method when you want social platforms to select a representative image for a link. Use the API when you need a programmatic page capture.
What the API can control
ScreenshotNeo supports full-page captures with lazy images loaded, a single element selected by CSS selector, dark mode, 12 device presets or a custom viewport, retina scale, PDF paper size, margins, landscape mode and page ranges. You can also provide custom CSS or JavaScript, click an element before capture, hide selectors, wait for a selector, delay or network idle, block ads, trackers, requests or resource types, set headers, cookies, user agent, Authorization, timezone and geolocation, use a transparent background, resize the image, choose a cache TTL, create signed links for public <img> tags, submit asynchronous jobs with signed webhooks, capture up to 100 URLs per bulk call, query usage and use the OpenAPI specification. Parameter names used by other screenshot APIs also work, which can simplify a migration.
Why the billing result matters
Each response states its outcome in the X-Page-Verdict and X-Billed headers. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing; only clean shots are billed. This lets an integration distinguish a usable capture from a page that should be retried or investigated.
Plans
| Plan | Allowance | Price |
|---|---|---|
| Free | 1,000 shots per month | $0, no card |
| Starter | 3,000 shots | $5 |
| Growth | 15,000 shots | $15 |
| Pro | 60,000 shots | $39 |
| Scale | 250,000 shots | $99 |
| Business | 1,000,000 shots | $249 |
Yearly billing gives two months free, and every feature is included on every plan. ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients, so an AI agent can request captures without you building browser automation.
For a no-card starting point, create a free ScreenshotNeo account and use the included 1,000 screenshots each month.
Rank #4
Troubleshooting: the term and the implementation
The team cannot agree on what “thumbnail” means
Ask where the image appears. Use “link preview image” for a shared URL card, “OG image” for the og:image metadata, “favicon” for the browser or site icon and “search-result image” for a Google preview. Naming the surface resolves the ambiguity.
The shared card has no image
Inspect the published HTML and verify that og:image exists in the document head and contains the intended image URL. Check that the URL is reachable and that the asset is an actual representative image rather than a missing or private resource.
The card shows a logo instead of the article artwork
Replace a generic logo with an image that represents the specific page, then update the og:image value. A logo can identify a brand, but it does not explain the content of an individual link.
Google shows a different picture
This can be normal. Google chooses image previews automatically from multiple page signals and does not guarantee the declared OG image will appear on every Search or Discover surface. Keep the declared image relevant and representative, but do not treat it as a universal override.
A screenshot job returns a blank page or fails to load
Check the ScreenshotNeo response headers. The page verdict identifies the outcome, and failed loads, blank pages, timeouts and bot checks are not billed. Adjust waiting, headers, cookies, user agent, blocking rules or viewport settings when the target requires them, then retry the capture.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Bottom line on the name
For everyday speech, call it a link preview image or social preview image. For the implementation, call it an Open Graph image or OG image and point to it with og:image. Keep it separate from the favicon, and remember that Google can select a different search or Discover image.
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.
