Facebook graph api 开放图反应元信息

某个链接（例如博客帖子链接）的我的OG元信息来自数据库（例如博客帖子加载需要一段时间）

我正在使用Vue+Nuxt和SSR，以及Axios来加载博客文章

因为axios是异步的，所以我的页面元素会在帖子到来之前加载。与此同时，facebook已经读取了“虚拟”元数据

---

我不希望预渲染，我希望尽可能保持数据的动态性。有解决方法吗？

为了让爬虫程序读取正确的元数据，它应该在服务器的html响应中出现。这是实施SSR的主要原因

换句话说，在服务器上呈现html时，博客文章数据应该在应用程序中可用。它不是特定于Nuxt的，而是当今爬虫解析页面内容的方式

如果您在通用模式或生成模式下使用Nuxt，它将在页面组件中为此类情况提供

asyncData

和

fetch

挂钩

页面组件的简单解决方案示例：

export default {
  async asyncData ({ app, params }) {
    try {
      const { data: { post } } = await app.$axios.get(`/api/post/${params.postSlug}`) // or any app specific url format
      return {
        post
      }
    } catch (error) {
      // handle case when no blog post is found, etc
    }
  },
  head () {
    return {
       title: this.post.title,
       meta: [
         { hid: 'og-title', property: 'og:title', content: this.post.title },
       ]
    }
  },
  // Other component's options: data, methods, etc.
}

之后，post数据将通过

this.post

这将确保爬虫程序使用的内容与页面相关

在解析页面内容之前，没有可靠且通用的方法强制爬虫程序等待页面内容生成。这也是Nuxt.js和其他SSR框架试图实现的主要目标