An OG image tag is the Open Graph metadata property og:image. It tells social networks and other link-preview systems which image represents a web page when someone shares its URL. Add it as a <meta> element in the document’s HTML <head>, using an absolute image URL:
<meta property="og:image" content="https://example.com/share-image.jpg">The tag is part of the Open Graph protocol, alongside og:title, og:type, and og:url. It does not itself resize, generate, or host an image; it supplies the address of an image that a crawler can retrieve.
What og:image does
Open Graph metadata lets a web page become a rich object in a social graph. When a page is shared, a platform can read the metadata and build a preview containing a title, URL, description and image. The root image property is:
<meta property="og:image" content="https://example.com/images/article-share.jpg">property must be og:image; content should be an absolute, publicly retrievable URL. Relative paths such as /images/share.jpg are not a reliable substitute for a complete URL.
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 →#1 Best Overall
The image describes the page or object being shared. It is separate from an inline article image, a favicon, or a CSS background. A page can have excellent visual content and still show a poor social preview if its Open Graph metadata is missing, points to the wrong file, or is inaccessible to crawlers.
The protocol’s four basic properties are og:title, og:type, og:image, and og:url. See the Open Graph Protocol specification for the property definitions.
Complete HTML example
Place the tags inside <head>, not in the page body:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>What Is an OG Image Tag?</title>
<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:secure_url" content="https://example.com/images/og-image-tag.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 labeled diagram showing an og:image meta tag in a page head">
</head>
<body>
<article>Page content</article>
</body>
</html>Use the canonical URL in og:url, and make sure it identifies the same page represented by the image. The image URL should return the actual image bytes with an appropriate response, rather than an HTML error page or a login screen.
Image properties you can add
The root og:image property is enough to identify an image. Structured properties provide additional information and must follow the root declaration they describe.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →| Property | Purpose | Example |
|---|---|---|
og:image:secure_url |
HTTPS alternative for the image | https://example.com/share.jpg |
og:image:type |
Image MIME type | image/jpeg |
og:image:width |
Pixel width | 1200 |
og:image:height |
Pixel height | 627 |
og:image:alt |
Text describing what the image contains | A labeled diagram of an og:image tag |
og:image:alt is an image description, not a caption or a keyword list. Write what a person needs to understand the visual. If the image is decorative, follow your accessibility policy rather than stuffing the field with promotional text.
Using more than one image
You may declare multiple og:image properties, for example a landscape version followed by a square alternative:
<meta property="og:image" content="https://example.com/share-landscape.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<meta property="og:image:alt" content="Landscape illustration of the article topic">
<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">Keep each image’s structured properties immediately after its root tag. When values conflict, the first declared image takes preference. Put the image you most want displayed first; do not assume a service will choose the largest file or the last declaration.
How large should an OG image be?
There is no single image dimension established by the Open Graph protocol for every service. LinkedIn’s help documentation specifies a minimum of 1200 × 627 pixels for shareable website content. Treat that as LinkedIn’s requirement, not a universal rule for every network. Check the documentation for each service your audience uses.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesA practical workflow is to create a readable primary image at or above the target service’s stated minimum, keep important text away from edges that may be cropped, and provide accurate width and height metadata. If you publish several variants, order them deliberately and test the one at the top of the list.
Image dimensions do not guarantee a particular preview. Platforms can apply their own crops, layouts, caching and fallback rules. The available LinkedIn and Apple documentation does not establish one current, universal behavior for all networks.
How platforms use Open Graph metadata
LinkedIn says website source code should comply with the Open Graph Protocol and specifies a 1200 × 627 pixel minimum for shareable website content. Follow its current guidance at LinkedIn Help: Make your website shareable on LinkedIn. A valid tag does not override platform-specific limits or presentation choices.
Messages and Apple platforms
Apple’s technical note, TN3156: Create rich previews for Messages, identifies Open Graph metadata as one way to provide images and captions for Messages rich previews and also discusses twitter:card values. This means og:image can contribute to a Messages preview, but you should not assume every Apple or third-party preview relies on that property alone.
Other services
Different crawlers may support different metadata, apply different crops, or fall back to page content. The sources above do not provide a complete current comparison of every service’s dimensions, cache lifetime, fallback order or crawler requirements. Validate the services that matter to your distribution rather than promising one result everywhere.
Adding the tag in common site setups
Static HTML
Edit the template that renders the page’s <head> and insert the tags before </head>. If pages have different share images, substitute each page’s absolute URL and image description during template rendering.
Server-rendered applications
Generate the values from page data on the server so crawlers receive them in the initial HTML response. Avoid relying only on client-side JavaScript that runs after a crawler has already fetched the document.
Content-management systems
Use the system’s SEO or social-sharing fields if they output standard property="og:image" markup. Inspect the rendered source, not just the editor preview, to ensure the final page contains one intended root tag and its structured properties.
Free tools Windows power users keep installed
One-click scans. No signup required.
Multiple templates or locales
Ensure each canonical page emits its own matching og:url and image. A language switcher or campaign parameter should not accidentally replace the image with a different locale’s asset unless that is intentional.
How to verify an OG image tag
- Open the published page in a browser.
- View the raw page source, or use developer tools and inspect the document’s
<head>. - Search for
property="og:image"and confirm that the first value is the intended absolute URL. - Open that image URL directly. Confirm it loads without authentication, a cookie challenge, a redirect loop or an HTML error.
- Check that any
og:image:width,og:image:height,og:image:typeandog:image:altvalues follow the correct root tag. - Compare the pixel dimensions with each target platform’s current documentation, including LinkedIn’s 1200 × 627 minimum where applicable.
Inspecting raw HTML matters because a browser extension or a client-side framework can make a tag appear in a live DOM even when it was absent from the initial response a crawler reads.
Common problems and fixes
The preview shows no image
Check that the tag is in <head>, the URL is absolute and publicly reachable, and the response serves an image rather than an error page. Verify that robots, authentication, hotlink protection or a firewall is not blocking the crawler.
The wrong image appears
Search for duplicate og:image tags. The first declaration has preference when values conflict, so remove stale tags or move the intended image to the first position. Confirm that your page template, not a plugin, is adding a second value.
The image is cropped unexpectedly
Cropping is controlled by the consuming service. Keep essential text and faces within a safe central area, use dimensions suitable for that service, and test the actual share destination rather than inferring the result from your site’s own image element.
Changes do not appear immediately
A service may retain a previously fetched preview. The cited documentation does not establish a universal cache duration or a universal refresh mechanism. Recheck the source HTML first; then use the platform’s documented preview-refresh workflow if one is available.
The image is insecure or blocked
Use HTTPS for the page and image, and provide og:image:secure_url when appropriate. Check certificate validity, redirects and access controls from an unauthenticated request.
Alt text is ineffective
Keep og:image:alt descriptive and specific. It should explain the visual content, not repeat the title, add hashtags or act as a marketing slogan.
Best Value
Preview inspection without maintaining a browser
If you need repeatable screenshots of a rendered page to inspect how a share image, banner or responsive layout looks, ScreenshotNeo is a website screenshot API and MCP server. It accepts a URL and returns a PNG, JPEG, WebP or PDF. Before capture, it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be turned off. Only clean shots are billed, while 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.
Or skip the browser setup
Make one request to capture a page after you publish its metadata:
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.webpSee the ScreenshotNeo documentation for authentication and options. The same service supports full-page captures with lazy images loaded, CSS-selector element captures, dark mode, 12 device presets and custom viewports, retina scale, PDF paper and page controls, custom CSS or JavaScript, clicks, waits, request blocking, headers, cookies, user agents, Authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, a usage API and an OpenAPI specification. Its parameter names are compatible with those used by many screenshot APIs.
For AI workflows, the MCP server exposes take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots, and every feature is available on every plan. Create a free ScreenshotNeo account to try it.
cURL, Python and Node.js capture examples
Python
import 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,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js
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}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));Use a page URL that is publicly accessible and replace the example URL with the page you are checking. For private staging pages, configure the service’s supported headers or cookies rather than exposing credentials in the URL.
Performance, reliability and cost considerations
- Emit metadata in the initial HTML response so a crawler does not need to execute application JavaScript.
- Serve a correctly encoded image at a stable HTTPS URL and keep the file size practical for repeated retrieval.
- Use explicit dimensions and MIME type when you know them; they help consumers evaluate the asset before downloading it fully.
- Declare only intentional candidates and put the preferred image first.
- Test after changing templates, image hosts, redirects, access rules or consent software.
- For automated visual checks, use waits or a selector when a page renders asynchronously, and use caching deliberately. ScreenshotNeo identifies cache hits and does not bill them.
OG image tag checklist
og:imageappears in the HTML<head>.- The value is an absolute HTTPS image URL.
- The image URL loads without login, challenge or redirect failure.
- The first declared image is the one you want services to prefer.
- Structured properties immediately follow the root image they describe.
og:image:altdescribes the visual itself.- Dimensions meet each target platform’s documented minimum; LinkedIn’s cited minimum is 1200 × 627 pixels.
og:title,og:typeandog:urlidentify the same page.- You have inspected raw HTML and, where important, the rendered result on the target service.
Frequently Asked Questions
Is an OG image the same as a favicon?
No. A favicon identifies a site or browser tab; og:image identifies the image used for a shared-page preview.
Can I use a relative URL for og:image?
Use an absolute URL such as https://example.com/share.jpg. It gives crawlers an unambiguous address and matches the protocol examples.
Do I need twitter:image as well?
The cited Apple documentation references twitter:card, and services differ. Check the metadata requirements of each destination instead of assuming og:image is the only field any platform reads.
Recommended Free Tools
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.
