A social preview is not a screenshot of your website. It is a little card assembled from metadata that another platform finds when it visits your page.
That distinction explains most of the confusion. You can have a beautiful homepage, a perfect hero section, and a brand-new logo, then share the URL and get a preview that looks like it came from a website you abandoned in 2019.
The platform is reading metadata, not admiring your homepage.
The most common system behind rich link previews is Open Graph. The protocol defines metadata such as a title, page type, image, and canonical URL. Platforms can use that information to build the card somebody sees before they click.
The important part is that the preview can have its own title, description, and image. Those values can match the normal page title and content, but they do not have to. That gives you control over how the page is represented when it travels outside your site.
Start with the handful of tags that actually matter.
The Open Graph protocol defines four basic properties: og:title, og:type, og:image, and og:url. It also recommends useful optional properties such as og:description and og:site_name.
<meta property="og:title" content="Emergency Plumbing in Aurora, IL | Smith Plumbing"> <meta property="og:description" content="24-hour plumbing help for leaks, backups, burst pipes, and urgent repairs."> <meta property="og:type" content="website"> <meta property="og:url" content="https://example.com/emergency-plumbing"> <meta property="og:image" content="https://example.com/images/plumbing-preview.jpg">
If you publish an og:image, Open Graph also supports structured image properties for width, height, MIME type, secure URL, and alt text. Supplying those details can make the image easier for other systems to interpret.
The image is where most previews go to die.
Missing images are often less mysterious than they look. The platform needs a public image URL it can fetch. If the URL is broken, blocked, redirected strangely, protected behind authentication, served with a bad response, or points to something the crawler cannot understand, the card may fall back to nothing useful.
Use an absolute HTTPS URL for the preview image. Make sure the image exists at that address without requiring a login or JavaScript to reveal it. A wide social image around 1200 by 630 pixels is a practical default because it works well for large preview cards on many platforms, but the platform still controls the final crop and display.
Also give the image enough breathing room. If your logo or text is pressed against the edge, a crop can turn a decent graphic into accidental abstract art.
You fixed the page. The old preview is still there. Welcome to caching.
Social platforms often cache the metadata they already fetched for a URL. That is useful for speed and terrible for your blood pressure when you just fixed the image and the old one refuses to die.
LinkedIn officially provides Post Inspector for this exact situation. Paste the URL into the tool, let LinkedIn fetch the page again, and confirm what it sees. LinkedIn notes that refreshing a URL affects new shares, not previews already attached to older posts.
That last part matters. If an old post still looks wrong after you fix the metadata, the page may be correct now. The old post can simply be old.
There is no universal preview police.
Open Graph gives platforms a common vocabulary, not a contract forcing every platform to render the exact same card. LinkedIn, Facebook, messaging apps, chat tools, and other services can make their own decisions about layout, cropping, description length, caching, and whether they honor every tag.
That means a preview can look good on LinkedIn and slightly different in a text message without anything being broken. Test the places where your customers actually see the link instead of chasing pixel-perfect sameness across the entire internet.
Debug the preview in this order so you do not waste an afternoon.
Confirm that the Open Graph tags are actually present in the HTML response and contain the values you intended.
If you cannot load the preview image normally from its public URL, do not expect a crawler to perform a miracle.
Make sure og:url represents the page you mean to share, especially if redirects or duplicate URLs are involved.
For LinkedIn, use Post Inspector to see what metadata it extracted and to refresh a stale preview.
Do not judge the fix only by an existing post that may still preserve the old preview.
If the metadata is correct and the image URL works but a platform still renders something strange, you have narrowed the problem down substantially. That is far better than randomly changing your homepage because a chat app showed a gray square.
Run the URL through the SEO Health Checker.
The Template Forge SEO Health Checker inspects social preview metadata alongside page titles, technical signals, performance, internal links, and other homepage basics so you can see whether the page is missing the ingredients before you start blaming the platform.
Run the free SEO checkSources worth keeping open
- The Open Graph protocol
- LinkedIn Post Inspector
- LinkedIn Help: refresh a URL preview with Post Inspector
The preview is part of the website whether it lives on the website or not.
That little card may be the first version of your business somebody sees. Give it a real title, a useful description, an image that can actually load, and enough metadata that the platform does not have to improvise.
If your website is dressed for the meeting, stop sending its link out wearing sweatpants.