If a link on X (formerly Twitter) shows a plain URL, no image, or the wrong image, the cause is usually in one of three places: the initial HTML does not contain the intended Open Graph tags, X cannot fetch the image URL, or another tag is taking precedence. Inspect the HTML actually returned by your server, test the image as an anonymous request, and then check crawler and CDN rules.
What an X image preview needs
Open Graph metadata belongs in the document <head>. The protocol defines four basic properties for a page: og:title, og:type, og:image and og:url. It also defines image details such as a secure URL, MIME type, pixel width, pixel height and alternative text.
A minimal server response might contain:
<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-cover.jpg">
<meta property="og:image:alt" content="Description of the article cover">
</head>Historical X card guidance also used a large-image card declaration and Twitter-specific fields:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Example article">
<meta name="twitter:description" content="A concise description">
<meta name="twitter:image" content="https://example.com/images/article-cover.jpg">That guidance is archived material, not a verified statement of every current X requirement. Treat the Open Graph tags as the foundation, and check current X-owned documentation when you need platform-specific behavior.
#1 Best Overall
Diagnose the failure in the right order
- Inspect the raw response. Open the page source, or fetch it from a terminal, and search for
og:image. Do not rely only on the Elements panel after JavaScript has run. - Check the complete page identity. Verify
og:title,og:type,og:urland the intendedog:imageare in the initial<head>. - Test the image independently. Request the exact image URL without a login cookie. It must return the image, not an error document, sign-in page, redirect loop or HTML placeholder.
- Look for duplicate tags. If several
og:imagevalues are present, the Open Graph protocol gives the first value preference when values conflict. An SEO plugin, theme and application code can therefore make an older image win. - Check crawler access. Review robots rules, WAF or firewall policies, hotlink protection, CDN restrictions and server deny rules. A page that works in your logged-in browser can still be inaccessible to a crawler.
- Recheck after publishing the fix. Correct the source that emits the unwanted tag or blocks the request, then share the canonical URL again. Do not assume a plugin’s social preview represents the response an external crawler receives.
1. Confirm what your server actually sends
View source instead of the rendered DOM
Use your browser’s “View page source” command, or fetch the URL with:
curl -L --max-redirs 5 -sS https://example.com/article -o page.html
grep -i -E 'og:image|og:title|og:type|og:url|twitter:card|twitter:image' page.htmlThe result should show the final, intended values in the HTML response. If the tags appear only after a client-side framework hydrates the page, they may be absent from what a crawler reads. Render the metadata on the server or at build time, then verify the delivered source again.
Check canonical identity and duplicates
Search the entire response, not just the first match. Record every og:image, og:url and Twitter image tag, including those emitted by a CMS plugin. Remove duplicates where possible. If you must retain multiple images, put the preferred one first and make sure it is not an old default from a layout or plugin.
Verify the URL exactly
Copy the value from the delivered tag, including the path, filename and extension, and test that exact URL. A typo, case mismatch on a case-sensitive host, missing file, or a URL that differs from the one you tested can explain a blank card.
Free tools Windows power users keep installed
One-click scans. No signup required.
2. Prove that the image is publicly fetchable
Request it without browser state
curl -L --max-redirs 5 -sS
-D image-headers.txt
-o image-response
https://example.com/images/article-cover.jpg
file image-response
head -n 20 image-headers.txtInspect the response headers and file type. The body should be the intended image rather than HTML, an access-denied message or a login form. Repeat the test from a network that is not allow-listed if your organization uses IP controls.
Follow the whole request path
Check redirects, origin authentication, CDN rules and hotlink protection. A rule that permits your browser’s cookies or referrer but denies an anonymous fetch can prevent a preview. Archived X troubleshooting material specifically identifies crawler blocks, robots.txt, server access-denial rules and an image that is too large to download as possible causes.
Review robots and security controls
Read robots.txt and any WAF or firewall event logs for the page and image paths. Temporarily narrow a rule in a controlled way, or allow the relevant crawler request according to your security policy, then retest. Do not disable protection globally just to make one card work.
3. Make the metadata unambiguous in your CMS
Plugin and theme conflicts
CMS themes, SEO extensions and social-sharing plugins can all emit Open Graph fields. Compare the raw response with the settings in each layer. Change the layer that produces the unwanted first value; editing a preview inside one plugin will not remove a duplicate generated elsewhere.
Recommended Free Tools
Templates, localization and redirects
Ensure every locale or route generates a page-specific title, URL and image. Verify that the URL you share is the final destination after redirects and that its response contains the same metadata. A redirect to a generic home page can produce a home-page image even when the original article has a correct tag.
Client-rendered applications
Single-page applications often add head tags after JavaScript executes. If a raw request lacks them, emit the values in server-side rendering, static generation or an edge-rendered template. Confirm with curl after deployment rather than assuming the browser’s inspector is sufficient.
4. Understand image selection and historical X guidance
Open Graph defines image URL, secure URL, MIME type, dimensions and alternative text fields. When multiple values conflict, the first value has preference. This makes ordering a functional issue, not merely a cleanup concern.
Archived X markup guidance used twitter:card=summary_large_image and supplied Twitter-specific title, description and image fields. It also listed historical dimension and file-size recommendations. Those numerical limits and any cache-refresh interval should not be presented as current X specifications without fresh first-party confirmation. If a current X-owned page is available when you publish, use it for platform-specific limits.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Common symptoms, causes and fixes
| Symptom | Likely cause | What to do |
|---|---|---|
| No image or a plain URL | No og:image in the initial response, or the image request is blocked. |
Inspect raw HTML, test the exact image URL anonymously, then review robots, WAF, CDN and server rules. |
| Wrong image | An earlier duplicate og:image, a plugin default, or a redirect to another page. |
List every image tag, put the intended value first, remove stale defaults and verify the final URL’s source. |
| Image works when logged in only | Authentication, cookies, IP allow-listing or hotlink protection. | Repeat without cookies and authorize the required public crawler path rather than relying on a logged-in session. |
| Image URL returns HTML | Missing asset, error page, sign-in response or rewrite rule. | Check status, redirects and file type; fix routing or publish the asset at the exact URL in the tag. |
| Tags visible in DevTools but absent from source | Client-side-only metadata. | Move generation to server-side rendering, static output or an edge template and verify the raw response. |
| Correct tags but no immediate change | A previously fetched result may still be used; current X refresh timing was not established here. | Confirm the new response and image are correct, then reshare the canonical URL. Avoid promising a fixed wait time or relying on an unverified query-string trick. |
Use a repeatable pre-share checklist
- The final URL returns the intended page without an unexpected redirect.
- The initial HTML contains one deliberate
og:imagebefore any fallback image. og:title,og:typeandog:urlidentify the same page.- The image URL is exact, public and fetchable without login cookies.
- The image response is an image rather than HTML, an authorization screen or an error.
- robots.txt, WAF, firewall, CDN and hotlink rules do not deny the page or asset.
- Any CMS or SEO plugin has been checked for duplicate or stale tags.
- After changes, the raw response has been fetched again from outside the normal browser session.
Or skip the browser setup
Once your metadata and access rules are fixed, ScreenshotNeo can provide a repeatable visual check of the page without maintaining a browser script. It accepts a URL and returns a PNG, JPEG, WebP or PDF; its capture options include full-page screenshots, CSS-element capture, custom JavaScript, waits, headers, cookies and user agents. Cookie banners, newsletter popups and chat widgets are removed before the shot, and bot checks, blank pages, failed loads and cache hits are not billed. Its MCP server gives AI agents tools named take_screenshot, get_page_info and capture_pdf.
One request is enough:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/article -o shot.webpSee the ScreenshotNeo documentation for parameters and response headers such as X-Page-Verdict and X-Billed. Equivalent calls:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/article"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/article' });
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 available on every plan. Create a free ScreenshotNeo account to run the checks.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When to escalate the investigation
If the raw page and anonymous image request are correct but X still displays an unexpected result, preserve the exact HTML, response headers, redirect chain and timestamps from your tests. Compare those with current X-owned documentation, because the accessible troubleshooting material for this subject is archived or third-party and does not establish current image thresholds or cache timing. This evidence lets your hosting, CDN or platform support team distinguish metadata errors from crawler-side behavior.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows 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 reinstallFAQ
Do I need both og:image and twitter:image?
Open Graph defines og:image as a basic page property. Historical X examples also used twitter:image. Supplying both can make intent explicit, but neither tag compensates for an image URL that the crawler cannot retrieve.
Best Value
Why does a social-preview plugin say the image is valid when X shows none?
Many plugins preview a rendered or authenticated browser view. X needs the response and asset to be available to its own fetcher. Verify the public, initial HTML and image request independently.
Can I rely on an old image-size limit?
No. Historical guidance contains numerical recommendations, but a current X limit and refresh interval were not established. Use current X documentation for any threshold that affects a production workflow.
Frequently Asked Questions
Do I need both og:image and twitter:image?
Open Graph defines og:image as a basic page property. Historical X examples also used twitter:image; either way, the image URL must be publicly fetchable.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsWhy does a social-preview plugin say the image is valid when X shows none?
A plugin may preview a rendered or authenticated browser view. Verify the initial public HTML and anonymous image request independently.
Can I rely on an old image-size limit?
No. Historical numerical recommendations may have changed; consult current X-owned documentation for production thresholds.
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.
