動態更改 Javascript 項目中的 og 元標記以進行社交媒體共享

Question

我是本地 android 應用程序開發人員，正在嘗試使用 Firestore 開發新聞 web 網站。 我從friendlyeats-web學會了開發web 站點我遵循相同的結構一切順利，開發部分幾乎完成。

用戶可以將新聞 url 分享到社交媒體，當用戶在社交媒體上分享新聞 web 頁面時，我需要顯示標題、描述和圖像。 每個 web 頁面都會有不同的新聞，所以我嘗試使用 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 的項目中。 您的建議和想法將對我克服這個問題更有幫助提前謝謝

Answer 1

您可能應該嘗試通過創建一個新元素來做到這一點。

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