Link Previews on Social Media: Open Graph Tags

How a link preview is made

When a link is shared, the platform sends its own crawler to fetch the page and read its metadata. Meta's web crawlers page says its crawler, which identifies itself as facebookexternalhit, fetches content shared on Facebook, Instagram or Messenger and shows the site's title, description and thumbnail image.

If the page has no instructions, the platform improvises. Meta's sharing guide for webmasters says that without Open Graph tags its crawler uses internal heuristics to make a best guess at the title, description and preview image.

The Open Graph tags

The Open Graph protocol was created at Facebook and is also read by LinkedIn, X and others. It is a set of <meta> tags in the page's <head>. The protocol names four required properties for every page:

• og:title: the title as it should appear in the preview.
• og:type: the kind of object, such as website or article.
• og:image: the URL of an image that represents the page.
• og:url: the canonical URL, used as the page's permanent ID.

Useful optional properties include og:description (the protocol suggests one to two sentences), og:site_name and og:locale. Images have their own extra properties: og:image:width and og:image:height for the size in pixels and og:image:alt, a description of what is in the image. The protocol says that if a page specifies og:image, it should specify og:image:alt too.

A basic set for a service page looks like this:

<meta property="og:type" content="website">
<meta property="og:url" content="https://www.example.com/services/garden-design/">
<meta property="og:title" content="Garden Design and Planting">
<meta property="og:description" content="Planting plans and garden layouts for homes and offices.">
<meta property="og:image" content="https://www.example.com/img/garden-share.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A new planted border beside a stone path">

Use full https:// URLs for the page and the image.

What each platform reads

• Facebook and other Meta apps. Meta lists og:url, og:title, og:description and og:image as the basic tags, plus og:type and og:locale. It adds that og:url should be the canonical URL without session variables, user-identifying parameters or counters, because likes and shares are gathered under that URL, and that og:title should be the title without branding such as the site name.
• LinkedIn. LinkedIn's help page on making your website shareable lists og:title, og:image, og:description and og:url as the tags that must exist.
• X. X uses its own twitter: tags but falls back to Open Graph. Its cards markup reference, which is no longer on X's current documentation site (archived copy, January 2026), says twitter:title, twitter:description, twitter:image and twitter:image:alt fall back to their og: equivalents. If og:type, og:title and og:description exist but twitter:card is absent, a small summary card may be shown. To get a large image card, add <meta name="twitter:card" content="summary_large_image">.

So one good set of Open Graph tags, plus a twitter:card tag, covers the main platforms.

Preview images

The image does most of the work in a preview, and each platform states its own requirements:

• LinkedIn: maximum file size 5 MB, minimum 1200 × 627 pixels, recommended ratio 1.91:1. LinkedIn notes that images less than 401 pixels wide are shown as a small thumbnail.
• Meta: its sharing best practices recommend images at least 1080 pixels wide for the best display on high-resolution screens, and adding og:image:width and og:image:height so the crawler can render the image immediately instead of downloading and processing it first.
• X: X's summary card with large image page (archived copy) says the image should be 2:1, at least 300 × 157 and at most 4096 × 4096 pixels, under 5 MB, in JPG, PNG, WEBP or GIF. SVG is not supported, and only the first frame of an animated GIF is used.

The stated ratios differ slightly, from 1.91:1 to 2:1, so a landscape image of at least 1200 × 627 pixels meets all three platforms' stated minimums. Because the ratios differ, keep important text and faces away from the edges. X also advises against generic images such as a site logo that spans many pages; a page-specific image tells people what the link is about. Compress the file like any other image; our image optimisation guide covers formats and compression.

Letting the crawlers in

The most common reason a preview fails is that the crawler cannot read the page or the image. The platforms list the usual causes:

