Social Card Images: Sizes, Open Graph Metadata, and Debugging
Create social card images that render reliably: Open Graph tags, dimensions, crawler access, previews, troubleshooting, and automation.
A social card is the preview generated when someone shares a URL. It normally combines the page title, a short description, an image, and the site domain. To create one, publish a representative image at a public URL and add Open Graph metadata to the page that is being shared.
What to add to a page
The Open Graph protocol defines four basic properties: og:title, og:type, og:image, and og:url. The protocol also supports structured image properties such as MIME type, width, height, and og:image:alt. The official specification is at ogp.me.
<head>
<meta property="og:title" content="Social Card Images">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guides/social-card-images">
<meta property="og:image" content="https://example.com/images/social-card-images.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A browser page becoming a social link preview">
<meta name="description" content="A practical guide to social card images and metadata.">
</head>Use an absolute HTTPS image URL that a crawler can fetch without authentication, cookies, a user-agent challenge, or a referrer requirement. The canonical URL in og:url should identify the page represented by the card. The image alt value should describe what is visible in the image; it is not a caption.
Choose an image size and format
| Situation | Practical choice | Constraint to check |
|---|---|---|
| Cross-platform starting point | 1200 × 630 pixels (about 1.91:1) | Verify every destination’s current rules |
| LinkedIn organic link sharing | At least 1200 × 627 pixels; 1.91:1 recommended | Maximum 5 MB |
| Photographic artwork | JPEG | Compress while preserving readable details |
| Transparency required | PNG | Some platforms display transparency differently |
LinkedIn states that images narrower than 401 pixels are displayed as thumbnails. It also says a valid-sized image can still be omitted when LinkedIn cannot fetch it or when it is stored in a protected location. Treat platform documentation as authoritative; the 1200 × 630 recommendation is a practical cross-platform baseline, not a universal requirement.
Design the artwork for cropping
- Keep the subject and any essential detail near the center safe area.
- Use strong contrast so the image remains legible at thumbnail size.
- Represent the specific page rather than reusing a generic site banner.
- Keep text short and large; do not place critical information at the extreme edges.
- Export a final file within the destination’s size limit.
Make variants when a platform’s crop differs materially. Compare the source image, the rendered preview, and the crop at small size before publishing.
Generate a card page yourself
A reliable workflow is to create a deterministic HTML card, render it at 1200 × 630, and store the resulting image at a public URL.
1. Create the card markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body { margin: 0; width: 1200px; height: 630px; }
body { font-family: system-ui, sans-serif; background: #101827; color: white; padding: 72px; box-sizing: border-box; }
h1 { font-size: 72px; line-height: 1.05; max-width: 1000px; margin: 0 0 24px; }
p { font-size: 30px; color: #cbd5e1; }
</style>
</head>
<body>
<h1>Social Card Images</h1>
<p>Open Graph metadata, dimensions, and debugging</p>
</body>
</html>2. Render it with Playwright
npm install playwright
npx playwright install chromium// render-card.mjs
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1200, height: 630 }, deviceScaleFactor: 1 });
await page.goto('file:///absolute/path/card.html', { waitUntil: 'networkidle' });
await page.screenshot({ path: 'social-card.jpg', type: 'jpeg', quality: 88 });
await browser.close();Upload the generated file to a public, stable HTTPS URL, then put that URL in og:image. If the card uses web fonts or remote assets, wait for those assets to load before the screenshot and avoid expiring URLs.
Validate what crawlers receive
- Request the page as delivered over HTTPS and inspect the raw HTML, not only a client-side DOM inspector.
- Confirm one intended value for each of
og:title,og:type,og:image, andog:url. - Open the image URL in a private browser window and with a command-line request.
- Check dimensions, MIME type, response status, redirects, and file size.
- Use a social preview tool after publishing. SocialCard provides multi-platform and platform-specific preview tools, and OpenGraph.dev provides preview and meta-tag generation features. A preview tool cannot guarantee that every crawler will fetch a URL.
curl -I https://example.com/images/social-card-images.jpg
curl -L https://example.com/guides/social-card-images | grep -i 'og:'Common failures and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| No image appears | The crawler is blocked, the URL is private, or the response fails | Allow unauthenticated HTTPS fetches and return a 200 response with an image MIME type |
| Old image remains | The platform cached an earlier response | Change the image URL when replacing the asset and re-run the platform’s preview/debug flow |
| Wrong page title or image | Duplicate tags, a template override, or client-only metadata | Inspect delivered source HTML and emit one canonical set of tags server-side |
| Image is cropped badly | Important content sits outside the platform’s crop | Move the subject into a safe area and test the rendered preview |
| Image becomes a thumbnail | Width is below LinkedIn’s 401-pixel threshold | Publish at least 1200 × 627 for LinkedIn organic sharing |
| Preview is blank | Unsupported format, broken redirect, or a protected resource | Use a directly fetchable JPEG or PNG and verify headers with curl -I |
Performance, reliability, and cost
- Generate cards during a build or publish step so sharing never waits for a browser render.
- Serve images from a cacheable URL with a long-lived immutable filename. Change the filename when the artwork changes.
- Keep the file below platform limits; smaller files reduce crawler transfer time.
- Use a fallback image when a page has no custom artwork.
- Monitor image URLs after CDN, domain, or access-control changes.
The research does not establish a universal cache duration or exact requirements for every network. Re-check each platform’s current documentation before relying on a dimension or file-size value.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. One GET request captures a URL as PNG, JPEG, WebP, or PDF, so you can generate a social-card source from a rendered page without maintaining Playwright or Chromium. See the ScreenshotNeo API documentation for all options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/guides/social-card-images -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/guides/social-card-images"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/guides/social-card-images' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
require('node:fs').writeFileSync('shot.webp', Buffer.from(await res.arrayBuffer()));Before capture, ScreenshotNeo can accept cookie and consent banners and remove 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 response headers identify the page verdict and billing result. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.
Start with 1,000 free screenshots a month—no card required.
FAQ
What is the correct Open Graph image size?
Use 1200 × 630 as a practical starting point, then apply each platform’s current requirements. LinkedIn’s organic sharing guidance specifies at least 1200 × 627 pixels and a 5 MB maximum.
Should every page have a different image?
Prefer an image that represents the individual page. A shared fallback is useful for pages without custom artwork.
Does og:image:alt change the visible card?
No. It describes the image for accessibility and metadata consumers; it is separate from the visual artwork.
Why does a valid image still not appear?
The platform may be unable to fetch it because of blocking, authentication, robots or network policy, a failed redirect, or a cached earlier result.
Are X image requirements covered here?
The inspected X documentation redirected to a general documentation page, so exact current X dimensions and limits are not verified in this guide. Check X’s current documentation before publishing a dedicated variant.
