tool · one of 51 Pro PNG and meta tags
Social card
What picture shows up when somebody shares this link?
A link shared without an og:image unfurls as a grey box with a title, and most pages never get one because making it means opening a design tool. This starts from the page you are on - its title and its host already on the card - so the first thing on screen is what a share of this page could look like, then gives you five layouts, eight palettes, four textures and a shuffle across all three. The title shrinks until it fits in three lines.
Reach it Press ⌘ + K on any tab and type social card. Ctrl + K on Windows and Linux
in the panel · this one is Pro
What this actually is
a 1200 by 630 link-preview image from the page's title, with its meta tagsBefore a launch post, a blog article or a docs page goes out, and whenever the SEO tab shows a page with no social image. The meta tags that point a share at the card come with it, so the image and the markup arrive together.
Asked about this tool
3 of themWhy 1200 by 630?
It is the size Facebook, LinkedIn, Slack and X all accept for a large preview, at the 1.91 to 1 shape they crop to. One image at that size unfurls properly everywhere.
Does it host the image for me?
No. You get the PNG and the meta tags that point at it; the image goes on your own site at the address the tags name. Nothing is uploaded from here.
Can I check how it will look before I ship it?
The SEO tab shows the preview card a page currently produces. Put the image and the tags live and the same reading shows the new one.
how to use social card
- Open Social card on the page you want a preview image for.
- Edit the title, subtitle and site - they start from this page's own.
- Choose a layout, a palette and a texture, or press Shuffle for all three.
- Save the 1200 by 630 PNG and copy the og and twitter meta tags.
96 of these · no host permissions · three free audits