Angular 9 | Facebook 分享按钮不显示图像

Question

我有一个 Angular 9 SSR 应用程序 - http://www.dosgamesworld.com/

我在每个页面上都有一个“分享 Facebook”按钮。

我遇到的问题是 Facebook 无法正确识别大多数页面的 og:image。

应用程序中的所有图像均为 320px X 200px。

而且 meta 对于所有页面看起来都是正确的。

对于这个页面，它运行良好 - http://www.dosgamesworld.com/game/alleycat

     <meta property="fb:app_id" content="1596858517136240">
    <meta property="og:url" content="http://www.dosgamesworld.com/game/alleycat">
    <meta property="og:type" content="website">
    <meta property="og:title" content="DOS Games World - Alley Cat">
    <meta property="og:description" content="Alley Cat is a single player platform game. The player has to assume the role of a cat, which is outside of a house and has to go through a certain track, near ">
    <meta property="og:image" content="http://www.dosgamesworld.com/assets/images/alleycat.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="320">
  <meta property="og:image:height" content="200">

BUT，对于其他页面不起作用：例如 http://www.dosgamesworld.com/game/pop

（meta 看起来正确，但实际分享缺少照片）

  <meta property="fb:app_id" content="1596858517136240">
    <meta property="og:url" content="http://www.dosgamesworld.com/game/pop">
    <meta property="og:type" content="website">
    <meta property="og:title" content="DOS Games World - Prince of Persia">
    <meta property="og:description" content="Prince of Persia is one of the most famous and entertaining games of all time. The game is a fantasy cinematic platformer, which takes place in Ancient Persia. ">
    <meta property="og:image" content="http://www.dosgamesworld.com/assets/images/pop.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="320">
  <meta property="og:image:height" content="200">

当我查看 facebook 开发者工具时，我看到以下错误：Provided og:image URL, http://www.dosgamesworld.com/assets/images/pop.png was not valid because it did not meet the minimum size constraint of 200px by 200px.

Answer 1

啊明白了，仔细看。在浏览器中打开弹出图像 url。它的名字是 pop.png 但它实际上是一张 jpeg 图片

更改流行元素

<meta property="og:image:type" content="image/png">

至

<meta property="og:image:type" content="image/jpg"> or <meta property="og:image:type" content="image/jpeg">

或

将 pop 图像更改为实际的 png。

Angular 9 | Facebook 分享按钮不显示图像

Angular 9 | Facebook share button not displaying image

facebook-sharer

angular