Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

To make a reliable Twitter/X link preview, put one twitter:card declaration plus a title, description and absolute HTTPS image URL in the server-rendered <head>. Use summary_large_image for a prominent landscape preview, provide matching Open Graph tags, allow Twitterbot to fetch both the page and image, then verify the rendered card—not just your CMS settings. Changes can remain cached for up to seven days after a link is published.

What X reads from your page

X checks Twitter-specific metadata first and can fall back to supported Open Graph properties. A robust implementation therefore declares one card type and supplies both namespaces for the shared title, description and image.

Card value When to use it
summary Compact link preview with a smaller image treatment.
summary_large_image Visual, landscape-focused preview; the practical default for articles, landing pages and product pages.
app Use for an app card when your page is promoting an application.
player Use for a player card when the destination is an embeddable media player.

Only one twitter:card value is supported per page. If a CMS, theme and SEO plugin all emit the tag, the last duplicate can take priority. Remove the extras instead of trying to make conflicting declarations work together.

Use this server-rendered metadata

Place the following in the initial HTML response’s <head>. Replace the example copy and URLs with values specific to the page being shared.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
<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>

Make the copy match the destination

Write a title and description that accurately describe the linked page, not your site generally. Put the key promise near the beginning because mobile layouts can truncate text. Keep the image, title and description consistent so the card sets the same expectation as the click-through page. Supply twitter:image:alt with a concise description when your implementation supports it.

Use absolute, public URLs

The image URL must be a complete HTTPS address, not a relative path such as /images/card.jpg. The page and image must be fetchable without a login, session cookie or private network. If an image URL returns a redirect, challenge page or HTML error instead of the intended image file, the card cannot use it.

Choose and prepare the preview image

Dimensions and aspect ratio

A practical large-image target is 1200×630 pixels, approximately a 1.91:1 landscape ratio. Another current guide lists 1200×600, so treat these as implementation guidance rather than an unconditional platform requirement. Test the actual rendering in X after publishing.

Keep logos, headlines and other essential text away from every edge. Responsive layouts can crop the outer portion of an image, especially on narrow screens. Export the intended file—not a design-tool preview URL—and check that the server returns the correct content type.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

File size and accessibility

Third-party guidance commonly lists a 5 MB maximum for the image. Staying comfortably below that threshold improves fetch reliability. Use a readable filename, serve over HTTPS and write useful alternative text in twitter:image:alt; alt text should describe the meaningful visual, not repeat the filename.

Make your page crawlable

A perfect tag set is useless if Twitterbot cannot retrieve it. The page and image must both be reachable by the crawler. The Twitter Cards documentation notes that Twitterbot uses a versioned user-agent string and that a robots.txt rule blocking the page prevents a card; blocking the image prevents the thumbnail or photo.

Check robots.txt and access controls

  • Open https://your-domain.example/robots.txt and look for rules that disallow the page path or the image directory.
  • Check CDN, WAF and bot-management rules for the versioned Twitterbot user agent. Do not require a browser challenge, login or JavaScript interaction for the metadata or image.
  • Confirm that the image host permits external fetching and does not require a short-lived signed URL that expires before X retrieves it.

Render metadata in the first response

View the initial HTML response with a command-line HTTP client or your browser’s “view source.” Tags injected only after client-side JavaScript runs may be absent when the crawler reads the page. Server-side rendering, static generation or a correctly configured edge renderer puts the metadata where the crawler expects it.

Implement it safely in a CMS or framework

  1. Find the component that owns the document <head> for the shared route.
  2. Set exactly one card type, normally summary_large_image.
  3. Populate title, description and image from the page’s canonical content model.
  4. Add the matching og:title, og:description, og:image and og:url properties.
  5. Build or deploy, then inspect the raw HTML response—not only the editor preview—to ensure the tags are present once.

When a plugin already emits Open Graph tags, keep its values only if they match the page. Duplicate Twitter tags are more dangerous than missing convenience fields because the last declaration may silently win.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Validate both source and rendered card

