标签: share-open-graph

我正在尝试在网站中实现 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 --> …

我正在我的网络应用程序中放置链接预览。我在后端使用 nodejs 来检索 og 属性（如 site_name、描述、图像、标题等）。YouTube 和其他内容的链接工作正常，但对于 Instagram 的链接，开放图谱元标记在链接的响应正文中不一致地缺失。

例如，考虑此链接：https://www.instagram.com/p/B_hs0pUlRvR/

当我在本地计算机上运行的脚本中请求此链接的正文时，它确实包含 og 元标记。

但是，当我将相同的脚本放入云中并执行相同的请求时，这些元标记就会丢失。

我尝试在手机中查看该链接的源代码，这种奇怪的行为也继续存在。

在正常模式下查看源代码时没有og标签

og：在隐身模式下查看源代码时会出现元标记

我尝试更改请求中的用户代理，但这没有帮助。这背后的原因是什么以及如何成功获得 Instagram 帖子链接的链接预览。

在我的网页上，我想分享一个链接 - 比如说超级英雄的维基百科页面

在该页面的代码中，head 标签中有以下代码：

<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Connecticut_ComiCONN_Superhero_Mascot..jpg/640px-Connecticut_ComiCONN_Superhero_Mascot..jpg">

这是您在社交媒体上共享链接时显示的该页面的缩略图。（现在大多数页面都有一个）。

有没有办法检索该图像 url 以嵌入到我的普通网页页面上？

我正在使用 CSS、HTML 和 Javascript。