前言
优点：一次性配置，多组件共用。
步骤很简单：在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", }, ], },};效果展示
首页
子页面
后话
后续如果还有更多干货会持续更新，只要有整理很快就会发布，希望对你有所帮助，感谢阅读。