Nuxt.js头部功能在文章中不起作用

Question

我正在尝试为托管在Wordpress中的博客的每篇文章添加一些Open Graph标签。当我运行"npm run dev"时，这段代码是有效的，但是当我运行"npm run generate && 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 中文章一的元标记。

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包的维护者。