Nuxt 配置meta内所有seo标签，同时共用给所有vue组件的噢

前言

 优点：一次性配置，多组件共用。
 步骤很简单：在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",
      },
    ],
  },

};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

效果展示

                      首页

                     子页面

后话

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