时间戳

首页 > 解决方案 > 角 9 | Facebook分享按钮不显示图像

angular - 角 9 | Facebook分享按钮不显示图像

问题描述

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

在每个页面中，我都有一个分享 Facebook 按钮。

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

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

所有页面的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">

在此处输入图像描述

但是，对于其他页面，它不起作用：例如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.

标签： angularfacebook-sharer

解决方案

啊，明白了，仔细看。在浏览器中打开弹出图像 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">

或者

将流行图像更改为实际 png。

推荐阅读