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