How to Set a Large Image Twitter Card on a Webpage
Add the right metadata to show a large image when your webpage is shared on X. Learn how to implement it and troubleshoot missing previews.
To ask X to show a prominent image when someone shares a page, add twitter:card with the exact value summary_large_image in that page’s HTML <head>. Set the image to an absolute URL that serves the intended image.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="A useful page title">
<meta name="twitter:description" content="A concise description of this page.">
<meta name="twitter:image" content="https://example.com/images/page-preview.jpg">These tags tell X which card layout and page details to use. They do not guarantee how the card will render: current official X requirements for image dimensions, formats, access rules, validator availability, and cache refresh behavior were not verified in the research for this guide. Check the live page and preview where possible.
1. Add the metadata to the page head
Put the tags in the HTML head for the page you expect people to share. Use page-specific titles, descriptions, and image URLs. The Twitter Card convention uses name attributes for Twitter metadata.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page title</title>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page title for sharing">
<meta name="twitter:description" content="A concise description of this page.">
<meta name="twitter:image" content="https://example.com/images/page-preview.jpg">
</head>
<body>
<main>Page content</main>
</body>
</html>The important card value is exactly summary_large_image. A different or misspelled value may not select the layout you intend.
Use an absolute image URL
Use a complete URL such as https://example.com/images/page-preview.jpg, rather than a path like /images/page-preview.jpg. Open the image URL directly to confirm that it resolves to the intended image. The available research does not establish a complete set of current X fetcher access rules, so treat successful direct loading as a useful check rather than proof that every crawler condition is satisfied.
Choose page-specific sharing text
Keep the title and description concise and representative of the destination page. If you use separate Twitter and Open Graph values, keep them consistent unless you intentionally want different previews on different platforms.
2. Decide whether to add Open Graph metadata
Open Graph and Twitter metadata are separate conventions. Open Graph tags use property, while the Twitter examples use name. A secondary technical reference reports that summary card title, description, and image can fall back to corresponding Open Graph values. Since this fallback guidance is not a current primary X specification, verify the live result rather than assuming it applies in every case.
If your page already has suitable Open Graph tags, a minimal setup may be:
<meta name="twitter:card" content="summary_large_image">
<meta property="og:title" content="A useful page title">
<meta property="og:description" content="A concise description of this page.">
<meta property="og:image" content="https://example.com/images/page-preview.jpg">For more explicit control, supply both sets. Make sure the intended image is consistent across them to avoid ambiguity:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="A useful page title">
<meta name="twitter:description" content="A concise description of this page.">
<meta name="twitter:image" content="https://example.com/images/page-preview.jpg">
<meta property="og:title" content="A useful page title">
<meta property="og:description" content="A concise description of this page.">
<meta property="og:image" content="https://example.com/images/page-preview.jpg">| Approach | When it fits | Trade-off |
|---|---|---|
| Twitter-specific fields | You want explicit X sharing values or platform-specific overrides. | More metadata to maintain. |
| Open Graph fields plus card type | Your Open Graph values already suit X and other sharing platforms. | Depends on fallback behavior; verify the actual X preview. |
| Both sets | You want explicit values for each convention. | Keep duplicate values aligned to avoid conflicting previews. |
3. Render metadata in your framework
Whichever framework or content system you use, make sure the tags are part of the HTML response for the page. A browser may display tags inserted later by client-side JavaScript, while a page fetcher may inspect the original response. Inspect the raw response HTML as well as the browser DOM.
For a content management system, use its page-level SEO or social-sharing fields when available. Confirm that the generated source has one intended twitter:card tag and the correct image for that individual page. Avoid duplicate tags emitted by both the theme and a plugin.
4. Check the result
- Load the page and inspect its raw HTML response.
- Confirm that
twitter:cardis exactlysummary_large_imageand that the title, description, and image are the intended page-specific values. - Open the complete
twitter:imageURL directly and check that it serves the intended image. - Look for duplicate or conflicting Twitter and Open Graph tags.
- Use an available card preview or validator if one is accessible, then compare its result with the live page share.
The research did not verify whether an official X validator is currently available or how to force a cached card to refresh. Do not assume a particular cache lifetime or refresh procedure.
5. Troubleshoot a missing or incorrect image
| Symptom | Likely cause | What to check |
|---|---|---|
| Small card or unexpected layout | The card type is missing, misspelled, or duplicated with a conflicting value. | Inspect the raw head and set one intended twitter:card value to summary_large_image. |
| No image appears | The image URL is wrong, relative, or does not serve the intended image. | Use an absolute URL and open it directly. Confirm twitter:image and, if relying on Open Graph, og:image. |
| Wrong image appears | Twitter and Open Graph values conflict, or duplicate metadata is present. | Search the response HTML for every twitter:image and og:image; align values or intentionally set platform-specific images. |
| Tags appear in the browser inspector but not page source | A framework or script may be inserting metadata client-side. | Check the original HTML response and configure the server-rendered or statically generated page metadata. |
| Preview does not change after an edit | The preview may be stale or using cached data; exact refresh behavior is unverified. | Recheck the current response and image URL, then try an available preview or validator. Do not rely on an assumed cache duration. |
| Preview text does not match the page | Metadata is generic, outdated, or generated from another page template. | Inspect the page-specific title and description fields in the raw response. |
6. Image dimensions and format
Use an image that fits the prominent landscape preview you want, but do not treat a particular pixel size, aspect ratio, file-size ceiling, or format as a settled X requirement based on this guide’s research. Secondary sources disagree on recommended dimensions, and no current primary specification was found to resolve the disagreement. If the preview fails, first check the metadata and whether the image URL serves the intended file; then compare behavior in an available preview mechanism.
7. Or skip the browser setup
If your goal is to capture a webpage preview image for review or automation, ScreenshotNeo is a website screenshot API and MCP server for developers. It can capture PNG, JPEG, WebP, or PDF from one request. This creates an image of a rendered page; it does not add Twitter Card metadata to your webpage. See the ScreenshotNeo API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport 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)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents use screenshot tools. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for free and get 1,000 screenshots a month with no card.
Frequently asked questions
Does this change how the webpage itself looks?
No. These are metadata tags in the document head that describe the page preview to a sharing platform; they do not add an image to the visible page content.
Can every page on a site use the same image?
They can, but page-specific metadata gives each shared URL a preview that better reflects its destination. Confirm the generated tags for individual pages.
Will adding the tags guarantee the large image appears?
No metadata snippet can guarantee the rendered result. Check the live HTML, image URL, and available preview behavior, and avoid relying on unverified image limits or cache rules.
