开放图谱反应元信息

Question

我的某个 link（例如博客 post link）的 OG 元信息来自数据库（例如博客 post 需要一段时间才能加载） .

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

由于 axios 是异步的，我的页面元素在 post 进来之前加载。与此同时，facebook 已经读取了 "dummy" 元数据。

我不想进行预渲染，我希望让我的数据尽可能保持动态。有解决办法吗？

Answer 1

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

换句话说，博客 post 数据在 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 框架试图实现的主要目标。

开放图谱反应元信息

Open Graph reactive meta info

facebook-graph-api

vue.js

axios

nuxt.js