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