如何在聚合物中设置动态 Meta 标签和 Open Graph 标签？答案

【问题标题】：How to set dynamic Meta Tags and Open Graph tags in polymer?如何在聚合物中设置动态 Meta 标签和 Open Graph 标签？
【发布时间】：2016-03-12 15:40:17
【问题描述】：

我有一个聚合物节点站点，我一直在研究，但不知道如何包含动态元标记和 Open Graph 标记。 Jquery 不起作用，也不会使用聚合物 api 添加节点，因为它将在页面加载后添加所有标签，而 facebook 将无法读取标签。谷歌爬虫确实会渲染页面，但如果我可以在标题中设置描述，那将是最好的。

<html>
  <head>
    <meta name="description" content="description goes here" />
    <meta property="og:title" content="title"/>
  </head>
  <body>
    <group-pages id="grouppages" is="dom-bind"></group-pages>
  </body>
</html>

grouppages 设置数据并使用服务根据 url 填充页面，但我不知道如何根据页面更改元标记。

有人有什么想法吗？

一个想法是获取信息服务器端并将其发送到聚合物，但我仍然不确定节点和聚合物之间是否可能。

【问题讨论】：

这个answer是我找到的最好的！
已经有一段时间了，但我认为@jFathi 的答案最适合聚合物。

标签： javascript jquery polymer polymer-1.0

【解决方案1】：

如果您使用 Firebase 托管您的 Polymer 应用，则可以使用 Firebase http trigger 函数预渲染 index.html 文件。

exports.host = functions.https.onRequest((req, res) => {
  // replace og-tags in the index.html file and return it
});

请参阅this post 了解更多信息。

【讨论】：

非常好的教程，我正在尝试实现它。只有一个问题，在尝试提供更新的 index.html 时，我不断收到“access-Control-Allow-Origin”错误。我知道错误是什么，但不知道如何解决。我已经尝试过cors，但无法解决。如果您能评论或回答我的问题，将不胜感激。 stackoverflow.com/q/49998010/5601401
完成。您是否将重写添加到您的 firebase.json 文件中？
是的，我做到了，但我仍然没有看到正在调用的函数。我在我的问题中添加了更多信息。感谢任何帮助。

【解决方案2】：

这绝对是一个悬而未决的问题，它涉及在客户端生成元标记的任何方式，无论是 Polymer 还是任何其他前端代码。

只有爬虫执行JS才能克服。 2014 年 5 月Google started doing so。另一方面，据我所知，Facebook 还没有朝这个方向发展。

您可能想查看其他两个答案以获得完整的图片：

截至目前，唯一 100% 可靠的方法是服务器拦截爬虫并在发送响应之前专门为它们渲染内容。这也被称为isomorphic JavaScript。已经有一些有用的工具可以支持此类任务，例如 Prerender。

希望这会有所帮助！干杯

【讨论】：