Open Graph and X cards: how shared links look

Which Open Graph and X card tags give a shared link its title, description, and image, and how to fix a missing or broken preview.

When someone shares a link in a chat or a post, the app fetches the page and builds a preview card from tags in its head: a title, a short description, and an image. Without those tags, each app guesses, and the card often has no picture.

Open Graph tags (og:) come from the Open Graph protocol, and Facebook and LinkedIn both ask for them. X reads its own twitter: tags and falls back to Open Graph for the ones you leave out.

What SignalDNS checks

We read the Open Graph and X tags in the head of the HTML the server sends to Android Chrome, before any JavaScript runs, up to the first 2 MiB. Open Graph tags are read from property= (or name=), and X tags from name=.

The tags are named, but images aren’t loaded. We report the og:image address without fetching it, so we can’t tell whether it exists, how large it is, or what format it’s in. The audit draws a preview card from the tags, falling back to the page title and meta description as apps do.

A full set of tags

<head>
  <title>How to make a sourdough starter | Example Bakery</title>
  <meta name="description" content="Make a sourdough starter from flour and water in about a week.">
  <link rel="canonical" href="https://www.example.com/sourdough-starter">

  <meta property="og:type" content="article">
  <meta property="og:url" content="https://www.example.com/sourdough-starter">
  <meta property="og:title" content="How to make a sourdough starter">
  <meta property="og:description" content="Make a sourdough starter from flour and water in about a week, then keep it alive.">
  <meta property="og:image" content="https://www.example.com/images/sourdough-starter.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="A jar of bubbling sourdough starter">
  <meta property="og:site_name" content="Example Bakery">

  <meta name="twitter:card" content="summary_large_image">
</head>
  • Use absolute addresses, with https://, for og:url and og:image.
  • Facebook suggests og:image:width and og:image:height so the image can show the first time the link is shared.
  • X uses the Open Graph title, description, and image when its own tags are missing, so add twitter:title, twitter:description, or twitter:image only if X should show something different. twitter:card has no Open Graph equivalent.

There are no Open Graph or X tags

The page has no og: or twitter: tags at all. Facebook says that without Open Graph tags its crawler makes a best guess at the title, description, and image, and LinkedIn says it may pull other content from the page or none. SignalDNS marks this as needing attention, and skips the other checks below.

How to fix it: add at least og:title, og:description, and og:image, plus og:url and twitter:card, as in the example:

<meta property="og:title" content="How to make a sourdough starter">
<meta property="og:description" content="Make a sourdough starter from flour and water in about a week.">
<meta property="og:image" content="https://www.example.com/images/sourdough-starter.jpg">

There’s no preview image

The image is most of what people see in a shared link.

  • og:image is set: OK. We show its address.
  • Only twitter:image is set: needs attention. X shows the picture, but twitter:image alone reaches only X: Facebook, LinkedIn, and other apps that read Open Graph don’t use it.
  • Neither is set: needs attention. Most apps show a card with no picture, and some pick an image from the page.

How to fix it: add an og:image with an absolute address. Use the same image as twitter:image, if you have one. We suggest 1200 × 630 px. LinkedIn asks for at least 1200 × 627 px and at most 5 MB, and recommends a 1.91:1 ratio; Facebook recommends at least 1080 px wide.

<meta property="og:image" content="https://www.example.com/images/sourdough-starter.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Facebook caches images by their address, so a new image needs a new address.

There’s no preview title

  • og:title or twitter:title is set: OK.
  • Neither, but the page has a <title>: OK. Apps use the page title instead.
  • Neither, and no page title: needs attention. Apps show the address or guess.

How to fix it: add an og:title. Facebook asks for the title without branding such as the site name; og:site_name carries that. Keep the same topic words as the page title, which the social title check compares.

<meta property="og:title" content="How to make a sourdough starter">

There’s no preview description

  • og:description or twitter:description is set: OK.
  • Neither, but the page has a meta description: OK. Apps fall back to the page title and meta description, as the audit’s preview card shows.
  • Neither, and no meta description: needs attention. The card has no text under its title, or text an app picks from the page.

How to fix it: add an og:description. The Open Graph protocol describes it as one to two sentences. Adding a meta description helps search results as well.

<meta property="og:description" content="Make a sourdough starter from flour and water in about a week.">

There’s no twitter:card tag

twitter:card chooses the card’s layout on X: summary for a small card, or summary_large_image for one with the image across its full width. Open Graph has no tag for this. Without it, X may show a small card. SignalDNS marks a missing twitter:card as needing attention; any value is OK, as we don’t check it.

How to fix it:

<meta name="twitter:card" content="summary_large_image">

og:url doesn’t match the canonical address

The Open Graph protocol calls og:url the canonical address of the page, used as its permanent ID, and Facebook adds up likes and shares at that address. When og:url names a different address from the canonical tag, shares can split between the two.

We compare og:url with the first canonical link by scheme, host, path, and query, ignoring only a # fragment. A difference, including http:// against https://, www. against none, or a relative og:url, needs attention. When the page lacks either tag, there’s nothing to compare and this check doesn’t appear.

How to fix it: set og:url to the canonical address exactly:

<link rel="canonical" href="https://www.example.com/sourdough-starter">
<meta property="og:url" content="https://www.example.com/sourdough-starter">

Apps keep old previews

Apps fetch a page once and keep the preview, so a fixed tag can take a while to show. To ask for a fresh copy:

  • Facebook: the Sharing Debugger shows which tags Facebook’s crawler reads, with errors and warnings, and fetches the page again. Facebook’s best practices otherwise describe a standard 24-hour update period.
  • LinkedIn: the Post Inspector fetches the page again. LinkedIn says this changes the preview only for new posts; existing posts keep the old one.
  • X: the Card Validator no longer shows previews; X removed them in mid 2022. X recommends previewing by pasting the link into the post composer. Its crawler doesn’t run JavaScript, so the tags must be in the HTML.

Setting it up in your CMS or framework

What we can’t tell from outside

We don’t load the image, so we can’t tell whether it exists, is too small or too large, or is blocked from an app’s crawler by robots.txt. We can’t see what each app shows, or what it has cached. We don’t fetch the page as Facebook’s or X’s crawler, so a server that treats them differently isn’t caught. Tags added by JavaScript aren’t seen, and we don’t judge og:type, og:site_name, or the value of twitter:card.

Sources

Last reviewed .