Nuxt 所有页面都设置上SEO相关标签

前言

 优点：一次性配置，多组件共用。
 步骤很简单：在nuxt.config.js中进行配置，配置完所有组件的head标签内都共用一套seo优化配置，非常的奈斯。

代码展示

export default {
    
  head: {
    
    title: "网易云音乐",
    htmlAttrs: {
    
      lang: "en",
    },
    meta: [
      {
     charset: "utf-8" }, // 字节编码
      {
     "http-equiv": "X-UA-Compatible", content: "IE=edge,chrome=1" }, // 浏览器优先打开谷歌和edge
      {
     "http-equiv": "Cache-Control", content: "no-transform" }, 
      {
    
        name: "viewport",  // 禁止移动端缩放
        content:
          "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no",
      },
      {
    
        name: "author", // 网站作者
        content: "网易云音乐",
      },
      {
    
        name: "keywords",  // 网站关键字
        content:
          "网易云音乐，音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，music.163.com",
        hid: "keywords",
      },
      {
    
        hid: "description",  // 网站描述
        name: "description",
        content:
          "网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。",
      },
      {
     name: "format-detection", content: "telephone=no" },
      // og是一种新富媒体对象，简言之就是新seo优化手段
      {
     property: "og:title", content: "网易云音乐" }, // 网站标题
      {
    
        property: "og:image", // 网站logo图
        content: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
      },
      {
     property: "og:type", content: "website" }, // 类型为网站
      {
     property: "og:url", content: "https://www.baidu.com/" }, // 网站首页
      {
     property: "og:site_name", content: "网易云音乐" }, // 网站名称
    ],
    link: [
      {
    
        rel: "icon",
        type: "image/x-icon", // 网站名称旁边的小logo,例如csdn的图标c
        href: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
      },
    ],
  },

};

效果展示

                      首页

                     子页面

后话

  后续如果还有更多干货会持续更新，只要有整理很快会就发布，希望对你有所帮助，感谢阅读。