jquery - 在网站和 iframe 中打开图表 - 让 twitter、fb 只读取 iframe 中的图表

Question

我有一些客户，他们的网站上有一个 iframe，其中显示了我的产品。每个产品都有其单独的 og:image 和 twitter:image 元标记以及 twitter/fb 共享按钮。

不幸的是，twitter 和 facebook 只读取了客户网站的元标记，而不是 iframe 中的元标记，因此发布的图片和描述是错误的。还有一种情况是，一个客户拥有自己的 og 和 twitter 元标签，在这种情况下，twitter/fb 正在读取客户的 og 元标签。

我正在搜索的解决方案是，如果有人单击 iframe 中的共享按钮，twitter 和 fb 就会从 iframe 获取开放图元标记信息。

这是否可能以及使用什么样的技术，我可以对 twitter/fb 说从 iframe 获取我的 og 元标记，而不是从顶级站点获取我的元标记。我已经看到了如何使用jquery读取iframe中的meta标签的示例，但是如何将其交给twitter和fb？这样，在包含我的 iframe 的页面上，iframe 内的元标记就会从主网站中读取。

感谢您阅读我的问题，希望有人有一个好主意。

Answer 1

就像 @CBroe 在他们的评论中提到的那样:OpenGraph <meta>标签需要由为其提供服务的 Web 服务器添加到文档中，而不是通过 javascript。

如果您的网站从外部看是一个单一文档，但所有导航事件都发生在 iframe 内，则您可能会让大多数用户感到不安，并且您几乎不可能让任何人链接到特定内容。

话虽如此，这与当您将共享按钮放置在 iframe 内的页面上时如何使共享按钮正常工作是正交的。您可以为每个内部文档的 URL(即当前在 iframe 中显示的内容显示的 URL)配置共享按钮。该文档可以包含所有必需的 OpenGraph <meta>数据。
但这也意味着人们点击由此产生的共享链接将被定向到内部文档，而不会被 iframe 包围。

您可以通过使用 javascript 将任何人重定向回您的索引文档(这会使用实际内容呈现 iframe)来解决此问题，并希望这也能导致该索引文档随后在 iframe 中加载正确的内容。这个想法可以说不太好，因为它会触发一堆重定向，并且依赖于 Javascript 来工作。

另一种方法是开始使用以 #! 开头的片段。 。在片段内，您可以对索引文档的 iframe 中当前显示的内容进行编码。如果您将 JavaScript 添加到识别当前片段的索引文档，然后将相应的内容加载到 iframe 中，那么您将向用户提供正确的内容，而无需重定向。此外，使用带有此类片段的 URL 可与 Facebook 抓取工具配合使用，因为它将遵循 _escaped_fragment_ specification .