0

This is the very first time I try to deploy something. Though the webpage is for testing purposes and not finished yet but I want to share it for my friend to see.

When I share my web with some of my friends, I can't see the open graph image

It just displays like this

enter image description here

I'm just trying to implement a very simple static open graph image, not the dynamic one.

Here's how I set up my head in the public/index.html of my React-app

  <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>

Here's my VERCEL App, I've View Source and saw that it has og meta tag in there, but Facebook refuses to read the image, what have I done wrong?

Here's the Image I tried to implement.

This is my folder structure in the ReactJS application.

Folder Structure

4

1 回答 1

0

您可以在 Facebook Debugger 上测试您的 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

于 2022-01-27T17:24:47.543 回答