无法使用开放图元标记从我的React next.js网站共享Facebook / Twitter内容

问题描述

我有一个Next.js应用程序,无法在其中与Facebook和Twitter共享内容。我已经在文档的头标签添加了所需的开放图元标签,并且正在使用React Helmet动态更改这些元标签。如果我使用检查器并查看元素并查看头部内部,则可以看到打开的图形元标记已使用正确的信息进行了更改。但是,当我单击共享到Facebook或Twitter时,没有看到任何打开的图形数据被插入到生成的帖子或推文中。

任何人都可以就造成此问题的原因以及如何解决该问题提供任何建议吗?我认为这就像添加正确的元标记然后共享一样简单,但是我在这方面遇到了很多困难。任何帮助将不胜感激!

解决方法

使用 ngrok 向全世界公开您的本地主机应用程序。它提供了一个没有身份验证令牌的基本 http-https-tcp 隧道。 https://www.npmjs.com/package/ngrok

您可以对软件包进行全局安装,然后它将使用 HTTPS URL 代理您的本地主机。使用您的本地主机端口(例如端口 3000)。

npm install ngrok -g
ngrok http 3000

然后您应该能够使用 ngrok URL 进行站点测试。