Question

我某个链接（例如博客文章链接）的OG元信息来自数据库（例如，博客文章需要一段时间才能加载）。

我正在使用带有SSR的Vue + Nuxt和Axios来加载博客文章。

由于axios是异步的，因此我的页面元素将在帖子发表之前加载。与此同时，facebook已经读取了“虚拟”元数据。

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

Answer 1

为了使搜寻器能够读取正确的元数据，应在服务器的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.
}

之后，发布的数据将通过this.post

提供

这将确保搜寻器消耗的内容与页面相关。

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

打开图反应元信息

1 个答案: