To generate a thumbnail for an X (formerly Twitter) link preview, add X card metadata to the page’s server-rendered <head> and point twitter:image at a public HTTPS image. Use summary_large_image for the familiar large landscape preview, and include matching Open Graph tags so LinkedIn, Facebook, Slack and chat applications can use the same asset.
The image must be fetchable without a login, firewall challenge or hotlink restriction. The complete implementation below gives you copy-ready HTML, image-sizing guidance, publishing options, testing steps and fixes for stale or missing previews.
Use this metadata in every page
Place the following tags inside the page’s HTML <head>. Replace the title, description, image URL and canonical URL for each page rather than reusing one generic image everywhere.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How to generate link-preview thumbnails">
<meta name="twitter:description" content="A concise description of the page.">
<meta name="twitter:image" content="https://example.com/social-preview.jpg">
<meta name="twitter:image:alt" content="Description of the important visual information">
<meta property="og:title" content="How to generate link-preview thumbnails">
<meta property="og:description" content="A concise description of the page.">
<meta property="og:image" content="https://example.com/social-preview.jpg">
<meta property="og:url" content="https://example.com/article">
<meta property="og:type" content="article">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">X-specific tags historically take precedence when present. Matching Open Graph values provide fallbacks and make the same page useful to other link-preview readers. X tags use the name attribute; Open Graph tags use property.
#1 Best Overall
What each tag controls
twitter:cardselects the layout. Usesummary_large_imagefor a large image orsummaryfor a small square thumbnail.twitter:titleandtwitter:descriptionsupply the text shown with the card.twitter:imageis the absolute image URL that X retrieves.twitter:image:altdescribes the important visual information for people using assistive technology.og:urlidentifies the page represented by the metadata;og:typeis normallyarticlefor an article page.og:image:widthandog:image:heighttell consumers the intended dimensions and help them process the asset before downloading it.
Choose the card layout before designing the image
| Card value | Appearance | Best use | Design implication |
|---|---|---|---|
summary_large_image |
Large landscape image above the title and description | Articles, landing pages and posts where the visual should carry attention | Design a wide composition and keep essential text away from the edges |
summary |
Small square image beside the text | When the image is secondary to the link title | Make the subject recognizable after a square crop |
X crops the summary format to a square. A landscape design with a long headline can therefore lose words or a subject when used with that card type; create a separate square-safe composition if you need both layouts.
Design a reliable thumbnail
Start with a 1200×630 canvas
A practical cross-platform canvas is 1200×630 pixels, about a 1.91:1 ratio. Keep faces, logos and text inside a centered safe area rather than touching the border. Different consumers can crop or resize the same source, and mobile previews provide less room for small type.
Historical compatibility guidance summarized by The SEO Framework lists 300×157 as a minimum for a large-image card, 4096×4096 as a maximum dimension and 5 MB as a maximum file size. Those figures are older documented limits, not a guarantee of current X behavior, so verify the current result after publishing. A 1200×630 image well below 5 MB is a practical target.
Select a supported format
- JPG works well for photographic backgrounds.
- PNG preserves sharp type, illustrations and transparency where supported by the consumer.
- WEBP can reduce file size when the receiving platform accepts it.
- GIF is documented as supported, but animated GIF guidance says only the first frame is used.
- SVG is documented as unsupported for this use; export a raster image instead.
Make text legible and accessible
Use strong contrast, large type and a simple focal point. Avoid putting required information against the outer edges, where cropping is most likely. Write concise, factual twitter:image:alt text that describes the meaningful visual content, not a keyword list or a duplicate of the page title.
Make the image publicly fetchable
The image URL must be an absolute HTTPS URL, not a relative path such as /images/card.jpg. It must return the image to an unauthenticated crawler. Check that the response does not require a session cookie, login, JavaScript challenge or special authorization header.
- Serve the image from the same production hostname or a trusted public asset host.
- Do not protect the file with a firewall rule that blocks social crawlers.
- Do not use hotlink protection that rejects requests whose referrer is absent.
- Ensure robots or other access controls do not block the crawler from the page or image.
- Use a stable URL while testing; if you replace the binary at the same URL, caches may continue showing the old file.
Choose how to produce page-specific images
| Approach | How it works | Advantages | Trade-offs |
|---|---|---|---|
| Design manually | Create a 1200×630 asset in an image editor and upload it for each page | Maximum visual control; no runtime dependency | Slow for large archives and easy to forget when publishing new pages |
| CMS or template | Insert the page title, category and image into a reusable social-card template | Consistent metadata and automatic page coverage | Requires template logic and careful escaping of text |
| Hosted screenshot or image API | Render a URL or HTML template into an image on demand | Useful for many URLs, scheduled jobs and automated pipelines | Requires an API request, error handling and public source pages |
| ScreenshotNeo | Call its screenshot API for a rendered page or HTML/CSS composition | Clean shots, only clean shots billed, and the lowest paid plan | You still need to add the resulting image URL to your metadata |
Whichever method you choose, generate a distinct image for each important URL. A single logo reused on every page gives crawlers a valid image but gives people no visual clue about the destination.
Keep metadata correct in a CMS or framework
Render tags in the initial HTML
Social crawlers may not execute the client-side JavaScript that eventually inserts a head tag. Confirm that the production response already contains twitter:card, twitter:image and the Open Graph equivalents before JavaScript runs. Server-side templates, static-site generators and framework head components can all work if they emit the final values in the initial response.
Prevent duplicate or conflicting tags
SEO plugins, themes and custom templates can each emit card metadata. Keep one authoritative set. Two different twitter:image values or contradictory titles make debugging unpredictable, particularly when an old plugin value appears before the intended value.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Escape dynamic values
When titles or descriptions come from a database, HTML-escape attribute values. A quote in a headline must not terminate the content attribute and corrupt every following tag. Trim descriptions to a useful sentence and supply a fallback for pages without a custom social image.
Test a preview before announcing the URL
- Open the published page with an HTTP client or browser “view source” command and search the returned HTML for
twitter:card,twitter:image,og:imageand the page-specific title. - Open the image URL directly in a private browser window. Confirm it loads without signing in and that the address begins with
https://. - Check the image dimensions, file type and file size. Make sure the server returns an image rather than an HTML error page.
- Paste the page URL into X’s post composer to inspect the generated card. A reputable card-validator tool can provide additional diagnostics when available.
- Check another Open Graph consumer, such as a Slack or LinkedIn test share, because each service can crop and cache independently.
Why a thumbnail is missing or wrong
The tags are absent from the server response
Symptom: View source contains no Twitter or Open Graph tags, although the page looks correct in a browser. Fix: Move metadata generation to the server-rendered template or static build output. Do not rely solely on a client-side effect.
The card type is misspelled
Symptom: X shows a plain link or the wrong layout. Fix: Set twitter:card exactly to summary_large_image or summary. Check spelling, hyphens and underscores character by character.
The image URL cannot be fetched
Symptom: The title appears but the image is blank. Fix: Use an absolute HTTPS URL and test it without cookies. Remove login requirements, bot challenges, restrictive firewall rules and hotlink protection. Verify that redirects end at the actual image and that the response is not a 403, 404 or HTML error document.
A plugin is overriding your values
Symptom: The preview uses an old title or a different image than the one in your template. Fix: Inspect the complete head for duplicate tags, then disable or reconfigure the competing SEO or social plugin. Leave one consistent set of values.
The image is cached
Symptom: You fixed the page or replaced the image, but X still displays the previous card. Fix: Allow time for the platform’s cache to expire, then request a fresh inspection in the composer or validator. Publishing the revised asset at a changed image URL, sometimes by adding a version query parameter, can force a new fetch when your deployment permits it.
The crop removes the important content
Symptom: The image loads, but a face, logo or headline is cut off. Fix: Rework the composition inside a centered safe area, test both desktop and phone-sized previews, and use a square-safe variant when selecting summary.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. It can render a public page or an HTML/CSS composition into PNG, JPEG or WebP, so you can automate social-card assets instead of maintaining browser setup. Cookie and consent banners are accepted and removed before the shot, along with more than 60 known consent platforms, newsletter popups and chat widgets. Each step can be turned off.
Recommended Free Tools
Only clean shots are billed. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and each response reports the result with X-Page-Verdict and X-Billed headers. ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
The API accepts the viewport, full-page capture, element selectors, dark mode, retina scale, custom CSS and JavaScript, waits, request blocking, headers, cookies, user agents, timezone, geolocation, transparent backgrounds, resizing, caching, signed links, asynchronous webhooks and bulk capture. Those controls let a generator produce consistent cards from pages that do not look identical in a normal browser.
Here is a one-request example; see the ScreenshotNeo documentation for the complete option list:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/article -o social-card.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/article"}, timeout=90)
r.raise_for_status()
open("social-card.webp", "wb").write(r.content)Node.js:
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}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('social-card.webp', Buffer.from(await res.arrayBuffer()));ScreenshotNeo’s Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is available on every plan. Sign up free and then place the resulting public image URL in both twitter:image and og:image.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Operational considerations for automated cards
Performance
Generate images during publishing or in a background job rather than blocking the page request. Cache a completed image using a chosen time-to-live and store the final public URL in page data. For large batches, use a bulk workflow and record each URL’s success or failure so one inaccessible page does not stop the entire job.
Reliability
Keep a previously generated image as a fallback while a new render is running. Log the HTTP status, page verdict and billed status from your screenshot provider. A failed render should not publish metadata pointing to a missing file.
Security and privacy
Do not place private, tokenized or personally identifiable URLs in a public screenshot request. Treat custom headers and cookies as secrets, and ensure any generated image is safe to expose through an unauthenticated URL.
FAQ
Does the image have to be on the same domain as the page?
No. It needs to be an absolute, publicly fetchable HTTPS URL. A separate asset host is acceptable when it allows unauthenticated crawler access.
Free tools Windows power users keep installed
One-click scans. No signup required.
Can one image serve both X and Facebook?
Yes. Put the same image in twitter:image and og:image, but expect each platform to apply its own crop, cache and display treatment.
Best Value
Should I use a GIF for an animated preview?
You can provide a documented GIF format, but the guidance for animated GIFs says only the first frame is used, so design that first frame as the complete thumbnail.
Why does changing the page title not immediately change the card?
Link-preview services cache fetched metadata. Request a fresh inspection and, when necessary, publish a versioned image URL so the crawler sees a new resource.
Frequently Asked Questions
Can I omit Open Graph tags if I only care about X?
You can, but adding matching Open Graph tags gives other major link-preview consumers a usable fallback and keeps one page compatible across platforms.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Is 1200×630 an official guaranteed X requirement?
No. It is practical cross-platform guidance. Older documented limits exist, but current rendering and limits can change, so verify the published card.
What should image alt text contain?
Describe the important visual information concisely, such as the subject, chart or product shown. Do not use it as a keyword list.
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.
