hexo seo优化

Next主题自带SEO优化选项

hexo博客next提供了seo优化选项,在主题配置文件_config.yml中有个选项是seo,默认是false,改成true即开启了seo优化,会进行一些seo优化,如改变博文title等,然后相同文件下有个关键字选项keywords,填充上,写博文时最好每篇博文都加上keywords。hexo的根目录配置文件_config.yml中title、subtitle和description也建议填上。开启seo优化后可以查看网页源码跟之前有什么不同。

文章标题转换唯一链接

使用插件hexo-abbrlink可以做到,安装:

1
$ npm install hexo-abbrlink --save

然后hexo的根目录配置文件_config.yml中修改:

1
2
3
4
permalink: :abbrlink/
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: dec # 进制:dec(default) and hex

这样就确保了博文链接的唯一化,只要不修改md文件的abbrlink的值,url就永久不会改变。如此md文件名和文件内容也可以随便改了。这样也有利于SEO优化。

给出站链接添加 “nofollow” 标签

nofollow标签是由谷歌领头创新的一个“反垃圾链接”的标签,并被百度、yahoo等各大搜索引擎广泛支持,引用nofollow标签的目的是:用于指示搜索引擎不要追踪(即抓取)网页上的带有nofollow属性的任何出站链接,以减少垃圾链接的分散网站权重。

Hexo 的 Next 主题需要改以下几个地方:

找到footer.swig,路径在your-hexo-site\themes\next\layout\_partials,将下面代码中的a标签加上rel="external nofollow"属性;

1
{{ __('footer.powered', '<a class="theme-link" href="http://hexo.io">Hexo</a>') }}
1
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">

修改sidebar.swig文件,路径在your-hexo-site\themes\next\layout_macro,将下面代码中的a标签加上rel="external nofollow"属性;

1
<a href="{{ link }}" target="_blank">{{ name }}</a>

1
<a href="http://creativecommons.org/licenses/{{ theme.creative_commons }}/4.0" class="cc-opacity" target="_blank">

让百度收录你的站点

我们首先要做的就是让各大搜索引擎收录你的站点,我们在刚建站的时候各个搜索引擎是没有收录我们网站的,在搜索引擎中输入site:<域名>,来看我们的网站有没有被百度收录。我们可以直接点击下面的“网址提交”来提交我们的网站.

登录百度站长平台,只要有百度旗下的账号就可以登录,登录成功之后在站点管理中点击添加网站然后输入你的站点地址,建议输入的网站为www开头的,不要输入github.io的,因为github是不允许百度的spider爬取github上的内容的,所以如果想让你的站点被百度收录,只能使用自己购买的域名。或者用国内的coding。

选择完网站的类型之后需要验证网站的所有权,验证网站所有权的方式有三种:
文件验证、html标签验证、cname解析验证。注意:使用文件验证文件存放的位置需要放在source文件夹下,如果是html文件那么hexo就会将其编译,所以必须要加上的layout:false,这样就不会被hexo编译。(如果验证文件是txt格式的就不需要),其他两种方式也是很简单的。
我个人推荐文件验证和cname验证,cname验证最为简单,只需加一条解析就好~

给站点添加sitemap

我们需要使用npm自动生成网站的sitemap,然后将生成的sitemap提交到百度和其他搜索引擎

安装sitemap插件

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

在站点配置文件_config.yml中添加以下代码

1
2
3
4
5
# 自动生成sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

修改站点配置文件_config.yml

1
2
3
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite

Hexo编译

1
2
hexo clean
hexo g

生成sitemap.xml和baidusitemap.xml,重启hexo通过 http://localhost:4000/baidusitemap.xmlhttp://localhost:4000/sitemap.xml 查看该文件是否生成,其中sitemap.xml文件是搜索引擎通用的文件,baidusitemap.xml是百度专用的sitemap文件。

提交sitemap到站长平台

有两种提交方式,自动提交和手动提交,自动提交又分为主动推送、自动推送和sitemap.

如何选择链接提交方式

主动推送:最为快速的提交方式,推荐您将站点当天新产出链接立即通过此方式推送给百度,以保证新链接可以及时被百度收录。

