The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Put an Open Graph image tag in your page’s HTML <head>, and set its content attribute to a fully qualified, publicly fetchable image URL:
<meta property="og:image" content="https://example.com/social-card.jpg">For a reliable share preview, add the other required Open Graph properties, describe the image with og:image:alt, and verify that crawlers can retrieve the file without logging in. The steps below show the exact markup, image selection rules, multiple-image behavior, platform constraints, and a practical debugging checklist.
What the Open Graph image tag does
Open Graph metadata describes the page object that social platforms display when someone shares a URL. The protocol lists four basic properties for every page: og:title, og:type, og:url, and og:image. The og:url value should be the page’s canonical URL; og:image identifies the image used in the preview.
The image value is not an upload or a relative file path. It is a complete URL beginning with https:// (or another scheme your target crawler accepts) and pointing directly to an image resource.
#1 Best Overall
Minimal implementation
Add this element inside the page’s <head>:
<meta property="og:image" content="https://example.com/social-card.jpg">Use the HTML attribute name property, not name. The value of content should be the exact image URL a crawler can request.
A complete head example
<head>
<title>Example page title</title>
<meta property="og:title" content="Example page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/article/">
<meta property="og:image" content="https://example.com/images/example-social-card.jpg">
<meta property="og:image:alt" content="Description of the image’s meaningful visual content">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
</head>The width and height in this example are illustrative. Open Graph itself does not prescribe one universal image size. Supplying MIME type and dimensions gives consumers useful structured information, while the alt value should describe what the image contains—not act as a caption.
Choose and host an image that crawlers can fetch
Use a stable, direct URL
- Point
og:imageat the image file, not an HTML page, gallery route, or download form. - Use an absolute URL such as
https://www.example.com/assets/card.webp; avoid paths that only work relative to your current page. - Keep the URL stable. Changing filenames or query parameters can cause a platform to retain an older preview or treat the asset as new.
Remove access barriers
The image must be reachable by an unauthenticated crawler. A login wall, IP allow-list, robots or firewall rule, expiring signed URL, or a response that redirects to an HTML error page can prevent the preview image from appearing. LinkedIn’s sharing guidance specifically warns that protected or blocked images may fail to display.
Write useful alternative text
Use og:image:alt to convey the meaningful visual content: for example, “Blue dashboard showing monthly revenue by region.” Do not repeat a generic label such as “social image,” and do not treat this field as a marketing caption.
LinkedIn-specific image requirements
Open Graph is a protocol; destination platforms can impose additional limits. LinkedIn’s sharing-module guidance specifies the following requirements:
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
| Requirement | LinkedIn guidance | Scope |
|---|---|---|
| Minimum dimensions | 1200 × 627 pixels | LinkedIn sharing module |
| Recommended aspect ratio | 1.91:1 | LinkedIn sharing module |
| Maximum file size | 5 MB | LinkedIn sharing module |
| Small-width behavior | Images less than 401 pixels wide display as thumbnails | LinkedIn organic sharing guidance |
| Cropping | Square or vertical images may be cropped when shared organically | LinkedIn organic sharing guidance |
These numbers are LinkedIn-specific technical guidance, not universal Open Graph rules. If another platform is your primary destination, check its current image limits rather than assuming the LinkedIn values apply.
Adding more than one Open Graph image
You may publish multiple og:image properties. When values conflict, the Open Graph protocol says the first image from top to bottom is preferred. Put the image you want selected first.
Structured properties belong to the root image immediately before the next og:image declaration. This keeps each image’s dimensions, MIME type, and alt text associated with the intended asset:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
<meta property="og:image" content="https://example.com/primary.jpg">
<meta property="og:image:alt" content="Primary image description">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<meta property="og:image" content="https://example.com/alternate.jpg">If you do not need fallbacks, one well-hosted image is simpler and avoids ambiguity.
Optional image properties and what they mean
og:image:secure_url: an HTTPS version of the image when you provide an alternate secure address.og:image:type: the image MIME type, such asimage/jpegorimage/png.og:image:widthandog:image:height: intrinsic pixel dimensions.og:image:alt: a description of the image’s meaningful visual content.
Only add values that accurately describe the resource. Incorrect dimensions or MIME types can make debugging harder when a platform validates the response.
Rank #3
Implementing the tag in common site setups
Static HTML
- Open the template that outputs the page’s
<head>. - Insert
og:title,og:type,og:url, andog:imagebefore</head>. - Deploy the template and inspect the delivered page source, not only the file in your editor.
Server-rendered applications
Generate the values from the page’s canonical record. Ensure the server emits the tags in the initial HTML response. If metadata is added only after client-side JavaScript runs, a crawler that does not execute that script may see no image tag.
Content management systems
Use the system’s head or social metadata field if available, or edit the theme/template directly. If a plugin generates Open Graph tags, avoid emitting a second conflicting set unless you have verified which one appears first in the delivered source.
Recommended Free Tools
Verification and troubleshooting
1. Confirm placement and syntax
View the delivered page HTML and search for property="og:image". Confirm it is inside <head>, has the expected URL, and is not escaped, commented out, or generated only after page load.
2. Request the image URL directly
Open the exact URL in a private browser window or request it with an HTTP client. It should return the image itself, with a successful status, rather than a login page, redirect chain, HTML error document, or access-denied response.
3. Check the primary-image order
If several tags exist, move the desired image and its structured properties to the top. Inspect your CMS, SEO plugin, theme, and server template for duplicate declarations.
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
4. Check platform dimensions and size
Measure the actual file, not merely the values in metadata. For LinkedIn, compare it with the 1200 × 627 minimum and 5 MB maximum. A different platform may use different thresholds.
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 & 115. Separate page problems from cache problems
If the HTML and image are correct but a preview still shows an old card, use the destination platform’s official preview or debugging workflow. There is no single cache-clearing procedure that applies to every service.
Common symptoms and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| No image appears | Missing tag, inaccessible asset, or image URL points to HTML | Inspect delivered <head>; request the URL directly; remove authentication or blocking. |
| Wrong image appears | Another og:image appears first |
Make the intended image the first declaration and place its structured properties immediately after it. |
| Image is cropped unexpectedly | Platform-specific aspect-ratio treatment | Prepare a platform-appropriate canvas; LinkedIn recommends 1.91:1 for its sharing module. |
| Preview shows a thumbnail | Image is under 401 pixels wide on LinkedIn | Provide a wider asset, subject to LinkedIn’s other limits. |
| Changes do not show | Cached preview or stale generated HTML | Verify the live response first, then use the platform’s official debugger or refresh tool. |
Or skip the browser setup
If you need a current screenshot of a page to use while checking a social card, ScreenshotNeo can capture the URL through one request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
See the full parameter reference in the ScreenshotNeo documentation. This cURL example writes a WebP file:
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}`);The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.
Free tools Windows power users keep installed
One-click scans. No signup required.
Performance, reliability, and cost considerations
- Keep the image reasonably sized: oversized files slow crawler fetches and may exceed destination limits. For LinkedIn, stay at or below 5 MB.
- Use dependable hosting: serve the file from infrastructure that handles unauthenticated requests consistently and returns the correct content type.
- Prefer deterministic metadata: render one canonical URL and one intentional primary image for each page variant.
- Test representative templates: verify article, product, home, and error pages separately if they use different head components.
Open Graph image checklist
og:imageis inside the delivered HTML<head>.- The URL is absolute, stable, direct, and publicly fetchable.
- The image response is an image, not a login page or HTML error.
og:image:altdescribes the visual content.- The intended primary image is the first when multiple images are present.
- Dimensions and file size meet the target platform’s current guidance.
- Duplicate tags from themes or plugins have been removed or intentionally ordered.
- The live page source, not only local template code, has been checked.
FAQ
Does the image tag replace the page’s normal HTML <img>?
No. og:image is metadata for link previews. Keep a normal in-page image when the image should be visible to visitors.
Can I use a relative path such as /images/card.jpg?
Use a fully qualified URL instead. It removes ambiguity for crawlers requesting the metadata outside your site’s browsing context.
Is og:image:alt a caption shown under the shared link?
No. It is descriptive metadata for the image’s meaningful visual content; presentation of it depends on the consuming platform.
Should every page use the same social image?
Not necessarily. A shared default is useful as a fallback, but page-specific images usually communicate the destination more accurately when they can be generated and hosted reliably.
Frequently Asked Questions
Does the image tag replace the page’s normal HTML <img>?
No. og:image is metadata for link previews; retain normal in-page images for visitors.
Can I use a relative path for og:image?
Use a fully qualified URL to avoid ambiguity for crawlers.
Is og:image:alt a caption?
No. It describes the image’s meaningful visual content; each platform decides how to use it.
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.
