Social previews that look right on LinkedIn, Facebook and X

Someone shares your new service page on LinkedIn and the preview shows last year's headline, a stretched logo or no image at all. Link previews are built from a handful of tags in the page's HTML, and each platform keeps its own copy of what it found. Set the tags properly once, then learn how to make each platform look again.

Which tags control a link preview?

Four Open Graph tags do most of the work: og:title, og:description, og:image and og:url. LinkedIn's help lists exactly these four as the tags that must exist. The Open Graph protocol also requires og:type, and Facebook treats a page without one as website. We add the image's width, height and alt text as well, plus one tag for X:

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/services/bookkeeping/">
<meta property="og:title" content="Monthly bookkeeping for growing firms">
<meta property="og:description" content="Books closed every month by one accountant who knows your business.">
<meta property="og:image" content="https://example.com/og/bookkeeping-v2.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Monthly bookkeeping report open on a laptop">
<meta name="twitter:card" content="summary_large_image">

Open Graph tags use the property attribute, while the X tag uses name. All of them belong in the <head> of the page.

What should each tag say?

Each tag should describe this page specifically, in plain words a person would click on:

• og:title: the page's own title. Facebook asks for it without branding such as your site name.
• og:description: one or two sentences that give a reason to click, which is how the Open Graph protocol describes it.
• og:url: the clean canonical address, without tracking parameters or session values. Facebook gathers likes and shares at this URL.
• og:image: an image made for sharing, at a full https address, not whatever happens to load first on the page.
• og:image:alt: a short description of what is in the image, which the protocol is careful to say is not a caption.

On Webflow sites these live in each page's settings and apply only to that page. Webflow warns that without them, random content or nothing at all can appear when a page is shared. On CMS templates, bind the title, description and image to Collection fields so every article and case study gets its own preview.

What size should the share image be?

We export share images at 1200 by 630 pixels, as JPG for photos or PNG for flat graphics. That meets LinkedIn's minimum of 1200 by 627 pixels and is close to its recommended 1.91:1 ratio; keep the file under its 5 MB limit. It is also wider than the 1080 pixels Facebook recommends for sharp display on high resolution screens.

Set og:image:width and og:image:height to match. Facebook says the dimensions help the image load properly the first time a page is shared, because its crawler can render the image without downloading and processing it first.

Do you need separate tags for X?

Mostly not. X is among the networks that read Open Graph data, so your title, description and image carry over. The one X tag we add is twitter:card set to summary_large_image, as in the example above. To check the result, paste the link into a new post on X without publishing it: Webflow's help notes that X's Card Validator no longer shows a preview.

Why does the old preview still appear after a fix?

Because each platform caches what it scraped and won't always fetch the page again straight away. Facebook describes a standard 24 hour update period, and it caches images by URL, so a replaced image won't update unless its address changes. When you change a share image, give the file a new name, as with bookkeeping-v2.jpg above. Then ask each platform to look again:

1. Facebook: paste the URL into Meta's Sharing Debugger and choose Scrape Again. You need to be logged in to Facebook.
2. LinkedIn: paste it into Post Inspector, which shows when LinkedIn last updated its data on the page and lets you request a re-scrape.
3. X: paste it into a draft post to see the current card.

What breaks previews most often?

Most broken previews come down to one of four problems:

• Tags added by JavaScript after the page loads. The Next.js docs describe Facebook's crawler as a bot that can't execute JavaScript, so the tags need to be in the HTML your server sends.
• Tags buried in a heavy page. Meta's crawler needs Open Graph properties to appear within the first 1 MB of the page, or they are cut off.
• Images the platform can't fetch. LinkedIn says that if an image meets its requirements but still doesn't appear, the site may be blocking it or the image may sit in a protected directory. Check this before launch if the site was built behind a password.
• One generic image on every page, so every share looks the same and none says what the page is about.

Where to start

Run your home page, your main service page and your latest article through Post Inspector and the Sharing Debugger, and note what is missing or wrong. Fix the template rather than each page, then refresh both tools. Our SEO and AI search service covers these tags with the rest of technical SEO, or start with a website review.