vue nuxt.js head()设置SEO页面三要素无效的解决办法

最新推荐文章于 2025-02-25 15:36:52 发布

怼怼你

最新推荐文章于 2025-02-25 15:36:52 发布

阅读量2k

点赞数 2

分类专栏： nuxt SEO 文章标签： vue

本文链接：https://blog.csdn.net/qq_40225369/article/details/118733739

版权

nuxt 同时被 2 个专栏收录

3 篇文章

订阅专栏

SEO

2 篇文章

订阅专栏

本来nuxt自带了head() 方法，可以设置路由页面的title, content, keywords, 但是我们项目不知道为什么，有些页面源代码就生成了meta标签，而有些页面就没有，而且发现生成了的页面meta标签在加载css文件之前，没有生成的在加载css文件之后

这个是生成了的
在这里插入图片描述

这个是没生成的

在这里插入图片描述

虽然找到了一点不同，但是还是没找到原因，如果有知道原因的兄弟可以告诉我一声，虽然我不知道原因，但是我找到了解决办法

解决办法： nuxt中有一个asyncData方法，可以在里面设置本页面的title，content,keywords

async asyncData({ app, req, query, params }) {
    app.head.title = "";
    app.head.meta = [
        {
          name: "keywords",
          content: "",
        },
        {
          name: "description",
          content:
            "",
        },
      ];
 }