Validation has two separate jobs: proving that your server emits the intended metadata and proving that X can fetch and render it.

  1. Inspect source. Open the live page’s initial HTML and search for twitter:card, twitter:title, twitter:description and twitter:image. Confirm there is one card declaration and that all URLs are absolute.
  2. Fetch the image directly. Open the image URL in a private browser window or fetch it without authentication. Confirm that it returns the intended image, not an access-denied page, redirect loop or HTML error.
  3. Check crawler permissions. Review robots.txt and any CDN/WAF rules for both the page and image.
  4. Preview the rendered result. Paste the URL into X’s post composer or a dedicated preview validator such as the validator documented by OG-image.org. Compare the displayed title, description, image and domain with the source tags.
  5. Recheck after edits. Card data can remain cached by Twitter for seven days after a link to a page with card markup is published. A correct fix may therefore appear only after the cache expires; verify the live result before changing working markup again.

Troubleshooting missing or stale previews

No card appears at all

  • Cause: The page is blocked to Twitterbot, requires authentication, or fails to return a usable HTML response.
    Fix: Remove the blocking robots.txt rule and bot challenge for the page, then confirm the public HTTPS response.
  • Cause: Metadata is added only after hydration.
    Fix: Emit the tags in server-rendered or statically generated HTML and verify with “view source.”

The image is missing but text appears

  • Cause: The image URL is blocked, private, invalid or returns the wrong content.
    Fix: Fetch the URL anonymously, permit Twitterbot to access the image path and point twitter:image to the actual file.
  • Cause: The asset is unsuitable for the renderer or exceeds the practical size guidance.
    Fix: Export a landscape image around 1200×630, keep it below the commonly cited 5 MB limit and test again.

The wrong title, image or card layout appears

  • Cause: Multiple twitter:card or title/image declarations are emitted by different plugins.
  • Fix: Inspect the final HTML, delete duplicate declarations and leave one authoritative set of values.
  • Cause: X is serving cached card data.
  • Fix: Allow for the documented seven-day cache window, then preview the URL again.

The preview is correct in source but not in a tool

Compare the tool’s fetched response with your browser’s source. A CDN variation, geo-specific response, redirect or user-agent rule can serve different HTML to a crawler. Test the public URL without cookies and inspect response headers and redirects.

Performance and reliability considerations

Keep the card image on a stable HTTPS host with predictable caching and no expiring authorization. A small, correctly encoded image is fetched faster and is less likely to hit a timeout. Avoid generating a different image for every request unless the URL remains publicly retrievable long enough for crawler retries. Treat the rendered preview as the final test because source correctness alone does not prove crawl success.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Or skip the browser setup

If you need a repeatable visual check of the live page, ScreenshotNeo can render a screenshot through one request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be disabled. Bot checks, 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 also lets Claude, Cursor and other MCP clients call take_screenshot, get_page_info and capture_pdf.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

See the ScreenshotNeo API documentation for parameter details. A direct cURL request is:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webp

The same capture in Python:

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)

And in 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}`);

For card QA, useful options include full-page capture with lazy images loaded, a specific CSS element, dark mode, device presets or custom viewport, retina scale, custom CSS/JavaScript, click-before-capture, hide selectors, waits for a selector, delay or network idle, request/resource blocking, custom headers/cookies/user agent, timezone and geolocation, transparent backgrounds, resizing, a chosen cache TTL, signed links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, usage reporting and an OpenAPI specification. Existing parameter names used by other screenshot APIs also work.

Plan Included shots Price
Free 1,000 per month No card required
Starter 3,000 $5
Growth 15,000 $15
Pro 60,000 $39
Scale 250,000 $99
Business 1,000,000 $249

Every feature is available on every plan, and yearly billing provides two months free. Start with 1,000 free ScreenshotNeo screenshots a month with no card.

Frequently Asked Questions

Is 1200×630 a mandatory X specification?

No. It is a practical 1.91:1 target cited by current implementation guidance; another guide uses 1200×600. Choose one consistent landscape standard and verify the live rendering in X.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

What does blocking only the image in robots.txt do?

The page may still produce text metadata, but X cannot display the thumbnail or photo. Permit crawler access to both the document and the image URL.

Why should I inspect raw HTML when my CMS preview looks correct?

A CMS screen can show settings that are not present in the first HTML response, or multiple plugins can add conflicting tags. The crawler evaluates the response it can fetch, so source inspection catches both problems.

The Bottom Line

Use one server-rendered summary_large_image declaration, matching Open Graph tags, a public landscape HTTPS image and crawler access; then validate the rendered card and allow for X’s cache window.

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.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.