Recommended Free Tools
An OG image tag is the Open Graph metadata property og:image. It tells services that read Open Graph data which image represents a web page when someone shares its URL. Place it in the document’s HTML <head> and give it an absolute image URL, such as https://example.com/share-image.jpg. The tag is one of Open Graph’s four basic properties, alongside og:title, og:type and og:url.
The basic og:image tag
Open Graph turns an ordinary web page into a rich object that can be represented in a social graph. The image property identifies the visual associated with that object. A minimal implementation is:
<meta property="og:image" content="https://example.com/share-image.jpg">Use the property attribute, not name, and keep the element inside <head>. The URL should be absolute rather than relative: use https://example.com/images/article.jpg, not /images/article.jpg or article.jpg. The image must be reachable by the service fetching the page; an image that only exists behind a login or a browser-only script cannot reliably appear in a preview.
The Open Graph Protocol defines the property and its placement. An OG tag does not display an image on your page and does not replace an ordinary <img> element. It is metadata for link-preview crawlers.
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 minute#1 Best Overall
A complete Open Graph head example
For a page about OG image tags, the essential metadata could look like this:
<head>
<meta property="og:title" content="What Is an OG Image Tag?">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/og-image-tag">
<meta property="og:image" content="https://example.com/images/og-image-tag.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<meta property="og:image:alt" content="A labeled diagram showing an og:image meta tag in a page head">
</head>The four root properties describe the object: its title, type, canonical URL and representative image. The image’s structured properties add information about that image. Keep the values in the content attribute and HTML-escape characters when your templating system inserts user-controlled text.
Useful image properties
og:image:secure_url
This optional property supplies an HTTPS alternative for the image. It is useful when the primary value is not already HTTPS or when you want to state the secure endpoint explicitly:
<meta property="og:image" content="http://example.com/share.jpg">
<meta property="og:image:secure_url" content="https://example.com/share.jpg">For a modern HTTPS site, using an HTTPS value directly for og:image is generally simpler.
og:image:type
Declare the image’s MIME type when it is known:
<meta property="og:image:type" content="image/jpeg">Use the type that the server actually returns. Typical values include image/jpeg, image/png and image/webp; do not label a JPEG as PNG merely because the filename says so.
og:image:width and og:image:height
These properties report the pixel dimensions:
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">They help a consumer understand the asset before or while it fetches the file. They do not resize the image. Resize or crop the source asset itself if its composition is wrong.
og:image:alt
Use this value to describe what the image contains, for example, “A labeled diagram showing an og:image meta tag in a page head.” The protocol specifies that this should be a description of the image, not a caption or a second headline. Avoid stuffing keywords into it.
Multiple OG images and ordering
You can provide more than one candidate image. Declare each root image property, followed immediately by the structured properties that belong to it:
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitches<meta property="og:image" content="https://example.com/share-wide.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<meta property="og:image:alt" content="Wide illustrated article cover">
<meta property="og:image" content="https://example.com/share-square.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="1200">
<meta property="og:image:alt" content="Square illustration of the article topic">When values conflict, the first declared image takes preference. Put the image you want selected most often first, and do not place another image’s width, height or alt tags between a root image tag and its structured properties. Multiple candidates are not a guarantee that every platform will choose the same crop or asset.
How large should an OG image be?
There is no single image dimension established as a universal Open Graph rule. Requirements belong to the service displaying the preview. LinkedIn’s help documentation, “Make your website shareable on LinkedIn,” specifies a minimum of 1200 × 627 pixels for shareable website content. Treat that as LinkedIn’s requirement, not as a promise that every network uses those dimensions.
A practical workflow is to create an image at or above the target service’s documented minimum, keep important text away from edges that may be cropped, and check the actual aspect ratio in each service. Do not infer undocumented limits, fallback behavior or cache duration from one platform’s guidance.
How platforms use OG image metadata
Services fetch your page and inspect its head for Open Graph properties, but their behavior is not identical. LinkedIn asks website source code to comply with the Open Graph Protocol. Apple’s technical note TN3156: Create rich previews for Messages describes Open Graph metadata as a way to provide images and captions for Messages rich previews and also references twitter:card values.
Free tools Windows power users keep installed
One-click scans. No signup required.
Consequently, do not assume that og:image alone controls every preview everywhere. A platform may apply its own metadata, card system, image rules or fallback. The documented Open Graph fields remain the interoperable foundation; consult the target service’s current documentation when a specific preview matters.
Implementing the tag in a CMS or application
Static HTML
Add the tags directly to the page template’s head. Ensure every page has the correct canonical URL and a page-specific image rather than reusing one accidental default.
Server-rendered templates
Generate the values before the response reaches the crawler. Escape quotes and angle brackets in titles and alt text, validate that the image URL is absolute, and provide a fallback image when an article has no custom artwork. The final response should contain ordinary HTML metadata, not only JavaScript that runs after page load.
Single-page applications
If your framework initially serves one shell document and fills metadata after hydration, some crawlers may see the shell instead of the finished values. Prefer server-side rendering or pre-rendering for shareable routes. Confirm by downloading the raw response and inspecting its head, rather than relying only on a browser’s Elements panel after scripts run.
Verification checklist
- Request the public page and inspect its raw HTML source.
- Confirm that
og:imageis inside<head>and appears exactly once unless you intentionally provide ordered alternatives. - Check that its URL is absolute, publicly reachable and points to the intended file.
- Check the companion
og:image:secure_url,og:image:type, width, height and alt values when you use them. - Open the image URL directly and verify that it returns an image with the declared MIME type and dimensions.
- For several images, verify that the preferred candidate is first and that each structured property follows its own root tag.
- Compare dimensions with the target service’s documentation; LinkedIn’s documented minimum is 1200 × 627 pixels.
Checking raw HTML matters because a browser can show metadata inserted by JavaScript that a crawler did not receive in the initial response.
Common mistakes and fixes
The tag uses name="og:image"
Cause: Open Graph syntax uses property. Fix: change it to <meta property="og:image" content="...">.
The URL is relative or inaccessible
Cause: crawlers cannot resolve the path in the way your browser does, or the server requires authentication. Fix: publish a complete HTTPS URL and allow the intended crawler to retrieve the file.
The wrong image is selected
Cause: another og:image appears first, or structured properties are attached to the wrong root tag. Fix: reorder the candidates and group each image’s properties directly after it.
The image looks cropped
Cause: the consuming service uses its own preview ratio. Fix: design with safe margins, provide an appropriately proportioned asset and follow that service’s image guidance.
Changes do not appear immediately
Cause: the service may have retained an earlier fetch; the supplied platform sources do not establish a universal cache duration or refresh method. Fix: verify the current raw HTML and image first, then use the target platform’s documented preview-debugging or refresh process if available.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Inspect a page without assembling a browser script
For a one-off check, you can fetch the HTML yourself and search for property="og:image". For repeated previews, screenshots can reveal what a rendered page looks like after consent dialogs or overlays are handled.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. Before capture it accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be turned off. Only clean shots are billed: bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and each response identifies the result with X-Page-Verdict and X-Billed headers.
One GET request returns PNG, JPEG, WebP or PDF. The API can also wait for a selector, delay or network idle, load lazy images, use a device or viewport, apply custom CSS or JavaScript, hide selectors, block requests, set cookies or headers, and capture a selected element. Its MCP server provides take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients.
Best Value
See the ScreenshotNeo documentation for parameters and response details.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/og-image-tag -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/og-image-tag"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/og-image-tag' });
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 shots; every feature is included on every plan, and yearly billing gives two months free. Create a free ScreenshotNeo account.
FAQ
Is og:image an image element?
No. It is metadata in a <meta> element; it does not render an image in the page body.
Can I use more than one OG image?
Yes. Declare multiple root properties in priority order and put each image’s structured properties immediately after its root tag.
Does LinkedIn’s 1200 × 627 rule apply everywhere?
No. That dimension is LinkedIn’s documented minimum, not a universal Open Graph requirement.
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.
