Question

任何人都可以帮助解决有关具有动态数据的元信息的问题。

问题

我们正在使用Nuxt并使用npm run generate生成我们的静态页面，并确定了此方法的几个问题：

打开图和Twitter元标记无法动态更新，因为爬虫不运行JS
详细信息页面仅生成一次，并且因此在用户导航之前没有任何相关数据使用网址参数访问该页面（例如
example.com/cars/details?make=Audi&model=A6&carID=133852），然后提要数据的AJAX GET请求

所需结果

打开每个汽车详细信息页面特有的图形，Twitter和其他元标记。

问题

是否可以仅使用生成的静电来实现所需的结果？如果不是这样，那么使用SSR或服务器端生成的元内容的过程将是什么样？

我们的dist文件夹结构当前为：

dist/
  ├ index.html
  ├ cars/
    ├ index.html
    └ details/
      ├ index.html
      └ payment/
        └ index.html

汽车页面，其中包含汽车列表

详细信息，单击汽车可导航到所选汽车的详细信息页面

付款购车页面

Answer 1

否，在提供预渲染的静态HTML时将无法提供动态元标记。

以universal模式运行Nuxt使得可以从API中获取页面数据（通过fetch，asyncData或nuxtServerInit action），生成页面的HTML内容（包括动态元标记）并将其提供给用户。

带有SSR的简单用法示例：

export default {
  async asyncData ({ query, store }) {
    const { make, model, cardID } = query
    // Validate query params

    // fetch data from API
    try {
      const carDetails = await store.dispatch('getCardInfo', { make, model, cardID })
      return {
         cardDetails
      }
    } catch (error) {
      // Redirect to error page or 404 depending on server response
    }
  },
  head () {
    return {
      title: this.carDetails.title,
      meta: [
        { hid: 'og-title', property: 'og:title', content: this.carDetails.title },
        // other meta
      ]
    }
  }
}

这将确保在呈现组件之前加载页面数据，并将包含有效的meta标签以供搜索引擎使用。

旁注：您可能不希望使用查询参数，而是要检查dynamic routes，它对于SEO以及用户友好的URL（例如example.com/cars/audi/a6/133852）要好得多

Nuxt.js的动态元

1 个答案: