Skip to content
Surfilby Adam Hafez
Free tool

Social media link preview for Facebook, LinkedIn and X

Social media link preview: see how your og:title, description and image look as a shared card on Facebook, LinkedIn and X. Free, runs in your browser.

Runs entirely in your browser. Nothing you enter is uploaded, logged or stored.

The Open Graph protocol does not mandate an image ratio; it only definesog:image:width and og:image:height as optional metadata. A landscape image renders best, since every large-image card here crops to a wide box.

No image

Key takeaways

  • The Open Graph protocol at ogp.me sets no character limit for og:title or og:description, and no required image ratio.
  • Facebook builds its link preview from og:url, og:title, og:description and og:image, per its sharing documentation.
  • Facebook advises keeping branding such as the site name out of og:title, since og:site_name carries it separately.
  • Facebook caches a shared image by its URL, so a replaced image needs a new URL before the preview changes.
  • The counters in this tool are guide numbers, not documented cutoffs, so treat a warning as a prompt to shorten.

What it takes

  • The og:title
  • The og:description
  • The og:image URL
  • The site name
  • The card type, Facebook/LinkedIn or X summary_large_image

More tools

All of them free, all of them browser-only.

Browse the tools

How to use it

  1. 1Paste the title and descriptionUse the exact og:title and og:description values from the page, not the H1 or meta description tag, since those are separate fields platforms may fall back to.
  2. 2Paste a real image URLThe preview loads the actual image in your browser. An empty or broken URL shows a neutral placeholder instead of a fake image.
  3. 3Switch card typeFacebook builds its card from og: tags. X has its own twitter: tags, so set both to the same values and check the X mode too.
  4. 4Watch the character countersThese are a practical guide only. Neither Open Graph nor any platform publishes an exact character limit, so treat the count as a signal, not a rule.

A shared link card is built from meta tags in the page head, not from the article people see. This tool renders those values as a card, so you can check the wording, the length and the image crop before a link goes out.

What the preview shows

You enter five things: the site name, the page URL, the og:title, the og:description and the og:image URL. The card renders an image box above the site name, the title and the description. If the site name is empty, the card shows the URL’s host instead, without a leading www..

The Open Graph protocol defines og:title, og:type, og:image and og:url as the four required properties, with og:description and og:site_name as optional ones. It sets no length for any of them. Facebook’s sharing guide names og:url, og:title, og:description and og:image as the tags it reads for a link preview. It describes the title as the article title without branding such as the site name, and the description as usually two to four sentences.

Two buttons switch the card type: Facebook / LinkedIn, and X summary_large_image. The card layout stays the same in both modes. What changes is the counter guide and the tag panel, which lists the tags each mode relies on.

How to read the results

  • The counters. Each field shows its length and a guide, for example 64 chars (guide: ~90). The guides this tool uses are about 90 characters for the title and 200 for the description in Facebook / LinkedIn mode, and about 70 and 200 in X mode. No platform publishes these numbers, so a count past the guide switches to the warning color as a prompt to check, not as a failure.
  • The image box. The image is cropped to fill a wide box, so a landscape image shows the most of itself. “No image” means the field is empty. “Image failed to load” means the URL is wrong or the host blocked the request, and a platform’s crawler may fail the same way.
  • The tag panel. It names the card type and the tags that mode draws on.

Worked example

The tool loads with the site name Surfil, the URL of one of our news stories, the title “Search Console now reports impressions from Google’s AI features” and a 147-character description. The image field is empty. The card shows the site name, the full title and the full description under a box reading “No image”. The counters read 64 chars (guide: ~90) and 147 chars (guide: ~200), so neither shows a warning.

Switch to X and the title guide drops to ~70. At 64 characters the title is still under it. Add the six characters of ” today” to the end and it reads 70 chars (guide: ~70). One more character and the counter switches to the warning color.

Common mistakes it catches

  • A missing image. An empty og:image leaves the card with a blank box. The Open Graph protocol lists og:image as required, so a page without one is incomplete, not just plain.
  • A broken or blocked image URL. A relative path, a typo or a host that refuses outside requests shows “Image failed to load” here before it fails in a real share.
  • Branding in the title. A title ending in ” | Site name” repeats what og:site_name already shows, which Facebook’s guide advises against, and it uses up the visible length.
  • A portrait image. A tall image loses most of its height in a wide card. Check the crop and use a landscape version if the subject is cut off.
  • A changed image that never updates. Facebook caches images by URL, so replacing the file at the same address does not change the preview. Give the new image a new URL.

Sources

  1. 1.The Open Graph protocol - Open Graph ProtocolPrimary
  2. 2.A guide to sharing for webmasters - Meta for DevelopersPrimary

Common questions

What is the official character limit for og:title and og:description?

There isn't one. The Open Graph protocol at ogp.me does not define a character limit for either property. Platforms truncate in their own rendering, and none of them publishes the exact cutoff, so any specific number quoted elsewhere is an observed approximation, not a documented rule.

What is the recommended og:image size?

The protocol defines og:image:width and og:image:height as optional metadata describing the image you provide, not a requirement or a recommended ratio. Facebook's sharing guide advises specifying both so the image loads properly the first time it is shared.

Why does my old image still show after I changed it?

Facebook's sharing guide states that images are cached based on the URL and are not updated unless the URL changes. Publish the new image at a new URL, then use Facebook's Sharing Debugger to see what its crawler now scrapes.

How is this different from an Open Graph validator?

A validator checks whether the required tags are present and well formed. This tool is visual. It shows how the text and image you enter will look as a card, with length guides, so you can judge cropping and truncation before publishing.

Does this tool read tags from a live page?

No. You type or paste each value, and the preview renders in your browser from what you entered. Nothing is fetched except the image URL you supply, which your browser loads to show it in the card.