Set the preview image with an Open Graph <meta property="og:image"> element inside your page’s <head>. Use an absolute, publicly fetchable image URL, then add the other basic Open Graph properties so sharing services know the page title, type, and canonical URL.
<meta property="og:image" content="https://example.com/social-preview.jpg">The tag controls the image shown in link cards; it is not a visible <img> element in the page body.
The complete HTML pattern
Put these declarations between <head> and </head>. Replace the example values with the page’s real title, canonical URL, image URL, and description.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Article title</title>
<meta property="og:title" content="Article title">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/article">
<meta property="og:image" content="https://example.com/social-preview.jpg">
<meta property="og:image:alt" content="A concise description of the preview image">
<meta property="og:description" content="A short description of the article.">
<meta name="twitter:card" content="summary_large_image">
</head>
<body>
<!-- Page content -->
</body>
</html>The Open Graph protocol defines og:title, og:type, og:image, and og:url as the four basic required properties. Keep them together in the document head. og:description and the X/Twitter card hint improve the result on services that read them, but they do not replace the Open Graph image declaration.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
What each tag does
| Tag | Purpose | What to enter |
|---|---|---|
og:title |
Title displayed in the share card | The page’s specific, human-readable title |
og:type |
Describes the object | article for an article page; choose another protocol-supported type when appropriate |
og:url |
Canonical identity of the shared object | The preferred, absolute URL for the page |
og:image |
Image URL representing the page | An absolute URL to the image that a preview crawler can fetch |
og:image:alt |
Alternative text for the image | A concise description of what the image conveys |
og:description |
Summary shown beside or below the title | A short description matching the page |
twitter:card |
Cross-platform card hint for X | summary_large_image when you want a large image card |
og:image:url is listed as identical to og:image. The protocol also defines optional structured properties: og:image:secure_url, og:image:type, og:image:width, og:image:height, and og:image:alt. Include only values you can keep accurate.
How to choose and declare the image URL
Use the real asset URL
The value of content must be the image URL itself, not a path to a page that contains the image. A crawler should be able to request that URL and receive the image without an interactive login, a browser-only action, or a cookie-consent click.
Describe the image
Add og:image:alt whenever you specify og:image. Write useful alternative text, such as “Blue dashboard showing monthly revenue,” rather than repeating the filename.
Choose a practical share-card size
Cross-platform guides commonly recommend a 1200×630-pixel image. Treat that as a practical recommendation, not a universal Open Graph requirement: services can crop, resize, or otherwise interpret the card differently.
Declare more than one image only deliberately
You may provide multiple og:image properties. When values conflict, the protocol says the first image is preferred, so put the primary image first. Additional declarations can provide alternatives, but they do not guarantee that every service will choose the same one.
<meta property="og:image" content="https://example.com/social-preview.jpg">
<meta property="og:image:alt" content="Primary article preview">
<meta property="og:image" content="https://example.com/social-preview-square.jpg">
<meta property="og:image:alt" content="Square alternative preview">Open Graph versus X-specific metadata
Open Graph is the baseline because many sharing products read those properties. Adding twitter:card gives X an explicit large-card hint:
<meta name="twitter:card" content="summary_large_image">This is a cross-platform recommendation, not an Open Graph requirement or a guarantee of a particular crop. Keep the Open Graph tags even when you add X-specific metadata. Platform rules and rendering can change, so inspect the result on the service where the link will actually be shared.
Framework and CMS placement
Static HTML
Edit the source template and place the tags directly in <head>. If every page uses the same layout, make the values data-driven so each route emits its own title, URL, image, and description.
Server-rendered applications
Generate the tags on the server for the requested route. Preview crawlers may not execute your client-side JavaScript, so do not rely on a script that inserts the metadata after the initial response unless your target service explicitly supports that workflow.
Single-page applications
Use a server-side or pre-rendered head when possible. Verify the raw deployed HTML, not only what your browser displays after JavaScript runs.
How to test a link preview image
- Deploy the page and image. Test the public URL, not a localhost address or a private staging host.
- View the document source. Confirm that the expected
og:imageappears inside<head>, that the URL is correct, and that there are no HTML-escaping or template errors. - Request the image URL directly. Confirm it returns the intended image and that the address has not expired or been protected by a session requirement.
- Use a preview or debugger tool. These tools show the metadata a crawler retrieved and are useful diagnostics.
- Check the target platform itself. If the card is stale, use that platform’s available inspection, refresh, or debugger flow. Preview tools are not proof that every network will render an identical card.
Caching is platform-specific. A service can continue showing an earlier title or image after you change the HTML, and current cache durations differ by platform. Test again using the target service’s own refresh mechanism rather than assuming an immediate update.
Why is my link preview image not showing?
The tag is in the body
Symptom: Your page contains the tag, but the card has no image. Fix: Move it into the document <head>. Open Graph metadata is not a visible body element.
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 & 11The URL is wrong or inaccessible
Symptom: A debugger reports an image error or shows a broken thumbnail. Fix: Copy the exact image URL from og:image, open it independently, and correct redirects, spelling, permissions, or expired signed URLs.
The wrong image wins
Symptom: A service selects an older or alternate image. Fix: Check for duplicate og:image tags and put the intended primary value first. Remove stale declarations from a shared template.
The page is missing the other basic properties
Symptom: The image appears, but the card title, destination, or type is wrong. Fix: Emit og:title, og:type, and og:url alongside og:image; ensure each value belongs to the current route.
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
The platform is showing cached data
Symptom: Source inspection shows the new image, while a share composer still shows the old one. Fix: Run the platform’s own debugger or refresh workflow, then test again. Do not infer a universal cache time from one service.
The image is cropped unexpectedly
Symptom: The thumbnail is technically correct but cuts off important content. Fix: Keep important text and subjects away from the edges, use a practical 1200×630 composition, and inspect the actual target platform because crops vary.
Performance, reliability, and maintenance
- Keep the asset stable. A long-lived URL prevents old posts from losing their image. If you replace an image at the same URL, expect some services to retain a cached copy.
- Use a purpose-built social image. Small text, busy screenshots, and edge-to-edge labels are more vulnerable to platform resizing and cropping.
- Keep metadata route-specific. A shared layout should receive title, canonical URL, description, and image values from the page data rather than hard-coded site-wide defaults.
- Validate after template changes. A CMS update can move tags out of
<head>, emit duplicates, or escape quotation marks incorrectly. - Do not treat one preview as universal evidence. Facebook, LinkedIn, X, and other services can apply different parsing, caching, and crop behavior; test the services that matter to your audience.
Or skip the browser setup
If you need a screenshot of a page to use as the image asset, ScreenshotNeo returns a PNG, JPEG, WebP, or PDF from one request. Save the returned image at a stable public URL, then use that URL in og:image.
See the ScreenshotNeo API documentation for all options. This example captures the page at https://example.com/article:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/article -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/article"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/article' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
Recommended Free Tools
FAQ
Is og:image an HTML image element?
No. It is metadata in the document head. A visible body image uses <img>; a share-card image uses <meta property="og:image">.
Best Value
Can I rely on the 1200×630 dimensions everywhere?
No. That size is a practical cross-platform recommendation. Individual services can apply their own crops and limits, so inspect the finished card on the service you care about.
Why does a preview tool differ from the final share card?
Preview tools report what they retrieved, while each social service controls its own parsing, caching, and rendering. Use the target platform’s inspection or refresh flow when the two disagree.
Frequently Asked Questions
Is og:image an HTML image element?
No. It is metadata in the document head. A visible body image uses <img>; a share-card image uses <meta property="og:image">.
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 →Can I rely on the 1200×630 dimensions everywhere?
No. That size is a practical cross-platform recommendation. Individual services can apply their own crops and limits, so inspect the finished card on the service you care about.
Why does a preview tool differ from the final share card?
Preview tools report what they retrieved, while each social service controls its own parsing, caching, and rendering. Use the target platform’s inspection or refresh flow when the two disagree.
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.
