How to Set an Open Graph Image for X (Twitter)
Add an Open Graph image in your page’s HTML head, verify the rendered tags, and troubleshoot missing X link previews without relying on outdated card advice.
Direct answer: Put an og:image meta tag in the page’s HTML <head>, alongside the other basic Open Graph fields. The value must be a publicly reachable image URL that represents the page. Add descriptive og:image:alt text. The Open Graph protocol documents this metadata format; current X-specific card rules should be treated separately because they were not verified in the research for this guide.
1. Add the Open Graph tags to your page
Use the Open Graph Protocol’s basic properties: og:title, og:type, og:image, and og:url. Place them in the document head with property and content attributes.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example page</title>
<meta property="og:title" content="Example page">
<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="A preview illustration for the example page">
</head>
<body>
<h1>Example page</h1>
</body>
</html>The Open Graph specification defines og:image as the image URL representing the page or object. It also recommends supplying og:image:alt whenever an image is specified, with text that describes the image rather than serving as a caption.
What each property does
| Property | Purpose | Implementation note |
|---|---|---|
og:title |
Title of the shared page | Use the page-specific title. |
og:type |
Type of object | website is suitable for a normal site page. |
og:url |
Canonical page URL | Use the URL you want associated with the share. |
og:image |
Image URL | Use an absolute, publicly reachable URL. |
og:image:alt |
Image description | Describe what the image contains. |
2. Add structured image metadata when useful
The protocol also defines structured properties for an image:
<meta property="og:image:url" content="https://example.com/images/share-image.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/share-image.jpg">
<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:alt" content="A preview illustration for the example page">og:image:url is equivalent to og:image. Only publish dimensions and MIME information that match the actual file. The research does not establish current X-specific dimensions or formats, so do not treat these example values as an X requirement.
3. Choose one image or define an intentional fallback order
Open Graph properties can be repeated. When values conflict, the specification gives preference to the first value from top to bottom. If you publish more than one og:image, put your preferred image first and keep each image’s structured properties immediately associated with it before declaring the next root image.
<!-- Preferred image first -->
<meta property="og:image" content="https://example.com/images/page-primary.jpg">
<meta property="og:image:alt" content="Primary illustration for the page">
<meta property="og:image:type" content="image/jpeg">
<!-- Optional fallback image -->
<meta property="og:image" content="https://example.com/images/page-fallback.jpg">
<meta property="og:image:alt" content="Fallback illustration for the page">4. Implement the tags in a CMS
If a CMS or publishing plugin provides social-sharing fields, enter the page title, canonical URL, image, and image description there. Then inspect the rendered HTML source of the published page. A setting in an editor is useful only when it emits the expected meta elements in the actual document head.
- Set a page-specific social image URL.
- Set the image description.
- Publish or update the page.
- Open the public page and inspect its rendered source.
- Confirm that the values are in
<head>, not only in an editor preview or JavaScript state.
5. Understand what is and is not verified about X
An Open Graph image is page metadata, not an image attachment uploaded to an X post. The available research did not surface a current authoritative X Cards specification. Therefore this guide does not claim current twitter:* tag syntax, card variants, image dimensions, precedence rules, cache behavior, or a particular preview-refresh tool. An og:image tag alone is not a guarantee that X will display a specific card layout.
Use Open Graph metadata as the standards-based foundation, then check the live share result for your page. Treat any platform-specific behavior you observe as subject to change until confirmed by current X documentation.
6. Verify the rendered page
Source inspection checklist
- The tags are inside
<head>. og:title,og:type,og:url, andog:imageare present.og:imageis an absolute HTTPS URL that returns the intended image.og:image:altdescribes the image.- The URL and title match the page being shared.
- If multiple images exist, the preferred one appears first.
Inspect the final HTML delivered to a crawler, rather than assuming client-side code will be executed or that a CMS control emitted a tag.
7. Troubleshoot a missing image or wrong preview
| Symptom | Likely cause | Fix |
|---|---|---|
| No image metadata appears | The tags were omitted, placed outside <head>, or generated only after JavaScript runs. |
Render the tags in the server-delivered head and inspect the published source. |
| Wrong image appears | Several og:image values are present, or the preferred one is not first. |
Remove duplicates or order the preferred root property first. |
| Image URL works in a browser but not to a crawler | The URL requires authentication, blocks automated requests, redirects unexpectedly, or is not publicly reachable. | Serve the asset publicly over HTTPS and verify the final response URL and content type. |
| Image description is missing | og:image:alt was not emitted or is attached to a different image. |
Add it directly after the matching image property and describe the visual content. |
| Preview still looks old | A platform may retain a previously fetched representation. | Confirm the current HTML and image first; then follow the platform’s current documented refresh process when one is available. |
| Image is stretched or cropped | The consuming platform applies its own presentation rules. | Keep the source image composed for sharing and verify the result on the live platform; this research does not establish current X crop rules. |
8. Performance, reliability, and cost considerations
- Keep the asset fast: host the image on a reliable HTTPS origin and avoid a chain of unnecessary redirects.
- Keep metadata deterministic: emit the same canonical values in server-rendered HTML for every request to the page.
- Version changed images: changing the image URL when the artwork changes can make it easier to distinguish a new asset from an old fetched representation.
- Protect availability: do not put the image behind a session cookie, expiring authorization, or a rule that blocks ordinary crawlers.
- Control cost: Open Graph tags themselves have no per-request API cost; your costs come from image creation, storage, bandwidth, and any service used to generate or inspect the asset.
9. Capture and inspect the finished page
A screenshot can confirm that the page renders as intended, but it does not replace checking the HTML head. For automated visual checks, you can use ScreenshotNeo to capture the published URL after deployment.
10. FAQ
Is og:image an upload to X?
No. It is a URL in your page’s metadata that points to an image representing the page.
Do I need every structured image property?
No. The basic implementation needs og:image; structured properties such as type, dimensions, secure URL, and alt text add metadata when you can provide accurate values.
Should I copy an old twitter:image tutorial?
Be careful. Current X-specific markup and requirements were not verified in the research for this article. Start with the standards-based Open Graph tags and confirm current X guidance before adding platform-specific tags.
Can a CMS setting replace editing HTML?
Yes, if it generates the correct tags in the published document head. Always inspect the rendered source.
Or skip the browser setup
For a visual check of the final page, ScreenshotNeo provides a single-call website screenshot API. Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf from Claude, Cursor, or another MCP client.
See the ScreenshotNeo API documentation for all options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webpimport 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)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}`);ScreenshotNeo includes 1,000 screenshots per month free with no card. Paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.
Sources
- Open Graph Protocol specification — basic properties, head placement, image URLs, and structured image metadata.
- X Developer Platform data dictionary — legacy API data reference; it does not establish current Cards markup or image requirements.
