0

我正在尝试在网站中实现 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 共享调试器，输出如下： 在此处输入图像描述

但图像未显示在 twitter 卡验证器中： 在此处输入图像描述

我要显示的图像在我的资产文件夹中，结构如下： 在此处输入图像描述

感谢你们对我的帮助。

4

2 回答 2

2

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

于 2022-01-09T05:29:11.040 回答
2

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

于 2021-03-26T12:18:48.377 回答