VuePress的SEO优化教程、指南与方法
本文阅读重点 <
1 VuePress的SEO优化教程、指南与方法
2 提交到各大搜索引擎的站长管理后台中
3 优化url
4 meta优化
5 添加sitemap
6 增加robots.txt文件
7 增加feed
8 自动推送到百度
9 给文章页添加面包屑导航
10 站内优化
11 添加社交分享组件
12 外链建设
13 给外部链接加上nofollow
14 移动端优化
15 PWA优化
16 页面中的img标签都加上alt
17 高阶技巧：使用JSON-ld结构化数据
18 SEO得分: 97
真不是沪小羊吹啊，Google给沪小羊的vuepress网站的SEO水平打97分。
不少人经常提到vuepress自带强大的seo，其实与其他静态网站生成器相比，vuepress除了PWA做得好一点，SEO方面基本上也没啥优势了。外观上与gitbook相似~
今天，沪小羊来细说该vuepress该怎么进行SEO优化~
本人的Vuepress站点 - 大白的故事 | https://dbdgs.cn，优化前的SEO得分: 69。
提交到各大搜索引擎的站长管理后台中
百度站长: https://ziyuan.baidu.com
Bing站长: https://www.bing.com/webmasters
Google: <https://search.google.com/search-console>
提交比较简单，不清楚的朋友自行搜索，这里就不展开了。
优化url
对于新站而言，扁平化的url爬虫爬到的可能性比较大，
比如:
我的vuepress站点的文章url是: dbdgs.cn/postname.html这种形式。
具体操作，就是在markdown的frontmatter中把 permanentlink 设置成相对路径即可。
比如:
我有个文件名是 00.CSS教程和技巧收藏.md的markdown 文件，
当设置 permalink: /css-tips.html 时，发表后对应的url就会是 https://dbdgs.cn/css-tips.html 。
另外, url中尽量不要出现#、?等特殊字符，尽量不要出现大写字母。
meta优化
使用插件 webmasterish/vuepress-plugin-autometa 可以自动生成meta标签及其内容，包括 meta keywords, meta description, open graph (比如: og:img 等) 以及Twitter card, facebook card等。
首先，需要自行如下命令:
代码语言：javascript复制npm install -D vuepress-plugin-autometa安装插件。
然后修改 docs.vuepress 路径下的 config.js 文件。
在 config.js 文件开头加入代码:
代码语言：javascript复制const autometa_options = {
site: {
name: 'Bravo Yeung',
twitter: 'yanglr',
},
canonical_base: 'https://dbdgs.cn',
};然后，在config.js 的 plugins区域加入:
代码语言：javascript复制 ['autometa', autometa_options],添加sitemap
sitemap可以通过另一个常用的插件vuepress-plugin-sitemap来实现。
安装方法是执行如下命令:
代码语言：javascript复制npm install vuepress-plugin-sitemap接着需要打开config.js, 在config.js 的 plugins区域加入:
代码语言：javascript复制['sitemap', {
hostname: "https://dbdgs.cn",
// 排除无实际内容的页面
exclude: ["/404.html"]
}
]等构建完毕后，访问 https://dbdgs.cn/sitemap.xml 就能看到了~
增加robots.txt文件
robots.txt的增加就不需要插件了，只需要找到你vuepress中部署时相应的public文件夹，然后创建robots.txt文件即可。
比如我的相应目录是 .docs.vuepresspublic，我创建了的robots.txt文件内容如下:
代码语言：javascript复制Sitemap: https://dbdgs.cn/sitemap.xml
User-agent: *增加feed
可以基于插件 webmasterish/vuepress-plugin-feed 来做。
安装方法:
代码语言：javascript复制npm install -D vuepress-plugin-feed需要注意的是:
_posts文件夹以外地方的markdown文件，都需要加上下面的配置才能确保出现在 rss.xml中。
feed:
enable: true后面发布时，就能自动生成feed了。
自动推送到百度
安装vuepress-plugin-baidu-autopush插件，
npm install -D vuepress-plugin-baidu-autopush然后更新配置文件.vuepress/config.js中的plugins部分:
module.exports = {
plugins: [
'vuepress-plugin-baidu-autopush'
]
};给文章页添加面包屑导航
面包屑导航，Google、百度都会在爬虫抓取时使用。
页面的面包屑导航如果符合微数据 Breadcrum 格式，是会显著提示访问流量的，下厨房网站的案例可以参考，代码可以直接模仿之。
面包屑导航，百度是有专门的专利的 - CN103714093A - 一种网站重点页面的挖掘方法及装置, 于2012年发表。
站内优化
常见的有: 上一篇、下一篇，相关文章~
添加社交分享组件
这个有现成的插件，github上有。沪小羊就不具体展开了。
外链建设
gitalk, 利用github issues可产生github外链。 csdn/博客园/掘金/51cto/SegmentFault/新浪博客等等的外链都可以弄一些。
具体方法是：到相应网站发文章的摘要和目录部分，末尾加上详细内容参考https://www.geekzl.com/weibo-link-whitelist.html 这样的具体文章链接。
给外部链接加上nofollow
据vuepress的 官方文档 可知，markdown.externalLinks的默认值为: { target: '_blank', rel: 'noopener noreferrer' } , 而我们需要加上nofollow，修改config.js中对应的选项 markdown -> externalLinks 即可，这里只需在合适的地方加上nofollow，如下图~
移动端优化
head中增加如下两行，已加的话就不用重复加了~
代码语言：javascript复制<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">PWA优化
增加manifest.webmanifest文件
https://dbdgs.cn/manifest.webmanifest
页面中的img标签都加上alt
img加上alt可替换文字是很必要的，防止img无法加载时，也能起到描述图片的功能。
高阶技巧：使用JSON-ld结构化数据
Google推荐向页面的<head>中加入json-ld代码。
在 Layout.vue组件 的 Created() 方法中加入如下代码:
var siteUrl = this.$site.themeConfig.domain;
if (typeof this.$ssrContext !== "undefined") {
var pageTitle = this.$page.title ? this.$page.title.toString().replace(/["|'|\]/g, '') : null;
var imageUrl = this.$page.frontmatter.image ? this.$page.frontmatter.image : 'https://cdn.jsdelivr.net/gh/dbdgs/images@main/dabai.jpg';
var siteName = this.$site.title || null;
var publishedTime = dayjs(this.$page.frontmatter.date).toISOString() || dayjs(this.$page.lastUpdated).toISOString() || moment().toISOString();
var modifiedTime = dayjs(this.$page.lastUpdated).toISOString() || moment().toISOString();
var pageUrl = siteUrl this.$page.path;
var pageType = this.$page.path.length <= 1 ? 'website' : 'article' ;
// var author = this.$site.themeConfig.personalInfo ? this.$site.themeConfig.personalInfo : null;
const data =
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "ImageObject",
"@id": imageUrl,
"inLanguage": "zh-CN",
"url": imageUrl,
"width": 266,
"height": 266,
"caption": pageTitle " - " siteName
},
{
"@type": "WebPage",
"@id": pageUrl,
"url": pageUrl,
"name": this.$title,
"isPartOf": {
"@id": siteUrl,
"name": siteName
},
"primaryImageOfPage": {
"@id": siteUrl,
"name": siteName
},
"datePublished": publishedTime,
"dateModified": modifiedTime,
"description": this.$description,
"inLanguage": "zh-CN",
"potentialAction": [
{
"@type": "ReadAction",
"target": [
pageUrl
]
}
]
},
{
"@type": pageType,
"@id": pageUrl,
"isPartOf": {
"@id": pageUrl
},
"author": {
"@id": siteUrl,
"name": siteName
},
"headline": this.$title,
"datePublished": publishedTime,
"dateModified": modifiedTime,
"commentCount": 30,
"publisher": {
"@id": siteUrl,
"name": siteName
},
"image": {
"@id": imageUrl
},
"articleSection": this.$title,
"inLanguage": "zh-CN",
"potentialAction": [
{
"@type": "CommentAction",
"name": "Comment",
"target": [
pageUrl
]
}
]
},
{
"@type": "Person",
"@id": siteUrl,
"name": siteName
},
{
"@context": "https://schema.org/",
"@type": "Recipe",
"name": this.$description,
"description": this.$description,
"author": {
"@type": "Person",
"name": siteName
},
"image": [
imageUrl
],
"url": pageUrl,
"recipeIngredient": [
"第1步",
"第2步",
"第3步",
"第4步"
],
"recipeInstructions": [
{
"@type": "HowToStep",
"text": "第1步",
"url": pageUrl "#step-1"
},
{
"@type": "HowToStep",
"text": "第2步",
"url": pageUrl "#step-2"
},
{
"@type": "HowToStep",
"text": "第3步",
"url": pageUrl "#step-3"
}
],
"datePublished": publishedTime,
"@id": pageUrl,
"isPartOf": {
"@id": siteUrl
},
"mainEntityOfPage": siteUrl
}
]
};
//creating the script element and storing the JSON-LD
var my_jsonld = 'n<script type="application/ld json">n' JSON.stringify(data, null, 2) "n</script>n";
this.$ssrContext.userHeadTags = my_jsonld;
}即可。
SEO得分: 97
Google的 https://web.dev/measure/ 或 lighthouse插件给出的SEO得分从69变成现在的97。
5 / 5 ( 5 votes )
