og:image meta tag does not show correct image in link preview

[flutter-clutter]

• [x] I have searched open and closed issues for duplicates
• [x] I am submitting a bug report for existing functionality that does not work as intended
• [x] This isn't a feature request or a discussion topic

---

Bug description

The link preview when sending a message does not display the open graph image which I provide in my website's og:image meta tag. An example URL that causes this issue is this: https://www.flutterclutter.dev/flutter/tutorials/flutter-game-tutorial-fruit-ninja-clone/2020/951/

Steps to reproduce

Put a signal message with https://www.flutterclutter.dev/flutter/tutorials/flutter-game-tutorial-fruit-ninja-clone/2020/951/ into the message field (you might also want to send it but the link preview is already generated beforehand). It seems to generate a fallback image based on the favicon although a proper image is described in the og:image tag. Websites like this og check display everything seamlessly.

Actual result: It seems to generate a fallback image based on the favicon instead of the image provided in the og tags.

Expected result: Render the same images that are shown in common og checks.

Screenshots

Device info

Device: iPhone 12 Mini

iOS version: iOS 16.2

Signal version: 6.12

Also happens on Mac version (6.9.0 Apple Silicon).

This is related to this issue that was closed automatically.

[Onyoursix]

I'm also having this same issue. Image loads on every platform, passes all the checks, just doesn't load on signal.

[sashaweiss-signal]

Hi! It looks like on the page you linked, the <meta> tag is as such:

<meta name="og:image" content="https://www.flutterclutter.dev/images/posts/2020-07-24-flutter-game-tutorial-fruit-ninja-clone/flutter-fruit-ninja-clone.png">

From what I can tell on https://ogp.me, the name= should in fact be property=. Looking at Signal's code, we parse og:image meta tags looking for property=. Additionally, the other meta tags with og: data on that page use property=, so I suspect the og:image tag using name= is an oversight.

I'm going to close this, as I don't think the fix lives on the Signal side. Thanks for reporting!

[jonsherrard]

I'm also running into this bug, doing some testing now but have noticed that both reports here are .png files, as are images generated by the @vercel/og repo, and the ones that I have working are jpg files.

Works: https://www.theguardian.com/sport/2023/oct/16/england-little-option-ben-stokes-cricket-world-cup (jpg)

<meta property="og:image:width" content="1200"/>
<meta property="og:image" content="https://i.guim.co.uk/img/media/4784134da1b0485a25c2867207e43000fbf301b0/0_23_5012_3006/master/5012.jpg?width=1200&height=630&quality=85&auto=format&fit=crop&overlay-align=bottom%2Cleft&overlay-width=100p&overlay-base64=L2ltZy9zdGF0aWMvb3ZlcmxheXMvdGctZGVmYXVsdC5wbmc&enable=upscale&s=c6c6ebbef2067ab804e5a09709825dbe"/>
<meta property="og:image:height" content="720"/>

Doesn't work: https://ashore.io/journal/desk-notes/unbundling-the-office (png)

<meta property="og:image" content="https://ashore.io/api/og-images/basic-article?slug=unbundling-the-office&amp;v=zBYb2h22dPHXIc8JX9mkpE"/>
<meta property="og:image:alt" content="Unbundling The Office"/>
<meta property="og:image:secure_url" content="https://ashore.io/api/og-images/basic-article?slug=unbundling-the-office&amp;v=zBYb2h22dPHXIc8JX9mkpE"/>
<meta property="og:image:type" content="image/png"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>

[kkm]

Android works well but PC on Windows.

[nalinbhardwaj]

@jonsherrard did you find a fix to this? I'm using @vercel/og for generation and previews don't load for me either

[jonsherrard]

@jonsherrard did you find a fix to this? I'm using @vercel/og for generation and previews don't load for me either

I proxy the OG images through a next.js API call, the sole purpose is to measure the content length and add it as a header 😂

export const config = {
  api: {
    bodyParser: false,
    externalResolver: true,
  },
};

// api endpoint here:
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Buffer>
) {
  const { title, subtitle } = req.query;
  if (req.headers["transfer-encoding"] === "chunked") {
    (req as any).filePayload = JSON.parse((await getRawBody(req)).toString());
  }

  const url = `${baseUrl()}/api/v1/public/og-images/basic-image.png?title=${title}&subtitle=${subtitle}`;

  const response = await fetch(url as string);
  const buffer = await response.buffer();

  // mesure the length of the buffer in bytes
  const bufferLength = Buffer.byteLength(buffer);

  // disable content encoding on this response
  res.setHeader("Content-Type", "image/png");
  res.setHeader("Internal-Image-Proxy", "true");
  res.setHeader("Content-Length", bufferLength);
  // return the image buffer as png here
  res.status(200).send(buffer);
}

[Pfed-prog]

My understanding is that in general we should use property instead of name in all meta tags