Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Set the image in your page’s HTML <head> with an Open Graph og:image tag, alongside og:title, og:type, and og:url. Add og:image:alt to describe the picture. This is the standards-based implementation documented by the Open Graph Protocol. It gives X and other consumers page metadata to read, but an og:image tag by itself does not guarantee a particular X card layout or preview.
The current X-specific Cards documentation, image rules, and preview-refresh workflow were not available in the authoritative material reviewed for this guide. Therefore, this article separates what the Open Graph specification establishes from X behavior that still needs confirmation in your own live share preview.
The minimum Open Graph image implementation
Open Graph properties are HTML metadata, not an image attachment uploaded to an X post. Put them inside the document head that is delivered for the page you want people to share.
<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-image.jpg">
<meta property="og:image:alt" content="Description of the image">
</head>Replace every example value with data for the specific page. The content value of og:image is the image URL representing that page or object. The other three basic properties identify the title, object type, and canonical page URL; treating the image as the entire metadata implementation leaves the object incomplete.
#1 Best Overall
The Open Graph specification says that when a page specifies og:image, it should also specify og:image:alt. Alt text should describe what is shown in the image; it is not a marketing caption. Write a concise description that remains useful to someone who cannot see the image.
What each tag does
| Property | Purpose | Page-specific guidance |
|---|---|---|
og:title |
The title of the shared object. | Use the page’s actual headline or a deliberate sharing title. |
og:type |
Declares the object type. | website is appropriate for a normal site page in the illustrative pattern; choose a value that matches your object when your implementation requires another type. |
og:url |
Identifies the object’s URL. | Emit the canonical URL for that page, including the correct scheme, host, path, and meaningful query handling. |
og:image |
Points to the image representing the object. | Use the image URL you want a consumer to retrieve for the share preview. |
og:image:alt |
Describes the image. | Describe visible content rather than repeating the page title or writing a sales caption. |
The specification also defines optional structured image properties:
og:image:url, an equivalent form ofog:image.og:image:secure_url, for a secure image URL when you provide one.og:image:type, such as the image media type.og:image:widthandog:image:height, for the image dimensions.og:image:alt, the textual image description.
These properties describe the object to Open Graph consumers. They do not, by themselves, establish which X card variant appears, what dimensions X currently accepts, or how X refreshes a previously fetched preview.
Recommended Free Tools
How to add the tags directly to a page
1. Choose page-specific values
Prepare a title, object type, canonical URL, image URL, and image description for each page. Avoid using one site-wide image when individual articles need different previews. Keep the image URL stable while you are validating the page, so you can tell whether a change came from the markup or from the image asset.
2. Place the metadata in the server-rendered head
Edit the HTML template, layout, or server-side view that produces the page. Insert the tags between <head> and </head>. If your site renders metadata only after JavaScript runs, inspect the final HTML delivered to a crawler as well as the DOM shown in developer tools; consumers may not execute your application exactly as a browser does.
3. Publish the image at the URL you declared
Make sure the path in og:image identifies the intended file and that the published page and image belong to the same environment you are testing. A staging hostname, a typo in the path, or a file that exists only on your workstation cannot produce the intended result for an external consumer.
4. Inspect the rendered source
Open the public page, use “View Page Source,” and search for og:image, og:title, og:type, and og:url. Confirm that the values are the ones for the page you shared, that each tag appears in the head, and that the image description is present. This is practical verification of your output, not a guarantee of any platform’s later rendering decision.
Crashes, 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 minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall5. Check a live share preview
Share the public URL in the X workflow available to your account and observe the resulting preview. Treat this as a live check rather than proof of a permanent rule: the current X card markup, accepted image constraints, precedence rules, and cache-refresh procedure were not established by the available X documentation. If the result differs from your source, continue troubleshooting the delivered HTML and asset URL before changing tags based on an old tutorial.
Adding more than one image
og:image is repeatable. The Open Graph specification gives the first value in document order preference when multiple values conflict. If you publish several images, put the preferred image first and keep its structured properties immediately associated with it before declaring the next root image.
<meta property="og:image" content="https://example.com/images/primary.jpg">
<meta property="og:image:alt" content="A laptop displaying the article dashboard">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" content="https://example.com/images/alternate.jpg">
<meta property="og:image:alt" content="A close-up of the dashboard navigation">Do not put the alternate image’s width, height, or alt text before the first image’s metadata. Intentional ordering prevents a consumer from pairing structured values with the wrong image.
Using a CMS or publishing system
A CMS can collect a social title, image, and description and generate the same head tags for you. This route is useful when editors should set metadata per article without editing templates. It is not a substitute for verification: configure the page’s Open Graph fields, publish, then inspect the rendered source and confirm that the expected property attributes and content values were emitted.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problems| Route | Best fit | What you must verify |
|---|---|---|
| Direct HTML/template edit | You control the layout or server-side view. | Every page type emits complete, page-specific tags in the document head. |
| CMS social/Open Graph fields | Editors need a form-based workflow. | The CMS actually outputs the chosen values in the public rendered head, not merely in an internal setting. |
Do not assume a plugin or theme setting worked because it saved successfully. The source delivered for the exact URL is the authoritative place to check your implementation.
Why the image may not appear in an X preview
The tags are missing from the delivered head
A template may place metadata in the wrong document, emit it only for logged-in users, or overwrite it with a second set of tags. View the public page source and search for duplicate or absent properties. Remove conflicting output or make the intended values consistent.
The image URL is wrong or points to the wrong asset
Copy the exact URL from the rendered og:image tag and open it directly. Check spelling, path case, redirects, and whether the file is the image you intended. A successful page load does not prove that the referenced image URL is correct.
The page and image are from different environments
Staging pages often contain staging image hosts, temporary paths, or access controls. Publish both the page and image in the environment that external consumers can reach, then repeat the source check.
The wrong image wins among several tags
Because the first conflicting value has preference under the protocol, inspect the complete head from top to bottom. Put the preferred og:image first and keep its structured properties with it.
The preview still differs from the source
Do not infer a current X cache duration, image-size rule, card type, or special twitter:* precedence from an older article. Those X-specific details were not confirmed by the available current documentation. Recheck the public HTML and image first, then use the live sharing preview as a practical observation of what X is doing at that moment.
The image description is absent or misleading
Add og:image:alt whenever you emit og:image. Describe the visual content, not a call to action. This follows the protocol’s recommendation and makes the metadata more useful to consumers that expose image descriptions.
Image preparation and operational checks
- Use an image that actually represents the page rather than a generic logo when the article has a distinct subject.
- Keep the declared image URL and the published file synchronized when replacing artwork.
- Record which image is first in the head when multiple images are present.
- Inspect the final HTML after every theme, template, or CMS change.
- Test representative page types: an article, a landing page, and a page with no custom image.
The Open Graph specification establishes metadata names and relationships; it does not provide a universal X image pixel size, aspect-ratio guarantee, or preview invalidation command. Treat those as platform-specific operational questions that must be confirmed against current X documentation or your own live results.
Or skip the browser setup
If you need a clean image asset from a live page before setting its og:image URL, ScreenshotNeo can return a screenshot through one request. It accepts consent banners as a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be disabled. Bot checks or CAPTCHAs, 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.
Use the returned file at a stable public URL, then place that URL in og:image; ScreenshotNeo does not edit your page metadata for you.
Best Value
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/page"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/page' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);See the ScreenshotNeo documentation for request options. The service also supports full-page captures with lazy images loaded, CSS-selector element captures, dark mode, device presets and custom viewports, retina scale, PDF output, custom CSS and JavaScript, clicks before capture, selector hiding, selector/delay/network-idle waits, request and resource blocking, custom headers, cookies, user agents and Authorization, timezone and geolocation, transparent backgrounds, resizing, TTL-based caching, signed links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification. Common parameter names used by other screenshot APIs also work.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; Growth is $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing gives two months free, and every feature is included on every plan. Create a free ScreenshotNeo account to get started with 1,000 screenshots a month and no card.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
A practical verification checklist
- Open the exact public URL you intend to share.
- View the delivered page source, not only an editor preview.
- Confirm one intentional set of
og:title,og:type,og:url, andog:imagevalues. - Confirm
og:image:altdescribes the image. - Open the image URL directly and verify the intended asset is returned.
- If several images exist, verify the preferred one is first and its structured properties follow it.
- Use a live X share preview to observe the current result, without assuming older X-specific rules still apply.
What is confirmed—and what is not
The Open Graph Protocol specification confirms head placement, the basic properties, image structured properties, image-description guidance, and first-value precedence for repeated properties. The available X Developer data dictionary describes Tweet API data, not current page-head Cards markup. It therefore cannot establish current X tag names, card variants, image dimensions, precedence between metadata systems, or cache-refresh instructions. Implement the standards-based tags above, inspect what your page actually delivers, and treat X’s live rendering as the final platform-specific observation.
Frequently Asked Questions
Is an Open Graph image the same thing as an image uploaded to an X post?
No. og:image is a URL in the page’s HTML metadata. It describes the page for a consumer that reads Open Graph data; it is not an attachment in the post composer.
Should I add og:image:url as well as og:image?
The specification defines og:image:url as equivalent to og:image. Most implementations can use the basic og:image form shown here; add structured properties only when they describe the same image.
Can I rely on an old tutorial’s twitter:image tag or fixed dimensions?
Not as a verified current rule. The current X Cards markup and image requirements were not established by the available authoritative documentation, so confirm any X-specific syntax and constraints against current X guidance before adopting it.
Free tools Windows power users keep installed
One-click scans. No signup required.
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.
