An og:image is an Open Graph metadata property in a webpage’s HTML <head>. Its content value is the URL of the image that social platforms can use when they build a link preview. It is not an image element and does not display a picture in the page body by itself.
Open Graph describes a page as a rich object for a social graph. The image normally works with other basic properties such as og:title, og:type, and og:url. Add the tags to the server-rendered HTML that a crawler receives, then verify the image URL and platform-specific requirements.
What og:image does
The tag tells a crawler which remote image represents a page, article, product, video, or other shared object. The browser does not render the value as page content; a social service reads the metadata when someone shares the URL and may use it in a preview card.
The image URL belongs in the content attribute, while property="og:image" identifies the Open Graph property:
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 →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<meta property="og:image" content="https://example.com/images/share.jpg" />Place it inside the document’s <head>. Use an absolute, publicly reachable URL rather than a relative path so a crawler can request the file without relying on your site’s current URL.
How to add an OG image in HTML
1. Add the core Open Graph tags
A practical page head can include the four basic properties and an image description:
<head>
<meta property="og:title" content="Page title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/images/share.jpg" />
<meta property="og:image:alt" content="Description of the share image" />
</head>Change the example values for each URL. The og:image:alt value describes what is in the image; it is not a caption. Supply it whenever you specify an og:image.
2. Add optional structured image properties
Open Graph defines additional properties that describe the image resource:
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 →og:image:secure_url— an HTTPS version of the image URL.og:image:type— the image MIME type, such asimage/jpegorimage/png.og:image:widthandog:image:height— the intrinsic dimensions in pixels.og:image:alt— a text description of the visual content.
Example:
<meta property="og:image" content="https://example.com/images/share.jpg" />
<meta property="og:image:secure_url" content="https://example.com/images/share.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:alt" content="A laptop displaying the article topic" />Keep structured properties immediately after the image root they describe. They remain associated with that image until another og:image root appears.
3. Make the image itself crawler-friendly
- Serve the file from an HTTPS URL that does not require a login, cookie, or browser interaction.
- Return the correct image bytes and a suitable
Content-Typeresponse. - Do not block the social crawler with robots, firewall rules, hotlink protection, or authentication.
- Use a stable URL, or update the metadata when you intentionally replace the asset.
- Check that redirects lead to the final image and do not create a loop.
These checks concern delivery of the referenced file; the Open Graph tag only supplies the pointer.
Rank #2
Using multiple OG images
You may declare more than one og:image. This is useful when you want to offer alternatives for different crops or content types. The Open Graph protocol treats these properties as an array. If there is a conflict, the first image declared from top to bottom is preferred.
<meta property="og:image" content="https://example.com/images/primary.jpg" />
<meta property="og:image:alt" content="Primary article illustration" />
<meta property="og:image" content="https://example.com/images/alternate.jpg" />
<meta property="og:image:alt" content="Alternate article illustration" />Do not assume every network exposes the same selection controls. Put your preferred image first and keep each image’s structured properties directly beneath its root declaration.
Image size and file limits are platform-specific
Open Graph itself does not provide one universal image size. A platform can impose its own dimensions, formats, file-size limits, and cropping behavior.
LinkedIn’s documented sharing limits
LinkedIn’s share-module guidance specifies minimum dimensions of 1200 × 627 pixels and a maximum image file size of 5 MB. Those figures are LinkedIn requirements, not guarantees for every social network. If LinkedIn is an important destination, create an image at least that large, keep the file under 5 MB, and test the resulting preview.
For other networks, consult that network’s current developer or help documentation. Do not copy LinkedIn’s numbers into a claim about universal Open Graph behavior.
Why a social preview shows the wrong or old image
The crawler is seeing different HTML
Inspect the raw response HTML, not only the DOM after JavaScript runs. Confirm that the intended og:image appears in the <head>, uses an absolute URL, and is not duplicated by a plugin or template. If multiple roots exist, remember that the first one is preferred by the protocol.
Free tools Windows power users keep installed
One-click scans. No signup required.
The image request fails
Open the image URL in a private browser window and verify that it returns the file without authentication. Check HTTPS certificates, redirects, status codes, MIME type, firewall rules, and hotlink protection. A page can have a perfectly formed meta tag while the image server still refuses the crawler.
The platform has cached an earlier result
Preview services commonly cache fetched metadata and images. LinkedIn’s troubleshooting guidance says to allow up to 48 hours after an update for its cache to reflect changes. That interval is LinkedIn-specific; do not apply it as a universal deadline for every service. When a platform provides a URL-inspection or refresh tool, use it after correcting the HTML and image URL.
The image is too large or unsuitable
Compare the file’s dimensions and byte size with the destination platform’s rules. For LinkedIn, verify the 1200 × 627 minimum and 5 MB maximum. Resize or recompress the source, then change the URL or wait for the platform cache to expire if the old file remains selected.
Creating and checking an image without a browser workflow
If you need a current webpage rendered as the visual asset, you can capture it automatically, then reference the resulting public image URL in og:image. A capture service is separate from Open Graph: it creates the file, while your HTML metadata points to that file.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. It can capture a page as PNG, JPEG, WebP, or PDF, including full-page captures with lazy images loaded, a selected CSS element, custom viewport and device settings, dark mode, retina scale, custom CSS or JavaScript, waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, caching, signed links, asynchronous jobs, webhooks, bulk capture, and usage reporting. Every feature is available on every plan.
Its clean-shot workflow accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing result in 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 complete parameter reference in the ScreenshotNeo documentation. The following calls are runnable examples.
Rank #4
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}`);Upload or otherwise expose the returned file at a stable HTTPS URL, then place that URL in your page’s og:image tag. Treat the API key as a secret and keep it out of client-side JavaScript.
Plans and cost
ScreenshotNeo’s Free plan includes 1,000 shots per month with no card. Paid plans are Starter at $5 for 3,000 shots, Growth at $15 for 15,000, Pro at $39 for 60,000, Scale at $99 for 250,000, and Business at $249 for 1,000,000. Yearly billing gives two months free. Every plan includes every feature.
Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Common implementation mistakes
- Using an
<img>instead of metadata: an image in the body does not replaceog:image. - Putting the tag outside
<head>: keep Open Graph metadata in the document head. - Using a relative URL: provide the complete HTTPS image URL.
- Leaving duplicate tags from a CMS: remove unintended roots and put the preferred image first.
- Describing the file instead of the visual:
og:image:altshould explain what the image shows, not serve as a marketing caption. - Assuming one size works everywhere: apply each platform’s documented limits independently.
- Testing only after a JavaScript render: inspect the crawler-visible HTML response.
Deployment checklist
- Choose a representative image and publish it at a stable, public HTTPS URL.
- Add
og:title,og:type,og:url, andog:imageinside<head>. - Add
og:image:alt; include secure URL, MIME type, width, and height when useful. - Fetch the raw page source and confirm the intended tags and ordering.
- Fetch the image URL independently and check its response, dimensions, and file size.
- Validate against the destination platform’s current rules, including LinkedIn’s 1200 × 627 minimum and 5 MB maximum when applicable.
- After changes, account for platform caching; LinkedIn advises allowing up to 48 hours.
Frequently Asked Questions
Does og:image improve SEO rankings directly?
It is social-sharing metadata. Its documented purpose is to supply a representative image for a rich social preview, not to act as a direct search-ranking signal.
Can I use several og:image tags on one page?
Yes. They form an image array; the first declared image is preferred when there is a conflict.
Should the OG image URL be the same as the page URL?
No. og:url identifies the page, while og:image points to a separate image resource.
What happens if I omit og:image:alt?
The core image can still be declared, but the protocol says to supply an image description when an og:image is specified.
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.
