Twitter Open Graph 图像未显示

Question

我正在尝试在网站中实施 OpenGraph。这是我的元数据代码：

<!-- open-graph basic tags -->
<meta property="og:title" content="Philippine Standard Geographic Code API" />
<meta property="og:site_name" content="Wareneutron - PSGC API" />
<meta property="og:description" content="API used for listing all the region, province, city, municipality, barangay, and its data. Philippine Standard Geographic Codes (PSGC) data came from Philippine Statistics Authority." />
<meta property="og:url" content="https://psgc-api.wareneutron.com/" />
<meta property="og:type" content="website" />
<meta property="og:image" content="/assets/wareneutron_psgc_api_opengraph.jpg" />
<meta property="og:image:alt" content="PSGC Banner" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<!-- Twitter open-graph tags -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image:alt" content="PSGC API Banner" />

它在 Facebook 共享调试器上运行良好，这是输出：

但是推特卡片验证器中没有显示图像：

我要显示的图像在我的资产文件夹中，结构如下：

谢谢你帮助我。

Answer 1

Twitter 喜欢名字，而不是属性（OG 元标记使用属性）。

<!-- Twitter open-graph tags -->

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:alt" content="PSGC API Banner">
<meta name="twitter:title" content="Philippine Standard Geographic Code API">
<meta name="twitter:description" content="API used for listing all the region, province, city, municipality, barangay, and its data. Philippine Standard Geographic Codes (PSGC) data came from Philippine Statistics Authority.">
<meta name="twitter:image" content="https://psgc-api.wareneutron.com/wareneutron_psgc_api_opengraph.jpg">

Twitter card validator 的一件事 — 有时当您单击“预览卡片”按钮时似乎不会重新抓取您的网站。为了测试更改代码是否有效，我将您的页面副本上传到我网站的服务器，然后将其抓取。起初，我得到了一张没有图像的摘要卡，但我重新启动了浏览器（关闭并重新打开）并重新抓取 URL 并且它起作用了（显示了大图像）。

Answer 2

我必须托管我的图像（我选择了 S3 存储桶），并且只有在我提供 url 作为我的内容而不是我的本地文件后它才有效。

Twitter Open Graph 图像未显示

Twitter Open Graph image not showing

html

javascript

facebook-opengraph

share-open-graph