Most of your homepage's first impressions don't happen on your homepage.

They happen when someone pastes your link into a group text, drops it in a Slack channel, or shares it on LinkedIn. Before anyone clicks, a little preview card appears: an image, a headline, a line of description. That card is doing the work your homepage thinks it's doing, and for a lot of small business sites it shows up as a blank gray box with the bare domain name underneath. No image. No headline. Nothing that says "this is worth opening."

You spent real money making the site look good. Then the most-shared version of it looks like a broken link.

Where the preview comes from

That card isn't magic and it isn't pulled from your design. It's built from a handful of invisible tags in the page's HTML, defined by a small spec called the Open Graph protocol. Four tags carry most of the weight: og:title, og:description, og:image, and og:url. When a platform sees your link, it reads those tags and assembles the preview. If the tags aren't there, it guesses, and its guesses are bad. It might grab your logo, the first random image on the page, or nothing at all.

The fix is not a redesign. It's making sure every page declares what it wants the preview to say and show. A page about your roofing service should preview with a headline about roofing and a photo of a finished roof, not your favicon floating in gray.

The one size that actually works

There is endless conflicting advice on image dimensions, most of it from sites trying to sell you a tool. The durable answer is simpler than the noise suggests. Use 1200 by 630 pixels, a 1.91:1 ratio. That's the size Meta recommends in its own sharing documentation, and it renders cleanly across Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp, and Telegram. X, which uses its own Cards markup with a summary_large_image type, will accept the same image and fall back acceptably. One image, one size, almost everywhere. You only need a different crop if X is your primary channel, in which case 1200 by 675 gets you a clean 16:9.

Keep your important text and your logo inside the center, roughly the middle 80% of the canvas, with comfortable padding on every side. Platforms crop edges differently and you don't want your headline guillotined on someone's phone.

Design for the worst-case screen, not the best one

Here's the part that trips up good designers. Most previews are seen small, in a feed or a message thread, after the platform has compressed your image to save bandwidth. The "beautiful" version with a thin elegant typeface, a 14-pixel tagline, and a tasteful low-contrast palette turns into an illegible smudge at thumbnail size.

So the rules for a preview image are almost the opposite of the rules for a hero banner. Big type. High contrast. One clear message, not three. A face or a product shot reads better than an abstract gradient. Test it by shrinking the image to the size of a postage stamp and asking whether you can still tell what it says. If you can't, neither can the person deciding whether to tap. This is the same principle behind what good UX actually means for your bottom line: the design that performs is the one built for how people actually encounter it, not how it looks zoomed in on your monitor.

The cache that keeps your mistake alive

One last trap, and it's the one that makes people think they fixed something when they didn't. LinkedIn and Facebook cache your preview the first time your link is shared. If your card was broken, then you fix the tags and re-share, the old broken card often comes back anyway because the platform is serving its saved copy.

You have to force a refresh. LinkedIn has a Post Inspector that re-scrapes the page and updates the cache. Meta provides a Sharing Debugger that does the same and shows you exactly which tags it read. Run your URL through both after any change. If you skip this step, you'll swear the fix didn't work while the rest of the world keeps seeing the gray box.

Why this is worth an afternoon

None of this is expensive to get right. It's a set of tags and one well-made image per template, set once and largely left alone. The reason it stays broken on so many sites is that nobody owns it. The designer assumes the developer handled it. The developer assumes the CMS did it automatically. It didn't, and the only people who notice are your potential customers, at the exact moment they're deciding whether you look legitimate.

Getting the preview right is part of the same discipline that keeps a site from looking like it was built in 2015: sweating the parts of the experience that happen off the page. It's the kind of detail we build into every site as a default rather than a someday, across both our design and web development work. Share your own link in a text message right now and look at what comes up. If it's a gray box, that's the first thing a lot of people see. Worth an afternoon.