Javascript 如何从Vuejs应用程序在社交媒体中共享？

我正在使用vue社交共享库在社交媒体上进行共享，它运行良好，但我遇到的唯一问题是我无法在Facebook上共享我的文章标题、描述和图像。当我按下facebook共享按钮时，它会共享我的网站图片标题和og:description，而不是我的特定文章

var SocialSharing = require('vue-social-sharing');
Vue.use(SocialSharing);

<social-sharing url="https://vuejs.org/"
  title="The Progressive JavaScript Framework"
  description="Intuitive, Fast and Composable MVVM for building interactive interfaces."
  quote="Vue is a progressive framework for building user interfaces."
  hashtags="vuejs,javascript,framework"
  twitter-user="vuejs"
  inline-template>
<network network="facebook">
  <i class="fa fa-facebook"></i> Facebook
</network>
<network network="twitter">
  <i class="fa fa-twitter"></i> Twitter
</network>

var SocialSharing=require（'vue-social-sharing'）；
Vue.使用（社会共享）；
脸谱网
啁啾

你不能。Facebook还没有放弃javascript。查看预渲染或服务器端渲染。

我还没有尝试过，但我非常确定动态更改元数据可能会有所帮助。尝试使用或仅使用普通Js：

var metaList = document.getElementsByTagName("META");
 metaList[0].setAttribute("content","noarchive");

然后使用Facebook的JavaScript SDK重新解析页面上的XFBML：

要重新解析页面上的所有XFBML，可以调用：

FB.XFBML.parse()

或者，要仅计算文档的一部分，可以传入单个元素

FB.XFBML.parse(document.getElementById('foo'));

---

我认为最方便的解决方案是：

A） 要使用边缘工作程序（例如AWS或CloudFlare提供的功能），您可以捕获特定的用户代理（bot），并仅将其返回静态HTML（甚至可以是一个空的主体，只需要所需的元标记）。对于其他人，您只是让请求通过，而不在边缘进行计算，这样就可以提供正常的内容。本文进一步详细解释了该方法

如果您托管在Firebase上，则可以使用来实现动态元标记。这是一个极好的例子

B）使用一个无服务器功能，该功能可以启动一个无头浏览器实例（如Puppeter）并用它捕捉屏幕截图。Zeit甚至对此有自己的看法

---

请注意，这两个选项都使用

Puppeter core

来保持尽可能低的最终捆绑包大小和性能

Facebook不允许传递标题和描述（它通过url中的og标记自行检索），检查文档：我知道facebook通过og标签检索这些文档，但我如何从我的网站上分享一辆带有汽车图片和标题的汽车呢。我曾尝试使用javascript修改og标记，但facebook crowler不会等待js脚本加载，因此无法看到更改。我知道预渲染，但它不适用于动态页面，例如具有不同id的页面。对于nuxt.js，我无法在nuxt.js上重写整个项目，因为该项目现在已经很大了。我只是想有没有其他的替代方法可以做到这一点。你不需要为服务器端渲染重写整个项目。您更改了一些基本配置，并对每页进行了一些其他调整。@BernardDoc您是否找到了解决方案？我有很多动态页面（工作板），我不能只预渲染每一个页面page@jeand“arme解决这个问题的唯一方法是通过SSR。执行SSR最简单的方法是使用nuxt.js，或者如果您的项目已经在进行中，您可以尝试进行一些配置，例如：@jeand'arme我尝试过的解决方案之一，它在php laravel中使用htaccess运行良好。我已经在htaccess中重定向了特定的传入请求，以转到带有所需元标记的空html页面。这种方法对我来说很好，但我认为正确的方法仍然是使用SSR。