自动推送:最为便捷的提交方式,请将自动推送的JS代码部署在站点的每一个页面源代码中,部署代码的页面在每次被浏览时,链接会被自动推送给百度。可以与主动推送配合使用。

sitemap:您可以定期将网站链接放到sitemap中,然后将sitemap提交给百度。百度会周期性的抓取检查您提交的sitemap,对其中的链接进行处理,但收录速度慢于主动推送。

手动提交:一次性提交链接给百度,可以使用此种方式。

从效率上来:主动推送>自动推送>sitemap

主动推送

安装插件

1
npm install hexo-baidu-url-submit --save

然后再根目录的配置文件中新增字段

1
2
3
4
5
baidu_url_submit:
count: 100 # 提交最新的一个链接
host: www.cherryblog.site # 在百度站长平台中注册的域名
token: 8OGYpxowYnhgVsUM # 请注意这是您的秘钥, 所以请不要把博客源代码发布在公众仓库里!
path: baidu_urls.txt # 文本文档的地址, 新链接会保存在此文本文档里

在加入新的deploye

1
2
deploy:
- type:baidu_url_submitter

这样执行hexo deploy的时候,新的链接就会被推送了

自动推送

在主题配置文件下设置,将baidu_push设置为true:

1
2
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

然后就会将一下代码自动推送到百度,位置是themes\next\layout_scripts\baidu_push.swig,这样每次访问博客中的页面就会自动向百度提交sitemap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if theme.baidu_push %}
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
{% endif %}

添加蜘蛛协议 robots

新建robots.txt文件,添加以下文件内容,把robots.txt放在hexo站点的source文件下

1
2
3
4
5
6
7
8
9
10
11
12
# hexo robots.txt
User-agent: * Allow: /
Allow: /archives/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: 域名/sitemap.xml
Sitemap: 域名/baidusitemap.xml

然后去百度站长平台检测robots文件看看有没有生效

hexo目录结构

默认目录结构:

1
2
3
4
5
6
7
8
9
10
11
.
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
| ├── _drafts
| └── _posts
├── themes
├── _config.yml
└── package.json
  • deploy:执行hexo deploy命令部署到GitHub上的内容目录

  • public:执行hexo generate命令,输出的静态网页内容目录

  • scaffolds:layout模板文件目录,其中的md文件可以添加编辑

  • scripts:扩展脚本目录,这里可以自定义一些javascript脚本

  • source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录

    • drafts:草稿文章

    • posts:发布文章

  • themes:主题文件目录

  • _config.yml:全局配置文件,大多数的设置都在这里

  • package.json:应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮

主题结构:

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
├── .github #git信息
├── languages #多语言
| ├── default.yml #默认语言
| └── zh-Hans.yml #简体中文
| └── zh-tw.yml #繁体中文
├── layout #布局,根目录下的*.ejs文件是对主页,分页,存档等的控制
| ├── _custom #可以自己修改的模板,覆盖原有模板
| | ├── _header.swig #头部样式
| | ├── _sidebar.swig #侧边栏样式
| ├── _macro #可以自己修改的模板,覆盖原有模板
| | ├── post.swig #文章模板
| | ├── reward.swig #打赏模板
| | ├── sidebar.swig #侧边栏模板
| ├── _partial #局部的布局
| | ├── head #头部模板
| | ├── search #搜索模板
| | ├── share #分享模板
| ├── _script #局部的布局
| ├── _third-party #第三方模板
| ├── _layout.swig #主页面模板
| ├── index.swig #主页面模板
| ├── page #页面模板
| └── tag.swig #tag模板
├── scripts #script源码
| ├── tags #tags的script源码
| ├── marge.js #页面模板
├── source #源码
| ├── css #css源码
| | ├── _common #*.styl基础css
| | ├── _custom #*.styl局部css
| | └── _mixins #mixins的css
| ├── fonts #字体
| ├── images #图片
| ├── uploads #添加的文件
| └── js #javascript源代码
├── _config.yml #主题配置文件
└── README.md #用GitHub的都知道

域名解析 git

