nuxt 每个页面head标签内容设置

2024年2月7日 125次阅读 来源: 我的小英短

nuxt 每个页面head标签内容设置

导读

在前面几节课程中，我们已经完成对首页，jokes查询页，About页面的开发，接下来，我们来看一下每个页面的head标签
内容，我们会发现这三个页面的标签一致，而且和nuxt.config.js配置文件的head配置保持一致；

所以我们需要对这三个页面单独做一个head，更加方便于SEO优化，搜索引擎的爬取；

  1. 好，我们打开index.vue，编辑如下：
head(){ 
    return { 
      title: 'jokes home page',
      meta: [{ 
        hid: "description",
        name: "description",
        content: "this is funny jokes home page"
      },{ 
        hid: 'viewport',
        name: 'viewport',
        content: 'width=device-width, initial-scale=1.0'
      }]
    }
  },
  1. 我们再次打开jokes.vue，编辑如下：
head(){ 
    return { 
      title: 'jokes page',
      meta: [{ 
        hid: "description",
        name: "description",
        content: "funny jokes page"
      }]
    }
  },
  1. 打开about.vue，编辑如下：
head(){ 
    return { 
      title: 'about page',
      meta: [{ 
        hid: "page description",
        name: "description",
        content: "funny jokes about page"
      }]
    }
},

每次设置修改之后，我们都需要打开当前页面的源代码查看一下，服务端渲染新head标签内容是否生效；
在章节内容，我们将对本课程做一个详细的总结，回顾我们学习到的知识点，以及项目开发的流程；

    原文作者：我的小英短
    原文地址: https://blog.csdn.net/WU5229485/article/details/98955890
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