这是我第一次尝试部署某些东西。虽然该网页是出于测试目的,尚未完成,但我想分享给我的朋友看。
当我与一些朋友分享我的网站时,我看不到
open graph image
它只是这样显示
我只是想实现一个非常简单的静态
open graph image
,而不是动态的。
这是我在 React 应用程序的
head
中设置 public/index.html
的方法
<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 应用程序,我已经
View Source
并看到其中有 og
元标记,但 Facebook 拒绝读取图像,我做错了什么?
这是我尝试实现的Image。
这是我在 ReactJS 应用程序中的文件夹结构。
您可以在此处测试 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