时间戳

首页 > 解决方案 > 元标记在 Nuxt.js 应用程序的页面源中无法正确显示

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

问题描述

我试图了解为什么当我单击“查看页面源代码”时不显示正确的标题和元标记。显示的是我的 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 文件中提取的。

在此处输入图像描述

但是，当我检查元素时，我在 head 部分得到了正确的元标记。在此处输入图像描述

谁能解释我做错了什么？为了 SEO 目的，我需要页面特定的标题和页面特定的元标记出现在页面源中。

标签： vue.jsnuxt.js

解决方案

我个人没用过Nuxt，但是有没有可能因为你是在本地开发，所以你没有体验到Nuxt的SSR部分，而只是动态渲染部分？

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

推荐阅读