Recommended Free Tools
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
An Open Graph (OG) image is the image URL declared in a webpage’s og:image metadata. Social networks and other link-preview systems use that URL as the representative image when someone shares the page. It is not an inline <img> element in the article body; it is metadata in the document’s <head>.
What an Open Graph image does
The Open Graph protocol lets a web page become a rich object in a social graph. A sharing service reads the page’s Open Graph properties and builds a preview card containing a title, URL, description and image. The image is supplied by og:image.
Because the image is metadata, it can be different from the first image a visitor sees in the page content. A blog post might use a wide branded graphic for social previews while using photographs, diagrams or product screenshots inside the article.
The required Open Graph properties
The protocol specification identifies four required properties:
#1 Best Overall
og:title— the title shown for the shared object.og:type— the object type, such aswebsiteorarticle.og:image— the URL of the representative image.og:url— the canonical URL of the object.
The Open Graph protocol specification defines og:image as “An image URL which should represent your object within the graph.”
What does og:image contain?
The value is an absolute URL, normally served over HTTPS, for example https://example.com/images/article-preview.jpg. It should point directly to an image response, not to an HTML page that merely displays an image.
Optional image properties
You can add structured properties describing the image:
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →| Property | Purpose |
|---|---|
og:image:secure_url |
HTTPS version of the image URL, useful when the page is loaded securely. |
og:image:type |
The image MIME type, such as image/jpeg. |
og:image:width |
The image width in pixels. |
og:image:height |
The image height in pixels. |
og:image:alt |
Descriptive text explaining what is in the image. The specification treats this as image description, not a caption. |
Structured properties belong to the image root tag that precedes them. In other words, put the width, height, type and alt tags immediately after the corresponding og:image declaration.
How to add an Open Graph image
Add the metadata inside the page’s <head>. This complete example declares the required properties and the common image details:
<html prefix="og: https://ogp.me/ns#">
<head>
<meta property="og:title" content="Example article" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:image" content="https://example.com/images/article-preview.jpg" />
<meta property="og:image:secure_url" content="https://example.com/images/article-preview.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="Description of the article preview image" />
</head>
</html>Implementation checklist
- Create the preview graphic and export it in a web-supported format such as JPEG, PNG or WebP.
- Upload it to a stable, publicly reachable HTTPS URL.
- Place one
og:imagetag in the page head, followed by its structured properties. - Use the page’s canonical URL in
og:url, and make the title and type describe that page. - Open the page source (not only the rendered DOM) and confirm that the tags are present in the server-rendered HTML delivered to crawlers.
- Request the image URL directly and verify that it returns the intended bytes, dimensions and MIME type without an authentication prompt.
What size should an OG image be?
There is no single universal size enforced by every platform. LinkedIn’s sharing documentation requires Open Graph metadata and lists a minimum image size of 1200 × 627 pixels for its sharing module. That figure is a LinkedIn requirement, not a rule that automatically applies to every social network or preview consumer.
Use the largest dimensions accepted by your target platforms while keeping text and logos away from edges that may be cropped. A wide composition generally survives more preview layouts than a design that depends on small corner details. Include the actual width and height in the structured metadata so consumers do not have to guess.
Free tools Windows power users keep installed
One-click scans. No signup required.
How to choose an effective preview image
Coverage
Check the dimensions required by the platform where the link will be shared. If LinkedIn is a target, meet its documented 1200 × 627 pixel minimum. Treat requirements from one service as platform-specific rather than universal.
Clarity
Preview cards can be displayed as small thumbnails or cropped rectangles. Use a clear subject, strong contrast and short text that remains legible at reduced size. Keep essential information in the central safe area.
Technical validity
- Use an absolute HTTPS URL.
- Return a supported image MIME type and the correct file bytes.
- Ensure the asset is reachable without a login, expiring token or blocked origin.
- Make the declared width and height match the actual file.
Accessibility
Write og:image:alt as a concise description of what the image depicts, for example “Blue dashboard showing monthly revenue trend.” Do not use it as a duplicate headline or a sales caption.
Control
Choose one deliberate first image unless you have a reason to provide fallbacks. Multiple tags can help when different consumers have different support, but they also make selection harder to predict.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteUsing multiple og:image tags
The protocol allows multiple images. When values conflict, the first image is preferred. Put the image you most want shared first, then place its structured properties before declaring the next image. Width, height, type and alt fields apply to the image root tag that precedes them.
<meta property="og:image" content="https://example.com/images/primary.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:alt" content="Primary article illustration" />
<meta property="og:image" content="https://example.com/images/fallback.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:alt" content="Fallback article illustration" />Why a link preview shows the wrong image
The preferred image is not first
Move the intended asset to the first og:image position. A consumer that follows first-value precedence may ignore later images.
The tags are missing from the delivered HTML
Some JavaScript frameworks add metadata only after the browser runs. A crawler may read the initial response before that happens. Confirm the raw page source contains the tags, and configure your framework or server-side renderer to emit them on the first response.
The image URL cannot be fetched
Check the URL in a private browser window and with a command such as curl -I https://example.com/images/article-preview.jpg. Redirect loops, access control, hotlink protection, DNS errors and transient server failures can prevent a preview consumer from retrieving the file.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Dimensions or MIME type are wrong
Compare the actual file properties with og:image:width, og:image:height and og:image:type. Correct the metadata or regenerate the asset so the values agree.
A service is showing an older result
Preview consumers may retain a previously fetched page or image. After correcting the HTML or asset, request the page again through the affected service’s sharing or inspection workflow. If the image URL itself is versioned or replaced, use a new URL only when you can maintain the old asset for existing caches.
Performance, reliability and security considerations
- Keep the asset stable: store it on infrastructure designed to serve static files and avoid short-lived signed URLs unless the target consumer can use them.
- Optimize bytes: resize and compress the image while preserving readable text. A smaller file usually fetches more reliably on crawlers and mobile networks.
- Use HTTPS consistently: set
og:image:secure_urlto the HTTPS variant when the page is secure. - Prevent accidental exposure: remove private data from the graphic and its URL. Metadata is public whenever the page is public.
- Keep declarations page-specific: each canonical page should have an image that represents that page, rather than a generic site image everywhere.
Or skip the browser setup
If you need a rendered screenshot to use as a preview asset, ScreenshotNeo returns a PNG, JPEG, WebP or PDF from one GET request. It can load the page, accept cookie or consent banners, and remove more than 60 known consent platforms, newsletter popups and chat widgets before capture. You can turn each cleanup step off. Only clean shots are billed: bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers.
Use the API documentation at screenshotneo.com/docs/ for authentication and options. This cURL request captures a page as WebP:
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}`);For OG-image work, relevant options include full-page capture with lazy images loaded, a CSS-selector element capture, dark mode, device presets or custom viewports, retina scale, custom CSS and JavaScript, click-before-capture, selector hiding, waits for a selector, delay or network idle, request and resource blocking, custom headers, cookies, user agent, authorization, timezone and geolocation, transparent backgrounds, resizing, a chosen cache TTL, signed links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, usage reporting and an OpenAPI specification. An MCP server also provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account to get started.
Best Value
Testing an OG image before publishing
- Fetch the HTML as an unauthenticated request and inspect the raw
<head>. - Confirm exactly one intended first image, or document the order if you provide fallbacks.
- Fetch the image URL directly and check its status, content type and dimensions.
- Verify that
og:urlmatches the canonical page URL and that the title, type and alt text describe the same object. - Share the URL in each target platform’s current preview workflow and check both the uncropped card and the mobile-sized version.
Open Graph image versus an HTML image
| Characteristic | Open Graph image | HTML <img> |
|---|---|---|
| Location | Metadata in the document head | Markup in the rendered page body |
| Primary audience | Social networks and link-preview consumers | People viewing the page and assistive technology |
| Declaration | <meta property="og:image" content="..."> |
<img src="..." alt="..."> |
| Selection behavior | Consumers choose the declared URL, with first-image precedence when multiple values conflict | The browser renders the element where it appears in the document |
You can and often should use both: the OG image controls shared-link previews, while an HTML image provides content and accessibility inside the page.
Frequently Asked Questions
Does every page need an Open Graph image?
No. A page can be shared without one, but the preview consumer must then choose another representation or show no image. Add one when a controlled, recognizable preview matters.
Can og:image point to a relative URL?
Use an absolute URL, preferably HTTPS, so a sharing crawler can resolve it independently of the page URL.
Should og:image:alt repeat the article title?
No. Describe the visual content. The title belongs in og:title; alt text should explain what the image shows.
Is 1200 × 627 the universal OG standard?
No. LinkedIn documents that size as its sharing-module minimum. Other consumers may apply different limits or crops.
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.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →
