Social share cards: Open Graph tags and images that fit
When someone pastes your link into Facebook, LinkedIn, X, Slack, or a text message, the preview that appears is built from a few tags in your page's head. Those tags decide the headline, the summary, and the picture. When they're missing, the platform guesses, and it guesses badly. When they're present but the image is the wrong shape, the platform crops it, and the crop usually cuts off the part that mattered.
The tags that build the preview
The Open Graph protocol, which Facebook introduced and almost every platform now reads, asks for four properties on every page:
og:title: the headline as it should appear in the preview.og:type: what the page is, usuallywebsiteorarticle.og:image: the full address of the preview image.og:url: the page's canonical address, which the platform treats as its permanent ID.
Add og:description and og:site_name as well. Then describe the image with three structured properties: og:image:width and og:image:height in pixels, and og:image:alt, which the protocol defines as a description of what is in the image, not a caption.
X reads its own set of tags. The one that matters most is twitter:card: summary shows a small square thumbnail beside the text, and summary_large_image shows a wide image above it. I add twitter:title, twitter:description, twitter:image, and twitter:image:alt too, so nothing depends on how a platform falls back.
Why 1,200 by 630
Meta's documentation asks for images at least 1,200 by 630 pixels for the best display on high-resolution screens, and says to keep them as close to a 1.91 to 1 ratio as you can so the whole image shows in the feed without cropping. Images smaller than 600 by 315 get shown small. Files must stay under 8 MB. LinkedIn and X lay out their large previews as wide rectangles too, so one image at 1,200 by 630 serves all of them.
Declaring the width and height matters more than it looks. Meta says those two tags let its crawler render the image immediately. Without them, the first person to share a new page can get a preview with no picture while the platform downloads and measures the file.
The square artwork trap
Square images are everywhere: podcast covers, product photos, logos, album art. Put a square image in a large card, and every platform crops it to a wide strip from the middle. The top and bottom are gone, and on cover art that's usually where the title is.
I found exactly this on a podcast site I built. Every page had complete Open Graph and X tags, and every image existed at the declared size, so a tag audit passed. But 458 episode pages pointed at square cover art inside large cards, so every shared episode lost the top and bottom of its cover. More than two hundred episodes shared the same default cover, so their previews were also identical. The fix was a generated card for each episode, 1,200 by 630, with the cover art on one side and the episode title in large type on the other. The build makes the card once, reuses it on every later build, and makes a new one when an episode is renamed.
If you can't generate cards, switch square images to the summary card on X, which shows a square thumbnail uncropped, and accept a smaller preview elsewhere.
Making the image work as a preview
- Put the page's own title in the image when pages share artwork, so each preview is distinct.
- Keep important content near the center. Some apps trim the edges or round the corners.
- Use large type. Most previews are seen on phones, at a fraction of full size.
- Use JPEG for photos and artwork and keep files in the low hundreds of kilobytes.
- Write alt text that describes the image, since some apps read it aloud.
Checking your pages
View the source of a page and confirm every tag is present, every image address is absolute and loads, and every declared size matches the real file. On a large site, crawl it with Screaming Frog and extract the og:image value from each page, then check the images in bulk; the method is in my guide to custom extraction. Group the results by image. A single image behind hundreds of pages is a sign your previews all look the same.
Refreshing previews that are already out there
Platforms cache what they fetch. Meta notes that changing the image for a URL doesn't update the preview on old shares. After fixing a page, paste its address into Meta's Sharing Debugger and ask it to scrape again, and do the same in LinkedIn's Post Inspector. Other platforms refresh on their own schedule.
Where this fits
Share cards don't move rankings directly. They decide whether a shared link gets clicked, and clicks bring the visits, links, and mentions that do matter. I check them in every audit and build them into every site I make; see static websites built for search and podcast website SEO.