Recommended Free Tools
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
If an X (formerly Twitter) link preview is missing or wrong, fix the page’s server-rendered metadata first: publish one twitter:card tag, add a public HTTPS image, provide title and description tags, allow Twitterbot to crawl both page and image, then verify the rendered card. For a prominent landscape preview, use summary_large_image with an image around 1.91:1 (commonly 1200×630), while keeping Open Graph tags as fallbacks.
What X reads from your page
X supports four card types: summary, summary_large_image, app and player. Only one twitter:card value is supported on a page. If a CMS or plugin emits duplicates, the last value can take priority, so remove conflicting declarations rather than trying to combine card types.
| Card type | Use it for |
|---|---|
summary |
A compact card with a small thumbnail. |
summary_large_image |
A prominent landscape image; the practical default for articles, products and landing pages. |
app |
App-install or app-deep-link experiences. |
player |
Embedded media players that meet X’s player requirements. |
The processor checks Twitter-specific properties first and can fall back to supported Open Graph properties. Supplying both sets makes the page more portable across social and messaging services.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Use this metadata template
Put the tags in the initial HTML response inside <head>, not only in JavaScript that runs after page load.
#1 Best Overall
<head>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="One-sentence page description">
<meta name="twitter:image" content="https://example.com/social-card.jpg">
<meta name="twitter:image:alt" content="Concise description of the image">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Page title">
<meta property="og:description" content="One-sentence page description">
<meta property="og:image" content="https://example.com/social-card.jpg">
</head>Choose the card image
A practical large-image target is 1200×630 pixels (about 1.91:1). Another current guide uses 1200×600, so treat these as implementation guidance rather than a guarantee: keep the important text and faces away from the edges, and test the live card because responsive crops can differ. Third-party guidance also lists a 5 MB limit. Serve the file over public HTTPS with the correct image content type and no authentication requirement.
Write resilient title and description copy
Make the title and description specific to the destination URL. Put the key promise near the beginning because mobile layouts can truncate text. Keep the same wording in Twitter and Open Graph tags unless you have a deliberate reason to vary it. Add twitter:image:alt with a concise, useful description for people who do not see the image.
Make the page and image crawlable
Twitterbot must be able to fetch the HTML page and the image. A robots.txt rule that blocks the page prevents a card from appearing; blocking the image prevents the thumbnail or photo from appearing. Review robots.txt, CDN firewall rules, authentication, hotlink protection and geo restrictions together.
- Request the exact public URL without cookies or login credentials.
- Confirm the page returns a successful response and contains the tags in the initial source.
- Fetch the image URL directly and confirm it returns the intended file, not an HTML error page or redirect to a login form.
- Check that security tools do not challenge or block the versioned Twitterbot user agent.
- Use absolute URLs, including the scheme and hostname, for image and page values.
Validate both source and rendered output
- View the initial HTML response (for example, use your browser’s “View Source” or fetch the URL from a shell) and search for every
twitter:andog:tag. - Check that exactly one
twitter:cardexists and that its value is the one you intend. - Open the image URL in a private window and verify its dimensions, format and accessibility.
- Paste the URL into the X post composer or a dedicated preview validator, then compare the displayed title, description, image and domain with the source.
- Publish a test post only after the preview is correct, and recheck after deployment from the production hostname.
A CMS settings screen is not proof that the crawler received the tags. Client-side injection, template caching and edge-rendering differences can produce a different initial response.
Why a correct card can still look stale
Card data can remain cached for seven days after a link is published in a Tweet. Therefore, a change that is correct in source may not appear immediately in an already-shared URL. Test a URL that has not been posted before when possible, verify the live response, and allow for the documented cache period before concluding that the markup failed. Changing only a query string may create a different URL for testing, but it does not replace fixing the canonical page.
Common failures and fixes
No preview at all
First check that the page is publicly reachable and that robots.txt does not block Twitterbot. Then inspect the initial HTML for a valid twitter:card. A login wall, bot challenge, timeout or server error can prevent card generation even when your CMS shows the fields.
Image missing but title appears
Fetch the image URL directly. Remove authentication, signed URLs that expire before crawling, unsupported redirects and robots rules that block the asset. Confirm the response is the intended image and that the URL is absolute HTTPS.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Wrong card layout
Search the source for duplicate twitter:card declarations from themes, SEO plugins or tag managers. Keep one value. Remember that summary is compact while summary_large_image is visual.
Old title, description or image
Check the production HTML and image first, then account for the seven-day cache. Purge your own page, CDN and HTML caches so new crawls receive the updated tags; do not assume clearing a CMS preview clears X’s cache.
Tags visible only after JavaScript
Move metadata into server-rendered templates or framework head output that is present in the first response. A crawler that does not execute the same client-side code as a browser may never see injected tags.
Unexpected crop or unreadable text
Use a landscape image near 1.91:1, keep essential content inside a generous safe area and preview it at mobile widths. Avoid placing logos or headlines flush against an edge.
Implementation patterns by stack
Static HTML
Edit the shared document head, replace the page-specific title, description, canonical URL and image URL, then redeploy. Verify the generated production source rather than the local file.
Server-rendered frameworks
Generate the tags from the same route data that renders the page. Ensure every route has an absolute image URL and a fallback image when an article has no custom artwork. Prevent layout components and SEO plugins from emitting a second card type.
Single-page applications
Prefer server-side rendering or pre-rendering for shareable routes. If the initial response contains only an app shell, move critical metadata to the server or edge layer; changing the document head after hydration is unreliable for crawlers.
CDN and image pipelines
Keep the public image URL stable, return the correct content type, and avoid access tokens that expire quickly. When replacing an asset at the same URL, purge image and CDN caches and validate the response bytes, not just the filename.
Performance, reliability and cost considerations
Metadata adds negligible page weight, but image delivery affects crawler success. A moderate-size compressed JPEG, PNG or WebP under the commonly cited 5 MB ceiling reduces transfer time. Avoid chains of redirects and expensive server work before the head is emitted. Monitor status codes, timeouts and firewall events for the page and image separately.
Best Value
Use one canonical image per page unless you have a clear fallback strategy. Keep title, description and image decisions deterministic so a crawler receives the same values on every request. When testing, distinguish a source error from a cache delay: source errors require a fix; cache delays require time and revalidation.
Or skip the browser setup
ScreenshotNeo can capture a URL through one request when you need to inspect what a public page actually renders. It accepts consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets before capture; failed loads, bot checks or CAPTCHAs, blank pages and cache hits are not billed, and each response identifies the page verdict and billing status.
It also provides an MCP server for Claude, Cursor and other MCP clients, with take_screenshot, get_page_info and capture_pdf tools. Every plan includes its features; 1,000 screenshots per month are free with no card, and paid plans start at $5 for 3,000 screenshots.
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 reinstallcURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);See the ScreenshotNeo documentation for request options. Create a free ScreenshotNeo account to start with 1,000 screenshots per month and no card.
Final pre-publish checklist
- One
twitter:cardvalue is present in the initial HTML. - Twitter title, description and absolute HTTPS image are present, with Open Graph fallbacks.
- The image is publicly fetchable, correctly formatted and composed for a landscape crop.
- robots.txt, authentication, CDN and firewall rules allow the page and image.
- The rendered preview matches the source after testing in X or a validator.
- You have considered the seven-day cache before judging a fresh change.
Frequently Asked Questions
Can I use only Open Graph tags?
Open Graph properties can act as supported fallbacks, but retaining Twitter-specific card and copy tags gives you explicit control over the X card type and content.
Does changing the image filename immediately refresh an existing post?
It may create a new fetchable URL, but existing card data can still be cached. Validate the live source and allow for the documented cache period.
Should every page use summary_large_image?
No. Use summary for a compact presentation, and choose summary_large_image when a prominent landscape image communicates the page better.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsQuick 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.
