Vue JS 中的开放图元标签不显示图像

Question

我设计了一个博客，我希望在分享到社交网络时，预览图像会像在Medium 的帖子中一样显示

<meta property="og:image" content="https://medium.com/js-dojo/getting-your-head-around-vue-js-scoped-slots-281bf82a1e4e"/>

我使用带有 webpack 和 vue-meta 的 vuejs2 来更改我帖子的动态图像。但是对于 Facebook，即使我将它们放在 index.html 中也不起作用。

我在medium上找到这篇文章，说必须使用Server Side Rendered，但没有说如何从具有基本配置（没有SSR）的完全设计的项目迁移到解决问题的项目。架构已经不同了，我没有参考

这是我的代码vue-meta

metaInfo () {
  return {
    title: '41devs | blog',
    titleTemplate: '%s - le titre',
    meta: [
      {name: 'viewport', content: 'user-scalable=no'},
      {property: 'og:title', content: 'title'},
      {property: 'og:type', content: 'article'},
      {property: 'og:url', content: 'http://c5e3b0ec.ngrok.io/blog/s'},// here it is just ngrok for my test
      {property: 'og:description', content: 'description'},
      {property: 'og:image', content: 'https://firebasestorage.googleapis.com/v0/b/dev-blog-2503f.appspot.com/o/postsStorage%2F-KxXdvvLqDHBcxdUfLgn%2Fonfleck?alt=media&token=24a9bf5b-dce2-46e8-b175-fb63f7501c98'},
      {property: 'twitter:image:src', content: 'https://firebasestorage.googleapis.com/v0/b/dev-blog-2503f.appspot.com/o/postsStorage%2F-KxXdvvLqDHBcxdUfLgn%2Fonfleck?alt=media&token=24a9bf5b-dce2-46e8-b175-fb63f7501c98'},
      {property: 'og:image:width', content: '1000'},
      {property: 'og:site_name', content: '41devs | blog'}
    ]
  }
}

Answer 1

当 Facebook 检查您的页面以查找元数据时，他们不会运行您的 Javascript。Vue 永远不会运行，你的标签永远不会被替换。这是 Facebook 爬虫的一个限制。

这意味着您确实必须在服务器级别渲染这些标签，无论是通过 Vue 的服务器端渲染还是通过其他方法（我不知道您正在运行什么类型的服务器）。但是是的，最终，您必须能够将此值硬编码到您的服务器响应中，否则它不会显示在 Facebook 中。