A记录的记录值就是ip地址,github(官方文档)提供了两个IP地址,192.30.252.153和192.30.252.154,这两个IP地址为github的服务器地址,两个都要填上.

解析记录设置两个www和@,线路就默认就行了,CNAME记录值填你的github博客网址

在自己的Hexo\source目录下创建一个CNAME文件,注意不带后缀的,打开后,里面写入自己的域名地址,如:www.xxxxx.com

hexo-wordcount阅读时长

安装wordcount插件

1
npm install hexo-wordcount --save

主要功能:
字数统计:WordCount
阅读时长预计:Min2Read
总字数统计: TotalCount

安装完插件之后在主题的配置文件中开启该功能就可以~,如果仅仅只是打开开关,部署之后会发现文章的【字数统计】和【阅读时长】后面没有对应的xxx字,xx分钟等字样,只有光秃秃的数字在那里.

解决方案

找到Blog\themes\next\layout\_macro\post.swig 文件

  • 字数统计
1
2
3
<span title="{{ __('post.wordcount') }}">
{{ wordcount(post.content) }}
</span>
1
2
3
<span title="{{ __('post.wordcount') }}">
{{ wordcount(post.content) }}
</span>
  • 阅读时长
1
2
3
<span title="{{ __('post.min2read') }}">
{{ min2read(post.content) }}
</span>

添加 “分钟”到min2read(post.content) }} 后面,修改后为:

1
2
3
<span title="{{ __('post.min2read') }}">
{{ min2read(post.content) }} 分钟
</span>

添加 “字”到wordcount(post.content) }} 后面,修改后为:

再次运行,就能得到正常的如“字数统计 100字”“阅读时长 6分钟”这样的样式了

添加动态titile —崩溃欺骗

新建js文件并添加如下代码,放在\themes\next\source\js\src文件目录下引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--崩溃欺骗-->
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/img/TEP.ico");
document.title = '╭(°A°`)╮ 页面崩溃啦 ~ | 量子广告!';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/favicon.ico");
document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitile;
titleTime = setTimeout(function () {
document.title = OriginTitile;
}, 2000);
}
});

压缩优化

1
2
3
npm install --global gulp-cli //按照全局gulp
npm install gulp --save-dev //cd进入项目根目录,安装gulp
npm install gulp-shell gulp-clean gulp-minify-html gulp-minify-css gulp-uglify gulp-notify --save-dev //安装插件

新建gulpfile.js文件放到根目录

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
var gulp = require('gulp'),
clean = require('gulp-clean'),
minifyCss = require('gulp-minify-css'),
minifyHtml = require('gulp-minify-html'),
uglify = require('gulp-uglify'),
notify = require('gulp-notify'),
shell = require('gulp-shell');
//清空dest文件夹
gulp.task("clean",function() {
return gulp.src("./dst/*")
.pipe(clean());
});
// 压缩css文件,已压缩文件不用再压缩
gulp.task("css",function() {
return gulp.src(["public/**/*.css","!public/**/*.min.css"])
.pipe(minifyCss({compatibility: "ie8"}))
.pipe(gulp.dest("./dst/"));
});
// 压缩js文件
gulp.task("js",function() {
return gulp.src(["public/**/*.js","!public/**/*.min.js"])
.pipe(uglify())
.pipe(gulp.dest("./dst/"));
});
// 压缩html文件
gulp.task("html",function() {
return gulp.src("public/**/*.html")
.pipe(minifyHtml())
.pipe(gulp.dest("./dst/"));
});
// 设置默认任务,command line下输入gulp执行
// clean任务执行完成了才会去运行其他的任务,在gulp.start()里的任务执行的顺序是不确定的,所以将要在它们之前执行的任务写在数组里面
gulp.task("default",['clean'],function() {
gulp.start('css', 'js', 'html');
});
// det文件复制到public
gulp.task("mv",function() {
return gulp.src("./dst/*")
.pipe(shell([
"cp -r ./dst/* ./public/"
]));
});

执行命令gulp,压缩代码到dst
执行命令gulp mv,将压缩后的代码复制到public

-------------本文结束感谢您的阅读-------------