动态更改 Javascript 项目中的 og 元标记以进行社交媒体共享答案

【问题标题】：Dynamically change og meta tag in Javascript project for social media sharing动态更改 Javascript 项目中的 og 元标记以进行社交媒体共享
【发布时间】：2021-01-03 17:05:14
【问题描述】：

我是本地 Android 应用程序开发人员，正在尝试使用 Firestore 开发新闻网站。我从friendlyeats-web学会了开发网站我遵循相同的结构一切顺利，开发部分几乎完成。

用户可以将新闻 url 分享到社交媒体，当用户在社交媒体上分享新闻网页时，我需要显示 title、description 和 image。每个网页都会有不同的新闻，所以我尝试使用 javascript 动态更改og:title、og:description，但它在 WhatsApp 和 Facebook 中不起作用。

这是我的 Javascript 代码：

document.querySelector('meta[property="og:title"]').setAttribute("content", title);
document.querySelector('meta[property="og:description"]').setAttribute("content", desc);

我用谷歌搜索了很多答案，说要使用server side rendering，但我不知道如何集成到这个基于 Javascript 的项目中。您的建议和想法将对我克服这个问题更有帮助提前谢谢

【问题讨论】：

标签： javascript html reactjs google-cloud-firestore

【解决方案1】：

您可能应该尝试通过创建一个新元素来做到这一点。

<script>
  var ogTitle = document.createElement('meta');
  ogTitle.setAttribute('property', 'og:title');
  ogTitle.content = title
  document.getElementsByTagName('head')[0].appendChild(ogTitle);
</script>

【讨论】：

我会尽力让你知道的，谢谢
它已添加到 html 文件中，但在 Facebook 共享中不起作用。 stackoverflow.com/a/34284383/9713119
你是否使用 Facebook 调试器清除缓存