元标记在Nuxt.js应用的页面源中无法正确显示

Question

我试图理解为什么当我单击“查看页面源代码”时没有显示正确的标题和元标记。显示的是我的nuxt.config.js文件中的元标记信息。

如何从特定页面获取元数据以显示在页面源中？我需要此用于SEO。

这是我的pages / index.vue文件

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  head () {
    return {
      title: "this is the page specific title",
      meta: [
        { hid: 'description', name: 'description', content: 'Page 1 description' }
      ]
    }
  }
}
</script>

这是我的nuxt.config.js文件（我只是在发布具有默认标题和元标记的部分：

module.exports = {
  mode: "universal",
  head: {
    title: "this is the nuxt.config title",
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'keywords', content: 'keyword 1, keyword 2' },
      { hid: 'description', name: 'description', content: 'This is the generic description.' }
    ],
  },

这是页面源标题和元标记。如您所见，它是从nuxt.config.js文件而不是index.vue文件中提取的。

但是，当我检查元素时，我在头部获得了正确的元标记。

有人可以解释我在做什么错吗？为了进行SEO，我需要页面特定的标题和页面特定的元标记显示在页面源中。

Answer 1

我还没有亲自使用Nuxt，但是由于您是在本地开发的，因此您可能不会体验Nuxt的SSR部分，而不会体验动态渲染部分吗？

如果尝试构建应用程序（如果Nuxt遵循标准做法，可能会使用npm run build，并查看已构建的index.html文件，它是否具有您期望的<title>？