针对hexo静态博客的简单SEO技巧(1)

目前针对hexo的SEO技巧非常之少,可能一个主要原因是hexo生成的静态博客很难灵活地使用各种SEO技巧。本文只简单地介绍最基本的几个SEO小技巧,主要包括meta标签、h标签、nofollow以及robots文件和sitemap的使用,在搜索引擎日新月异的情况下,这些小技巧的作用可能已经微乎其微了!

(1) 优化meta标签的name变量

meta标签的NAME变量语法格式是:meta name=”xxx” content=”xxxxxxxxxxxxxxxxxx”

对于SEO比较有用的name包括:author、keywords、description等。
而对于hexo而言,一篇post包括的属性有categoriestagskeywordsdescriptionexcerpt(摘要)等,这些属性的作用正好与meta标签中的name对应。
比如本文对应的post,具有以下属性值:

1
2
3
4
5
6
title: 针对hexo静态博客的简单SEO技巧(1)
date: 2016-03-25 09:11:33
tags: [hexo, SEO]
feature: http://7xj852.com1.z0.glb.clouddn.com/blog/2016/03/25/seo.jpg
description: SEO是一个很考验功底和技术积累的活,目前针对hexoSEO技巧非常之少,可能一个主要原因是hexo生成的静态博客很难灵活地使用各种SEO技巧。本文只简单地介绍最基本的几个SEO小技巧,主要包括meta标签、h标签、nofollow以及robots文件和sitemap的使用,在搜索引擎日新月异的情况下,这些小技巧的作用可能已经微乎其微了!
categories: 源码学习

因此,针对meta标签的SEO,可以使用以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <% if (page.description){ %>
<meta name="description" content="<%= page.description %>">
<% } else if (page.excerpt){ %>
<meta name="description" content="<%= strip_html(page.excerpt).replace(/^\s*/, '').replace(/\s*$/, '') %>">
<% } else if (page.content){ %>
<meta name="description" content="<%= strip_html(page.content).replace(/^\s*/, '').replace(/\s*$/, '').substring(0, 150) %>">
<% } else if (config.description){ %>
<meta name="description" content="<%= config.description %>">
<% } %>

<% if (page.keywords){ %>
<meta name="keywords" content="<%= page.keywords %>">
<% } else if (page.tags){ %>
<%
var keywords_content=[];
page.tags.each(function(k){
keywords_content.push(k.name);
}) %>
<meta name="keywords" content="<%= keywords_content %>">
<% } %>

大致逻辑是:如果一个page具有description,则使用page.description作为name=”description”的content值,若该页面不是一个page(比如,可能是首页),那么则使用config文件中配置的description作为name=”description”的content值。
上述代码的实现结果为:
hexo seo meta description

而博客主页对应的html源码如下:
hexo seo meta

以上代码建议放在单独的head.ejs文件中,具体可参考本博客使用的free2mind主题的源代码。

(2) 添加nofollow

nofollow的作用主要是为了引导蜘蛛去爬取一些没被爬取过的页面,具体可参考知乎-途牛网我看到了很多的nofollow

对于本博客,主要是在主题的config配置文件中加入了一个属性enable_follow来标识一个菜单项是否使用nofollow标签。

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
menu:
- title: 热点文章
url: tags/热点文章/
intro: "Hots"
enable_follow: true
icon: "fa fa-fire"
- title: 博主推荐
url: tags/博主推荐/
intro: "Recommendation"
enable_follow: true
icon: "fa fa-volume-up"
- title: 文章归档
url: archives
intro: "All articles"
enable_follow: true
icon: "fa fa-archive"
- title: 给我留言
url: message/
intro: "Leave a message"
enable_follow: false
icon: "fa fa-pencil"
- title: 关于本站
url: about/
intro: "About me"
enable_follow: false
icon: "fa fa-info-circle"

在对应的主题文件中,核心代码如下,主要是通过判断enable_follow的值来使用对应的标签值

1
2
3
4
5
6
7
8
9
<% theme.menu.forEach(function(m){ %>
<li>
<% if(m.enable_follow){ %>
<a href="<%- config.root %><%- m.url %>" title="<%- m.intro %>"><i class="<%- m.icon %>"></i><%- m.title %></a>
<% } else { %>
<a href="<%- config.root %><%- m.url %>" rel="nofollow" title="<%- m.intro %>"><i class="<%- m.icon %>"></i><%- m.title %></a>
<% } %>
</li>
<% }) %>

(3) 添加robots.txt

robots.txt主要是用来告诉搜索引擎此网站中哪些内容是可以被爬取的,哪些是禁止爬取的。robots.txt应放网站目录下的source文件中,生成网站后在public目录下,具体robots的使用可以参考:robots细节优化都包括哪些地方

(4) h标签的使用

这个基本上没什么技巧,原则就是一个页面一般只有一个h1标签,h标签的使用按照文章的结构,从大到小使用即可。