Nuxt.js head 函数在文章中不起作用

Question

我正在尝试向 WordPress 托管的博客的每篇文章添加一些开放图谱标签。 当我运行“npm run dev”时，此代码可以正常工作，但是当我运行“npm rungenerate && firebase deploy”时，此代码不会执行相同的操作。

这是我正在使用的代码：

head() {
return {
  title: 'This',
  meta: [

    {
      hid: `og:description`,
      name: 'og:description',
      content: 'title'
    },
    {
      hid: `og:title`,
      name: 'og:title',
      content: 'title'
    }
  ]
}

在我的 nuxt.config.js 中，我在头部配置了以下内容

head() {
 return { 
  title: 'That',
  meta: [
  {
    hid: `og:description`,
    name: 'og:description',
    content: '3'
  },
  {
    hid: `og:title`,
    name: 'og:title',
    content: '4'
  }
]
}

在文章中，显示的标题是“This”，但是元显示的是 nuxt.config.js 中的内容（“3”，“4”）而不是（“title”，“title”）

我想获取的是SSR中第一篇文章的meta标签。

Answer 1

我的问题是使用

spa

（单页应用程序）模式而不是

universal

。

我的工作设置在

nuxt.config.js

:

export default {
  mode: 'universal', // changed from mode: 'spa'
  ...
}

Answer 2

我会尝试使用 nuxt-seo 包。它增加了对设置最常见社交媒体标签的全面支持，包括为每个文章/页面自动生成规范标签。

您可以查看文档网站，其中有完整的nuxt博客示例。

在项目中安装

nuxt-seo

包后，将其添加到您的

nuxt-config.js

文件中：

{
  modules: [
    'nuxt-seo'
  ],
  seo: {
    // Module Options
  }
}

然后在每篇文章/页面上，您可以设置页面特定标题、描述和几乎任何其他元标记：

<template>
  <h1>Hello World</h1>
</template>

<script>
  export default {
    head({ $seo }) {
      return $seo({
        title: 'Home Page',
        description: 'Hello World Page',
        keywords: 'hello, world, home',
      })
    }
  }
</script>

PS：我是

nuxt-seo

包的维护者。

Answer 3

我花了 3 天的时间，尝试了所有以前的 nuxt 版本和替代 seo 模块，但没有帮助。这不是来自 nuxt，如果您已经开始为您的 nuxt 项目进行 seo 优化，这意味着您可能有很多

<client-only>

，所以请找到所有这些并检查里面是否有

<nuxt />

。

我建议检查模板文件中的

<nuxt />

并将

<client-only>

不要放在整个模板中，而只放在必要的组件中。

这个问题与

ssr: true

或

mode: 'universal'

无关，实际上只有1个原因是

<nuxt />

里面的

<client-only><nuxt /></client-only>

修复它并享受 nuxt 的乐趣！