Smartphone showing a message thread with a website link preview card

What Your Website Looks Like When Someone Shares It: Link Previews and Share Images

The card that appears when someone pastes your URL into a text message or a LinkedIn post is built from tags in your page's HTML, not from anything the person sharing it does. Here is what controls it, and how to fix it when it is wrong.

Share this with the world

A link preview is the small card — image, headline, one line of description — that appears when someone pastes your website address into a text message, a Slack channel, a LinkedIn post, or an email. The card is built from tags in your page’s HTML. The person sharing the link has no control over it. You do.

Which means that when a board member forwards your campaign page to forty people, most of them are seeing an image you chose a year ago and forgot about. Or a gray box with no picture at all, which is what an empty preview looks like in a group text.

Where the preview actually comes from

Nearly every app that renders a link — Facebook, LinkedIn, iMessage, WhatsApp, Slack, Signal, most email clients — reads the same set of tags, called Open Graph. The protocol was published by Facebook and then quietly became the standard everyone else adopted.

Four properties are required: a title, a type, a canonical URL, and an image. The spec also defines an optional alt attribute for the image, described as “a description of what is in the image (not a caption),” and recommends including it any time you specify an image. Almost nobody does.

When those tags are missing, the app guesses. It grabs the page title, maybe the meta description, and whatever image it finds first in the markup. That is how a site ends up sharing its own sidebar logo, a decorative background texture, or a one-pixel tracking image.

WordPress does not do this for you

This surprises people. WordPress core outputs no Open Graph tags at all, and your featured image does not automatically become your share image. The connection is made by an SEO plugin — Yoast, Rank Math, and All in One SEO all add the tags, and all of them let you set a specific social image per page.

Each of those plugins also falls back in a chain: the page’s own social image, then its featured image, then a site-wide default you set once in the plugin settings. That site-wide default does more work than anything else on this list, because it is what appears for every page nobody has thought about. Go set it today if nothing else.

What size should a social share image be?

1200 by 630 pixels, a 1.91:1 ratio. That number is not actually in the Open Graph spec — the spec asks for an image URL and says nothing about dimensions — but it is the shape every major platform crops toward, and Facebook’s own guidance lists it as recommended with 600 by 315 as the minimum. Go below roughly 200 pixels wide and many apps drop to a small square thumbnail next to the text instead of the full-width card.

Keep the file reasonably small, ideally under a few hundred kilobytes. Use JPEG for photographs and PNG for flat graphics with type in them, where JPEG compression makes letterforms look muddy.

Design it to survive being small

A share card renders around 500 pixels wide on a desktop feed and considerably smaller in a message thread. Whatever you put in it is going to be looked at for about half a second, at roughly the size of a business card.

  • Headline-sized type only. Four to six words. Body copy at this scale is a texture, not a sentence.
  • Stay away from the edges. Platforms crop to different ratios depending on where the card appears, and square crops are common on mobile. Anything near a corner is optional content.
  • Make the image mean something on its own. In October 2023, X stripped headline text out of link cards entirely, leaving the image and the domain name. The layout has shifted again since, and it varies by platform, which is the point: do not assume your headline will be sitting next to the picture.
  • Logo small, in a corner. It is a signature, not the subject.
  • Do not reuse a tall photo. A vertical image cropped to 1.91:1 usually becomes somebody’s midsection.

Which pages deserve their own image

Not all of them. The honest list is short: the homepage, each service page, and any page with real stakes behind it — a campaign, an event, a job posting, the page you paste into proposals and email signatures.

That last category matters more than it looks. When I built the website for The ROCk, the new homelessness-response campus from Interfaith Community Services here in Santa Fe, the site’s entire job before the buildings exist is to be introduced to neighbors, donors, and reporters — which happens almost entirely by somebody sending somebody else a link. For a site like that, the preview card is the first impression far more often than the homepage itself is.

Why a link preview shows the wrong thing

Usually because it is cached. Platforms scrape a URL once and hold onto what they found, so a fix you made this morning can keep showing last year’s image for days. Two free tools clear it:

  • Facebook Sharing Debugger. Paste the URL, click Debug, then Scrape Again. It re-fetches the page and replaces the cached card. It also lists every tag it found, which makes it a decent diagnostic even if you never post on Facebook.
  • LinkedIn Post Inspector. Paste the URL and click Inspect. You need to be signed in to a LinkedIn account, but a personal one is fine.

If the preview is still wrong after that, the problem is on your end. Check that the image URL is absolute and served over HTTPS, that the page is publicly reachable (not a staging site, not sitting behind a coming-soon plugin), and that a caching or security layer is not blocking the scraper that fetches it.

A ten-minute audit

You do not need a developer to find out where you stand.

  1. Paste your homepage URL into the Facebook Sharing Debugger and read what comes back.
  2. Do the same in LinkedIn’s Post Inspector.
  3. Text the link to yourself and look at it on a phone.
  4. Repeat for your three most-shared pages.
  5. Fix the site-wide default image first. It covers the most ground for the least work.

Most of what you find will be fixable in an afternoon. The image is already designed, in a sense — you have a logo, brand colors, and photography. It just has to be assembled at the right size and pointed at by the right tag.

If the audit turns up a gray box where your homepage should be, or you would rather hand the whole thing to somebody, Patrick Iverson builds custom WordPress websites from Santa Fe and has run an independent practice here since 2001. Send me the link you share most often and I will tell you what it looks like on the other end.

Share this with the world
Patrick Iverson

Patrick Iverson

Brand strategist and custom WordPress developer, born and raised in Santa Fe. I've run an independent practice here since 2001, working with founders, marketing leads, and creative directors on rebrands, brand strategy, and websites built to last. I write here about the parts of that work clients rarely get to see.

Patrick's design sense opened up new possibilities for our website. His keen sense of matching client needs and skills to the available tools produced a site that we love working with. And his relaxed and responsive personal style made the whole project a pleasant experience.

Cecile LaBore, Recovery Systems Institute