Link Preview Images: The Right Size, and How to Make Them Look Like Your Brand

A link preview image should be 1200 x 630 pixels, a 1.91:1 shape. You set it with the og:image tag in your page's HTML, or in the "social image" field most website builders provide. Keep the important parts in the middle, because some apps trim the edges, and put your brand on it so the preview looks like you rather than a random photo.

Link previews are the images that appear when someone shares your page on LinkedIn, X, Facebook, Slack or a messaging app. They're easy to forget and they're everywhere your links travel, which makes them one of the most-seen branded images a small business has.

What is a link preview image?

When you paste a link into a post or a chat, the app visits the page and looks for a few tags in its HTML. These come from a standard called Open Graph, and the important ones are:

• og:title: the headline shown in the preview
• og:description: the line of text underneath, where the app shows one
• og:image: the picture

If og:image is missing, the app either shows no image or grabs whatever it finds on the page, which is often a logo cropped oddly or a photo that has nothing to do with the link.

What size should a link preview image be?

Meta's own documentation recommends images of at least 1200 x 630 for the best display on high-resolution screens, and a shape as close to 1.91:1 as possible so the whole image shows in the feed without cropping. LinkedIn shows previews in a similar wide shape.

X, and some chat apps, crop a little differently, so a 1200 x 630 image may lose a sliver at the top and bottom or appear as a small thumbnail. You don't need a separate image for each. One 1200 x 630 image with a comfortable margin around the text works everywhere.

How do you add a link preview image to your site?

If you use a website builder, look for a setting called "social image", "Open Graph image" or "share image" in each page's SEO settings. Webflow, Framer, Squarespace and WordPress SEO plugins such as Yoast all have one.

If you write your own HTML, add these tags inside <head>:

<meta property="og:title" content="Your page title" />
<meta property="og:description" content="One line about the page." />
<meta property="og:image" content="https://example.com/images/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

Two details that save trouble:

• Use a full URL for the image, starting with https://, not a relative path.
• Include the width and height tags. Meta says these let its crawler render the image right away instead of downloading it first, which helps the very first share show an image.

What should go on a link preview image?

Think of it as a small poster for the page:

• The page's title or main idea, in large type. The preview is often shown small, so fewer, bigger words win.
• Your logo or name, in the same place you put it on your other images.
• Your brand colours and fonts, so a preview in someone's feed is recognisably yours.
• Nothing important near the edges.

You don't need a unique design for every page. Most sites need three or four templates at most: one for the home page, one for blog posts or articles, one for product or service pages, and perhaps one for events or announcements. Each template gets the page's own title, and the design stays fixed.

If you haven't settled your colours, fonts and layouts yet, the guide on keeping your brand consistent on every image covers that first step.

Why is my old preview image still showing?

Because the apps cache it. The first time a link is shared, the app stores the title and image it found, and shows the stored version on later shares, sometimes for a long time.

After you change your preview image, ask each app to fetch the page again:

• Facebook and Instagram: paste the URL into Meta's Sharing Debugger and choose to scrape again.
• LinkedIn: paste the URL into LinkedIn's Post Inspector. Inspecting a URL refreshes LinkedIn's copy.
• Everywhere else: there's often no refresh tool. Giving the image a new file name forces apps to fetch the new image, because they cache by the image's address.

How do you make link preview images without designing each one?

Make one template per page type, with your brand already applied, and only ever change the words. It's the same principle as every other branded image: decide the design once, then fill it in.

Hoverfly is a tool for branding images: pick a ready-made template and it comes out in your colours, fonts and logo, ready to use. For link previews that's the Link card template. Its link preview format exports at 2400 x 1260, the same 1.91:1 shape at double resolution so it stays sharp on high-resolution screens, and a page's preview is just its title typed into a row. The cover of every article on this blog, including this one, was made that way.

If you're already making social posts in Hoverfly, your link previews come from the same saved brand, which keeps your shared links looking like the rest of what you publish.

When is Hoverfly not the right fit for this?

If your site already generates preview images automatically (many blogging platforms and frameworks can build one from the page title), and you're happy with how they look, keep that. It scales without any work. A tool like Hoverfly is worth it when those automatic images look generic and you want them to match the rest of your brand.

Frequently asked questions

What is the best og:image size? 1200 x 630 pixels. It's the size Meta recommends for sharp display on high-resolution screens, and its 1.91:1 shape suits LinkedIn and most other apps.

Is 1200 x 627 different from 1200 x 630? Only by three pixels of height. Both are close to 1.91:1, and either will display well. Pick one and use it everywhere.

Why is there no image when I share my link? Usually the og:image tag is missing, uses a relative path instead of a full URL, or points to an image that is too small. Check the page with Meta's Sharing Debugger or LinkedIn's Post Inspector, which show what the app actually found.

Do I need a separate image for X? No. X reads Open Graph tags when its own tags are missing. Add twitter:card set to summary_large_image so X shows the large version, and keep text away from the top and bottom edges.

Should every page have its own preview image? Every important page should have a preview with its own title on it. That doesn't mean a new design each time: one template per page type is enough.

Sources

• Meta for Developers: Images in link shares
• Meta for Developers: Sharing Debugger
• LinkedIn: Post Inspector
• The Open Graph protocol: ogp.me