How to set a Twitter Card image for a web page
Add Twitter Card metadata to your page’s HTML head to request a large image preview. Here’s the markup, how to check it, and what to know about legacy requirements.
To request a large image preview for a web page, add twitter:card with the value summary_large_image and an absolute image URL in twitter:image to that page’s HTML <head>. Use an image that represents the specific page. Open Graph tags are useful companion metadata, but keep the explicit Twitter Card type when you want to request the large-image layout.
1. Add the metadata to the page
Put the tags in the document head and replace the example account, title, description, and image with values for the page being shared.
<head>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@youraccount">
<meta name="twitter:creator" content="@author">
<meta name="twitter:title" content="A concise page title">
<meta name="twitter:description" content="A concise description of this page.">
<meta name="twitter:image" content="https://example.com/images/page-image.jpg">
</head>twitter:cardselects the requested card layout. Usesummary_large_imagewhen the image should be prominent.twitter:imageshould be an absolute, publicly accessible URL for the page’s image.twitter:titleandtwitter:descriptiondescribe the page preview.twitter:siteandtwitter:creatoridentify accounts in the legacy example. Replace them with applicable accounts or omit them if they do not apply.
The former Twitter documentation recommended an image that represents the individual page, rather than a generic site logo, author photo, or image reused across many pages. That is a useful editorial rule: choose an image that gives a reader a good preview of this page’s content.
2. Add Open Graph metadata as a companion
A legacy tag reference lists Open Graph title, description, and image fields as fallbacks for their Twitter-specific counterparts. Because the old detailed documentation now redirects to a general X developer overview, treat this as documented legacy behavior rather than a guarantee of current platform behavior. Add both sets when your site needs Open Graph metadata too:
<meta property="og:title" content="A concise page title">
<meta property="og:description" content="A concise description of this page.">
<meta property="og:image" content="https://example.com/images/page-image.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="A concise page title">
<meta name="twitter:description" content="A concise description of this page.">
<meta name="twitter:image" content="https://example.com/images/page-image.jpg">Keep the explicit twitter:card declaration if you want to request the large-image card. The legacy reference’s fallback mapping does not select the card type for you.
3. Put the tags in the HTML that is served
The metadata needs to be present in the page head returned to a crawler. If your site uses a framework or content management system, add the fields through its page-level SEO or head metadata feature, then inspect the rendered HTML rather than assuming the editor’s saved settings made it into the response.
- Set a distinct title, description, and image for the page.
- Use an absolute HTTPS image URL that points to the intended image asset.
- Publish the page and inspect its served HTML source.
- Confirm the metadata appears in the
<head>and that the image URL is spelled correctly. - Check current X documentation or platform tooling for a currently supported preview validation and refresh process. The former validator instructions could not be confirmed as current.
4. Choose an image and interpret legacy specifications carefully
The former Summary Card with Large Image documentation gave a minimum image size of 280 by 150 pixels and a file size below 1 MB. Those figures are historical requirements from a reproduced legacy document, not confirmed current X requirements. The old detailed X documentation paths redirect to a general developer overview, so check current X documentation before treating any dimensions, file limits, or formats as strict requirements.
Regardless of current technical limits, use an image that suits the page and ensure its URL resolves publicly. Avoid relying on a generic logo or author portrait when a page-specific image better represents the content.
5. Troubleshoot missing or incorrect previews
| Symptom | What to check | Likely fix |
|---|---|---|
| No image preview | Whether twitter:card and twitter:image are present in the served page head. |
Add the missing tags to the rendered page metadata and publish again. |
| Wrong image | The exact value of twitter:image and whether it is specific to this page. |
Correct the absolute URL and use the intended page image. |
| Tags look correct in the CMS, but not in page source | The final HTML returned for the public page. | Fix the template, metadata configuration, or rendering path that omits the head tags. |
| Open Graph preview fields appear, but the large layout is not requested | Whether twitter:card explicitly says summary_large_image. |
Add the explicit card type; legacy documented fallbacks cover title, description, and image, not the card selector. |
| Image URL works for you but may not be available to a crawler | Whether the URL is public and points directly to the image asset. | Use a publicly accessible absolute URL and check current platform requirements for image fetching. |
| Preview is stale or a validator is unavailable | Current X documentation and platform tooling. | The former validator and cache-refresh instructions were not verified as current; use the current official guidance rather than assuming a legacy tool or refresh procedure still works. |
6. Keep the page metadata maintainable
Generate the title, description, and image from each page’s own content where possible. This reduces accidental reuse across pages. When changing metadata, verify the published HTML again; an editor’s configuration is not proof that the public page serves the expected tags.
Or skip the browser setup
If you need a screenshot of the page itself to review its published appearance, [ScreenshotNeo](https://screenshotneo.com) can return an image or PDF with one GET request. See the ScreenshotNeo API documentation for its options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpScreenshotNeo 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 take screenshots, and 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000.
Sign up for 1,000 free screenshots a month, with no card required.
FAQ
Does adding the image to the social post set the page’s card image?
No. The page selects its preview image through metadata, especially the twitter:image field.
Can Open Graph tags replace the card type?
No. The legacy reference documents fallback mappings for title, description, and image. Keep twitter:card explicit to request the large-image layout.
Are the old 280 by 150 pixel and under-1-MB limits current?
They are historical figures from legacy documentation. The reviewed current official documentation paths did not confirm them as current requirements.
Is the old Twitter Card Validator still available?
Its availability and the current preview refresh process could not be verified. Consult current X documentation or platform tooling.
Sources and currency
The large-image markup and historical image guidance came from a legacy large-image documentation path; old detailed X developer paths now redirect to the general X Developer overview. The Open Graph fallback mapping was reproduced in a legacy tag reference. These sources do not establish that legacy dimensions, validator availability, fallback behavior, or crawler refresh details remain current.
