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

Posted 2023-03-28

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

【英文标题】：Not able to share Facebook/Twitter content from my React next.js website using open graph meta tags

【发布时间】：2021-02-10 03:02:30

【问题描述】：

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

任何人都可以就导致此问题的原因以及如何解决此问题给我任何建议吗？我认为这就像添加正确的元标记然后共享一样简单，但我很难做到这一点。任何帮助将不胜感激！

【问题讨论】：

使用 Facebook 分享调试器 developers.facebook.com/tools/debug 或告诉我们您遇到问题的 URL。

不幸的是我在 localhost 上运行这个:(

那是你的问题。如果外部没有人可以访问它，Facebook 将如何抓取您的应用程序。

没关系。 Facebook 和 Twitter 需要能够抓取您的页面。所以本地主机不起作用

从修复 SSL 证书问题开始

【参考方案1】：

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

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

npm install ngrok -g
ngrok http 3000

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