1. Home
  2. Products
  3. Social card preview
  4. API
  5. Checks
  6. images-differ.both-ok

images-differ.both-ok

Image in twitter:image is a different file. Level: Tip.

When it is raised

Raised when the page sets both og:image (or og:image:url) and twitter:image (or twitter:image:src), both resolve against the page's final URL, after redirects, to http or https URLs, the two URLs differ, and both files load as images (a 2xx response with a Content-Type starting image/). The message gives the twitter:image file's dimensions and byte size where they could be read.

What it does to a shared link

Facebook, LinkedIn and WhatsApp document og:image as the image tag. X's Cards documentation, since withdrawn, described X reading twitter:image first, so by that description X would show a different picture from those three. Slack documents reading both Open Graph and X Card metadata and publishes no precedence between them. The API fetches the twitter:image file and reports its dimensions and byte size; every other image check measures the og:image file only.

How to fix it

  1. If the two pictures are deliberate, no change is needed.
  2. If they are not, set twitter:image to the same URL as og:image, or remove twitter:image.
  3. Check the twitter:image file's dimensions, aspect ratio and size by hand, since the other image checks measure only og:image.
<meta property="og:image" content="https://example.com/card.png"> <meta name="twitter:image" content="https://example.com/card.png">

Related checks

Sources