• Blocked crawlers. X's card troubleshooting guide (archived copy) names a robots.txt that blocks its crawler, deny rules in an Apache .htaccess file, and web hosts that block crawlers by IP address. Security plugins and firewalls can too. Our website security guide covers those tools.
• Images that are not public. X says the most common cause of a missing image is that it cannot be reached on the public internet, which often happens on staging or internal sites. LinkedIn likewise says an image in a protected directory may not appear.
• Slow or heavy pages. Meta says its crawler needs the content within a few seconds, and that Open Graph tags must appear within the first 1 MB of the page or they will be cut off. Put the tags near the top of the <head>.
• Server settings. Meta says your server must support gzip and deflate encoding. X says its crawler needs TLS 1.1 or later; our SSL certificates guide explains HTTPS setup.

Testing and refreshing previews

Platforms cache previews, so a change to your tags does not show up at once. Each has its own way to check and refresh:

• Meta. Enter a URL in the Sharing Debugger to see which tags the crawler reads and any errors. Meta's best practices say the debugger also refreshes the stored preview, which helps if you need to update it more often than the standard 24-hour update period.
• LinkedIn. LinkedIn's help page on using Post Inspector to refresh a URL explains that a preview may show an old, cached image if the URL has been shared before. Running the URL through Post Inspector refreshes it. LinkedIn notes that this affects only new posts; existing posts keep their old preview.
• X. X's troubleshooting guide says its crawler re-indexes card information roughly every seven days, and that images are cached by URL. To force a new image, it suggests adding a parameter to the image URL, such as ?v=2, so the image is treated as a new file.

Check previews before a launch or campaign, not after the first share. Our website launch checklist lists the other checks for launch day.

Open Graph, meta descriptions and structured data

Three sets of page metadata are easy to confuse. The <title> and meta description are written mainly for search results. Open Graph tags are for social previews. Structured data, usually JSON-LD, describes the page for search engines' rich results; our structured data guide covers it. Some content management systems and SEO plugins fill the Open Graph tags from the title and description. Check that yours sets a page-specific image and lets you override the defaults; our guide to choosing a CMS covers what to test.

Write the social title for people scrolling a feed. Meta suggests leaving out branding such as the site name.

A checklist

• Every page has og:title, og:description, og:image, og:url and og:type, with full HTTPS URLs.
• og:url is the canonical URL, without tracking parameters.
• Important pages have their own landscape preview image, with og:image:width, og:image:height and og:image:alt.
• A twitter:card tag is set to summary_large_image where a large card is wanted.
• Robots.txt, firewalls and security plugins do not block the platforms' crawlers, and preview images are public.
• Previews are checked in Meta's Sharing Debugger and LinkedIn's Post Inspector before launch.

Frequently asked questions

Do I need Open Graph tags if my site already has a title and meta description?

They help. Meta says that without Open Graph tags its crawler guesses the title, description and image. Adding the tags lets you choose what appears in the preview, including the image.

What size should a social sharing image be?

Each platform states its own: LinkedIn asks for at least 1200 by 627 pixels at 1.91:1 and under 5 MB, Meta recommends at least 1080 pixels wide, and X's large card uses a 2:1 image under 5 MB. A landscape image of at least 1200 by 627 pixels meets all three minimums.

Do I need separate tags for X?

Mostly not. X falls back to og:title, og:description and og:image when its own tags are missing. Add a twitter:card tag set to summary_large_image if you want the large image card.

I changed the image but the old preview still shows. Why?

Platforms cache previews. Run the URL through Meta's Sharing Debugger or LinkedIn's Post Inspector to refresh it. X re-reads card data roughly every seven days and caches images by URL, so changing the image URL helps. Existing posts may keep the old preview.

Why does my link show no image at all?

Usually the crawler cannot reach the page or the image: a robots.txt rule, a firewall or security plugin, an image on a private or staging server, or a slow page. Check the tags in the Sharing Debugger, which shows what the crawler reads and any errors.

Want every page of your site to share with the right title, text and image? See our website development service and all our services, or email info@creahive.com.