How to Make a Link Preview (Open Graph) Image with Claude Design: Size, Meta Tags and Testing

A link preview image (an Open Graph image, set with the og:image tag) is the picture Facebook, LinkedIn, X, Slack, WhatsApp, iMessage and Discord show when someone shares a link to your page. Make it 1200x630 px (1.91:1) in Claude Design with the title large and in the middle, export it, save it as a JPG under about 300 KB so WhatsApp shows it too, and set it as the page's social image. Then test the link, because every app caches what it saw the first time.

What size should a link preview image be?

1200x630 is the size to design at. It meets Facebook's "at least 1200x630" and is within three pixels of LinkedIn's 1200x627, both 1.91:1. X's large card is 2:1, slightly flatter, so a 1200x630 image may lose about 15 px at the top and bottom there; guides confirm 1200x630 works on X. The chat apps publish nothing, and WhatsApp's unofficial ceiling is the tightest limit of all.

Facebook, LinkedIn and X figures come from their own documentation; the rest are what testers and tool makers report, so treat them as guidance. The size guide lists the post sizes for the same platforms.

How do the apps show your image differently?

The same file is treated differently in each place, which is why the design rules for link previews are stricter than for a normal post:

• Facebook and LinkedIn show it full width with the page title underneath, in their own text.
• X shows the image as the card and lays a short headline label over it. X has changed this layout several times since 2023, so keep the edges free of essential text.
• Slack shows a smaller version (guides put it at about 360x200), so small text becomes unreadable.
• WhatsApp and iMessage show it inside the chat bubble. WhatsApp may skip the image entirely if the file is too large, and, by most accounts, iMessage sometimes shows the site's icon instead.
• Discord shows a large image when the twitter:card tag asks for one, and a smaller one otherwise, according to most reports.

The safe design is the same everywhere: one big title, strong contrast, nothing important within about 65 to 100 px of any edge, and no small print.

What prompt makes a good link preview image?

This prompt bakes in the safe area, a title size that survives Slack's small preview, and a flat style that keeps the file small enough for WhatsApp. Replace the bracketed parts. For a blog, ask for one artboard per post in the same prompt, with the same layout and only the title changing.

Design a 1200x630 link preview image (Open Graph image) for this page: [page or article title].

Copy, exactly this and nothing more:
- The title, as the hero, at most two lines: [title, under 60 characters]
- Small line: [yoursite.com or brand name]
- Optional small eyebrow above the title: [GUIDE / CASE STUDY / NEW]

Layout:
- Keep all text inside the central 1000x500 area (100px clear left and right, 65px clear top and bottom). Apps crop and overlay the edges differently.
- Title at least 64px, so it still reads when Slack or a chat app shows the preview small.
- One visual element at most (our logo, a simple shape or one product image), to one side of the title.

Style: [brand colours], [font], flat background, strong contrast. No fine gradients or photographic backgrounds: they make the file large, and WhatsApp may drop images over about 300 KB.

Leave out: screenshots with small text, faces near the edges, borders, and any text I have not given you.

More prompts built the same way are in 12 Claude Design prompts for social posts.

Which meta tags does the image need?

The image does nothing until your page points to it. Most website builders and SEO plugins have a "social image" or "share image" field that writes these tags for you; use it if you have one. If you edit the HTML yourself, these go in the page's head:

<meta property="og:title" content="Your page title">
<meta property="og:description" content="One or two sentences about the page.">
<meta property="og:url" content="https://yoursite.com/page">
<meta property="og:type" content="website">
<meta property="og:image" content="https://yoursite.com/images/page-share-v1.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="What the image shows, in words">
<meta name="twitter:card" content="summary_large_image">

og:title, og:type, og:image and og:url are the four the Open Graph protocol requires. LinkedIn also requires og:description, Facebook asks for it and for the width and height, and twitter:card is what gets you the large card on X (for the title, description and image, X uses twitter: tags if you add them and falls back to the og: ones). The image address must be a full https URL anyone can open: LinkedIn fails on blocked or protected images, and Slack reportedly does not follow image redirects.

How do you export it at the right file size?

Export the artboard from Claude Design as a PNG, from its menu on the canvas or with Share > Export > PNG (image) in a Claude conversation. Anthropic does not document the exact pixel output, so check the file: 1200x630 is the target, and a larger file at the same shape is fine for Facebook, LinkedIn and X but heavy for WhatsApp. To get under about 300 KB, open the PNG in Squoosh (free, in the browser), resize to 1200 wide if needed, choose MozJPEG and lower the quality until the size readout is under 300 KB. Put a version in the file name (page-share-v1.jpg) so you can change the URL when you update it.

If the image starts life as an HTML file, a client's export or a page made in another AI tool, Renda's link preview preset renders it at exactly 1200x630 with stray editor elements removed. It outputs PNG only, so the Squoosh step still applies for WhatsApp. If you only have HTML and want free routes, see how to turn HTML into a PNG without code.

How do you test a link preview before sharing it?

Caching is the usual reason a new image does not appear. Facebook caches images by URL, so give an updated image a new file name, then re-scrape in the Sharing Debugger. Slack caches previews for about 30 minutes and WhatsApp caches too; while testing, add something like ?v=2 to the page link so the app treats it as a new URL.

Frequently asked questions