为什么我的开放图形图像元标记在 Facebook 上不起作用？答案

【问题标题】：Why is my open graph image meta tag isn't working on Facebook?为什么我的开放图形图像元标记在 Facebook 上不起作用？
【发布时间】：2022-01-28 01:24:47
【问题描述】：

这是我第一次尝试部署一些东西。虽然网页是用来测试的，还没有完成，但我想分享给我的朋友看看。

当我与一些朋友分享我的网站时，我看不到open graph image

它只是这样显示

我只是想实现一个非常简单的静态open graph image，而不是动态的。

这是我在 React 应用程序的 public/index.html 中设置 head 的方法

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Mirai</title>
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Watch anime"
      />
    <meta name="mobile-web-app-capable" content="yes"/>
    <meta name="application-name" content="Mirai"/>
    <meta name="apple-mobile-web-app-title" content="Mirai"/>
    <meta property="og:title" content="Mirai"/>
    <meta property="og:description" content="Watch free anime"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="https://mirai-huy8856.vercel.app/">
    <meta property="og:image" content="https://s4.anilist.co/file/anilistcdn/media/anime/banner/101922-YfZhKBUDDS6L.jpg"/>
    
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  </head>

这是我的VERCEL App，我有View Source，看到里面有og 元标记，但Facebook 拒绝读取图片，我做错了什么？

这是我尝试实现的Image。

这是我在 ReactJS 应用程序中的文件夹结构。

【问题讨论】：

标签： html reactjs meta share-open-graph

【解决方案1】：

您可以在此处在 Facebook 调试器上测试您的 OpenGraph 设置：

https://developers.facebook.com/tools/debug/

值得注意的是，对于 OpenGraph 图像数据，您应该提供额外的数据；即：

<meta property="og:image" content="https://s4.anilist.co/file/anilistcdn/media/anime/banner/101922-YfZhKBUDDS6L.jpg"/>
    <meta property="og:image:type" content="image/jpeg" >
<meta property="og:image:width" content="1800" >
<meta property="og:image:height" content="550" >

进一步;查看您在元数据 OpenGraph URL 标签上提供的页面 https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fmirai-huy8856.vercel.app%2F

调试器状态：

缺少属性缺少以下必需属性：fb:app_id

【讨论】：

谢谢，但我在哪里可以找到 app_id？我对这些一无所知，你能给我进一步的指导或一些文章吗？如果不能，我会尝试做更多的研究，感谢您解释现在出了什么问题。
@Bunny，您将从 Facebook 本身获得 app_id。您需要为您的应用程序（我认为）创建一个 Facebook 页面以获取应用程序 ID。即使你不使用那个 facebook 页面。
@Bunny 在这里试试：stackoverflow.com/questions/8845082/…