背景
前几天写了一篇关于博客在google搜索引擎上的优化,发现通过gis90 + 标题,还是可以搜出来的,但是直接通过标题去🔍搜索,还是搜不到什么东西,还得继续优化啊。
上网继续查资料,整理到一起。
正文
本文总结了主要从文章的关键字、url、配置等方面进行优化,提高搜索度。
关键字
打开每一篇博客,增加keywords、desc,增加文章的搜索匹配,代码如下:1
2
3
4
5
6
7
8
9
10
11
12
13---
title: Hexo+Next搜索优化(二)博客优化
comments: false
categories:
- [seo优化]
- [Hexo]
tags: [Hexo, seo优化]
top: false
date: 2019-04-27 19:44:22
updated: 2019-04-27 19:44:22
desc: Hexo+Next搜索优化(二)博客优化
keywords: hexo, seo, google, 搜索
---
附加
- 可以打开blog/scaffolds/post.md文件,修改代码如下,一劳永逸。
1
2
3
4
5
6
7
8
9
10
11
12—
title: Hexo+Next搜索优化(二)博客优化
desc:
date: 1552823062000
updated: 1552823062000
comments: false
categories:
- []
tags: []
keywords:
top: false
—
- 不要用description,会报错,可能是版本问题,我用的是Hexo(v3.8.0)+ Next(v7.0.1)。
URL
打开Hexo的配置文件:blog/_config.yml,搜索permalink,更改代码如下:1
2# permalink: :year/:month/:day/:title/
permalink: :category/:title/
解释
不更新配置之前,文章的默认链接一个四级url,形式是:year/:month/:day/:title/,而且title会导致url过长,用:category/:title/代替原配置,url的资源只有2级,对于搜索引擎会更加有好一些。
Hexo配置
打开Hexo的配置文件:blog/_config.yml,搜索subtitle,补全站点的基本信息配置。1
2
3
4title: #标题
subtitle: #子标题
description: #描述
url: #url
Next配置
打开Next的配置文件:blog/themes/next/_config.yml,搜索SEO Settings,更改配置如下:1
2
3
4canonical: true
seo: true
index_with_subtitle: false
baidu_push: true
具体的对应什么含义,自行查看配置文件解释。
特别说明:index_with_subtitle
在站点index所有页,是否显示Hexo站点设置的副标题,我觉得没什么作用,还影响样式,这个在我的配置中设置了false
首页标题优化Title
打开Next的指定文件:blog/themes/next/layout/index.swig,更改如下:1
{% block title %} {{ config.title }} {% endblock %}
改成1
{% block title %} {{ config.title }} - {{ config.keywords }} - {{ config.description }} {% endblock %}
解释
首页将文章的关键字、以及描述,增大搜索字的匹配率,这个只针对于首页,记住是首页、首页、首页。
每篇博文title、keywords、desc
打开Next的指定文件:blog/themes/next/layout/_partials/head/head.swig,添加一下如下:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<!-- title、keywords、desc关键字 -->
{% if page.title %}
<title>{{ page.title }}</title>
<meta name="title" content="{{ page.title }}" />
{% endif %}
{% if page.keywords %}
<meta name="keywords" content="{{ page.keywords }}" />
{% elif page.tags and page.tags.length %}
<meta name="keywords" content="{% for tag in page.tags %}{{ tag.name }},{% endfor %}" />
{% elif theme.keywords %}
<meta name="keywords" content="{{ theme.keywords }}" />
{% endif %}
{% if page.desc %}
<meta name="description" content="{{ page.desc }}" />
{% endif %}
解释
将增加每篇博文设置的title、keywords、desc,SEO优化重点之一,增大搜索字的匹配率。
添加robot.txt
在blog/public目录新建一个文件robot.txt,进行配置一下内容:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18User-agent: *
Allow: /
Allow: /articles/
Allow: /archives/
Allow: /categories/
Allow: /tags/
Allow: /messagepad/
Allow: /resources/
Allow: /about/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: https://gis90.github.io/sitemap.xml
Sitemap: https://gis90.github.io/baidusitemap.xml
写上你常用的遍历url、以及sitemap地址。
图片压缩
在博客中关于使用的图片,几乎都进行压缩处理,我使用的是在线压缩:https://www.yasuotu.com/。
文件压缩
使用gulp进行文件压缩,本人是搞后端的,参考别人seo优化的时候,也是看了一下glup的用法,记住:glup用来处理静态资源的一个工具。
下面介绍一下具体的实现方法:
安装glue
1
2
3
4npm install gulp@3.9.1 -g
npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save
npm install gulp-concat
npm install gulp-imagemin在blog文件夹下创建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
43
44
45
46
47
48var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
// 压缩html
gulp.task('minify-html', function() {
return gulp.src('./public/article/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// 压缩css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss({
compatibility: 'ie8'
}))
.pipe(gulp.dest('./public'));
});
// 压缩js
gulp.task('minify-js', function() {
return gulp.src(['./public/js/**/.js','!./public/js/**/*min.js'])
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 压缩图片
gulp.task('minify-images', function() {
return gulp.src('./public/images/*.*')
.pipe(imagemin(
[imagemin.gifsicle({'optimizationLevel': 3}),
imagemin.jpegtran({'progressive': true}),
imagemin.optipng({'optimizationLevel': 7}),
imagemin.svgo()],
{'verbose': true}))
.pipe(gulp.dest('./public/images'))
});
// 默认任务
gulp.task('default', [
'minify-html','minify-css','minify-js','minify-images'
]);运行命令
1
glue
在控制台会看见压缩的过程,整个压缩过程在图片压缩处理起来有点慢,耐心等待。
学习
在优化过程中,参考了一些人的博客以及官方文档,感谢各位大神。
参考一:https://github.com/theme-next/hexo-theme-next/issues/866
参考二:https://hjptriplebee.github.io/hexo%E7%9A%84SEO%E6%96%B9%E6%B3%95.html/
参考三:https://www.greateman.top/Next%E4%B8%BB%E9%A2%98SEO%E4%BC%98%E5%8C%96.html
参考四:http://www.ehcoo.com/seo.html
glup:https://www.jianshu.com/p/87a773a81dbd
疑问
- 针对于Next主题的配置文件选项:index_with_subtitle,配置文件的解释: If true, will add site-subtitle to index page, added in main hexo config。
如果文章没有subtitle,那么这个配置是不是就无用了。
拓展
看了几个人的博客发现在改Title方面参数不一致,也搞不懂应该参考哪个,于是自己把参数每个试了一次,参数如下:1
2
3
4
5
6
7
8{{ title }}
{{ keywords }}
{{ desc }}
{{ description }}
{{ theme.keywords }} # 可用
{{ config.title }} # 可用
{{ theme.description }} # 可用
很简单,其实就是把这些参数写在一个博文md文件里面,在生成的html页面有哪些是有值的,这是我的测试方法,结果可想而知,如有不对,欢迎留言进行交流。