前一篇优化文章主要是完成了对于 typecho 各个方面的美化与简单优化,如下:
构造你独一无二的博客美化:typecho joe主题优化日志
而现在博主采用的是 Handsome 主题,相比较 joe 主题,编辑、定制功能更为强大、方便,但却存在一个致命的问题,seo 效果比不上 joe 主题,也是因为切换了主题,搜索引擎收录的文章也有部分掉出。故,对于 Handsome 主题有必要对其进行针对性的 seo 优化。主要实现了以下针对性优化:
问题:通过查看源代码方式,发现每篇文章都有两个h1标签。查找主题文件之后,发现为阅读模式生效后使用的 h1,如果修改阅读模式的 h1,可能会导致标题目录次序出现问题。但在阅读模式下,不显示目录,也就视觉上默认没有问题。可以修改,介意者可不修改。
位置:/handsome/libs/content.php
前面的h1是文章页的标题,后面的就是阅读模式的h1了,将它修改成h2即可。大约在675行的位置。
文章标题 h1:
<header id="small_widgets" class="bg-light lter wrapper-md">
<h1 class="entry-title m-n font-thin text-black l-h">' . $archive->title;
阅读模式 h1:修改为 h2
<div id="morphing-content" class="hidden read_mode_article">
<div class="page">
<h2 class="title">$obj->title</h2>
<!--修改下一行 h1 为 h2 ,此处已修改-->
<div class="metadata singleline">
<a href="#" rel="author" class="byline">{$author}</a> •
<span class="delimiter"></span><time class="date">{$time}</time>
</div>
{$core_content}
</div>
</div>
nofollow主要有三个作用:
使用别人的程序不留版权是不道德的行为,所以有必要在底部留下对于的版权信息,但是版权、备案、站外链接都应该加nofollow标签,当然这是站外的链接,站内也有部分链接需要加入nofollow标签,比如网站底部的广告合作、联系方式等页面。
Handsome 主题外链处理分为以下三种:
自行选择优化方案:
通过开发者工具可发现,文章外链所属的类为 class=“no-external-link” 根据此类,查询主题文件可得:在 /handsome/libs/content/ScodeContent.php 中存在如下代码:
//文章中的链接,以新窗口方式打开
$content = preg_replace_callback("/(.*?)<\/a>/", function ($matches) {
if (strpos($matches[1], substr(@BLOG_URL, 0, -1)) !== false || strpos(substr($matches[1], 0, 6), "http") === false) {
return '. $matches[1] . '">' . $matches[2] . '';
} else {
if (Utils::getExpertValue("no_link_ico", false)) {//true 则不加图标
return '. $matches[1] . '" target="_blank">' . $matches[2] . '';
} else {
<!--在下一行添加 rel="nofollow" 此处已修改-->
return '. $matches[1] . '" target="_blank">' .
$matches[2] .
"";
}
}
}, $content);
按代码注释增加对应代码即可。
代码位置:/handsome/component/aside.php
具体:
<ul class="nav nav-sub dk">
<li class="nav-sub-header">
<!--使用links插件,输出全站友链 下一行 rel='noopener nofollow' 即可 -->
<?php $mypattern1 = "{name} ";
$options = mget();
if ($options->pluginReady){
Handsome_Plugin::output($mypattern1, 0, "ten");
} ?>
</ul>
代码位置:/handsome/libs/Content.php
具体:
$mypattern = <<<eof
<div class="col-sm-6">
<!--下一行 rel='nofollow' 即可 -->
<a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" rel="nofollow"> <span
class="pull-left thumb-sm avatar m-r" > <img
src={image} alt="Error" class="img-square" /> <i class="{color} right"></i> </span> <span class="clear"><span class="text-ellipsis">
{name}</span> <small
class="text-muted clear text-ellipsis">{title}</small> </span> </a>
</div>
文章评论时允许留下链接,而这些链接我们无法保障其优秀性,而最新评论栏目又会直接展现在首页上,可能导致网站权重的降低,故,尝试去除最新评论栏目,效果如下:
代码位置:/handsome/component/sidebar.php
采用注释符: 注释以下代码即可:
<!--在 14 行-->
<!--<?php if (COMMENT_SYSTEM == 0): ?>
<li role="presentation"> <a href="#widget-tabs-4-comments" role="tab" aria-controls="widget-tabs-4-comments" aria-expanded="false" data-toggle="tab"> <i class="glyphicon glyphicon-comment text-md text-muted wrapper-sm" aria-hidden="true"></i> <span class="sr-only"><?php _me("最新评论") ?></span> </a></li>
<?php endif; ?>-->
去除最新评论之后,还需要修改剩余两个栏目的位置,因为底部导航条没有对齐:
我们需要修改 handsome.min.css,其位置在:/handsome/assets/css
为追求传输速率,css 为压缩后,较为难以肉眼查找,我们可以使用 .nav-tabs-alt .nav-tabs>li[data-index=“0”].active~.navs-slider-bar 作为关键词搜索相关代码;将其对应的:transform: translateX(xx%); 修改其 xx 为对应数值即可。
注意以 data-index=“0” 区分两个按钮:
data-index="0"
对应的transform: translateX(55%);
修改成transform: translateX(100%);
data-index="2"
对应的transform: translateX(460%);
修改成transform: translateX(405%);
由于是 css 文件,简单点击刷新没有意义,会读取缓存,必须 F5,无缓存刷新网页,才能看到修改后的结果,如下:
这里仅仅是希望在文章页中进行相关文章的展示,另外个人博客单页面承载的链接不建议过多。下面写的是最多5个。
具体代码的位置可以自行决定,放在文章末尾的地方就好了。博主采用的位置为文章内容下一篇、上一篇的位置下方,如下:
代码位置为:/handsome/post.php
具体位置:
<!--120 行:上一篇&下一篇-->
<nav class="m-t-lg m-b-lg">
<ul class="pager">
<?php thePrev($this); ?> <?php theNext($this); ?>
</ul>
</nav>
相关推荐代码:
<!--相关推荐-->
<div class="tab-content clear">
<h3 class="widget-title m-t-none text-md"><?php _me("相关文章") ?>
<small><i class="fontello-bell" data-toggle="tooltip" title="我们将根据本文的tag进行相关文章的推荐"></i>
</small>
</h3>
<div id="relatedPosts" >
<ul class="list-group-item nav nav-list">
<?php $this->related(5)->to($relatedPosts); ?>
<?php if ($relatedPosts->have()): ?>
<?php while ($relatedPosts->next()): ?>
<li class="tocify-item text-second">
<a href="$relatedPosts->permalink(); ?>" title="$relatedPosts->title(); ?>"><?php $relatedPosts->title(); ?></a>
</li>
<?php endwhile; ?>
<?php else : ?>
<li>暂无相关推荐</li>
<?php endif; ?>
</ul>
</div>
</div>
将空格-空格
换成-
,如果标题字数多的博客可以将其两边的空格去掉获得 1-2 字的展现。
$options = mget();
if ($currentPage > 1) {
<!--删除‘-’前后空格 -->
_me("第%s页-", $currentPage);
}
if ($commentPage > 1) {
//todo 这种描述容易有歧义
<!--删除‘-’前后空格 -->
_me("第%s页-", $commentPage);
}
$obj->archiveTitle(array(
'category' => _mt('分类 %s 下的文章'),
'search' => _mt('包含关键字 %s 的文章'),
'tag' => _mt('标签 %s 下的文章'),
'author' => _mt('%s 发布的文章')
), '', ' - ');
echo $title;
描述添加到页面源代码的 部分中: 。
搜索引擎可能会使用搜索引擎结果页面(SERP)中的 标记中所提供的描述。编写良好的描述将与页面的内容相契合,并且与搜索者的意图相关,从而帮助你提高网站流量,因为在进行搜索时,这种描述有助于提高页面的点击率。
将页面源代码的 标记中的描述长度更改为介于 25 到 160 个字符之间。
搜索引擎爬网程序仅在搜索结果页面中显示该说明的前 150-160 个字符,因此如果说明过长,搜索者可能无法看到所有文本;如果说明过短,搜索引擎可能会添加在页面其他位置找到的文本内容。请注意,如果搜索引擎认为其他说明与用户搜索内容的相关性更高,则可能会显示其他说明,而非你编写的说明。
原版Typecho的description和keywords标签无法自定义,对SEO不够友好。其实很简单,在原来的菜单最前面加上description和keywords两个菜单项,大概原理是如果为空就使用默认的description和keywords标签,不为空就使用文章撰写时设置的标签,这里顺带加了个首页、标签和分类判断。官方文档如下:神奇的is语法 - Typecho Docs
var/Widget/Archive.php
,在与上文同样的位置将增加的代码改为如下即可:if(($this->is('index') == False)AND($this->is('tag') == False)AND($this->is('category') == False)){
if((!is_null($this->fields->description))AND(strcmp($this->fields->description,'') != 0)){
$allows['description'] = $this->fields->description;
}
if((!is_null($this->fields->keywords))AND(strcmp($this->fields->keywords,'') != 0)){
$allows['keywords'] = $this->fields->keywords;
}
}
AND
连接。header.php
使用官方文档:自定义头部信息输出 - Typecho Docsusr/themes/handsome/component/header.php
,找到第54行,也就是header(Content::exportGeneratorRules($this)); ?>
这一行,将这一行替换成如下内容:
if($this->is('index')){
$this->header(Content::exportGeneratorRules($this));
}else{
$custom_headerb = '';
if(!is_null($this->fields->description)){
$custom_headerb .= 'description=';
$custom_headerb .= $this->fields->description;
}
if(!is_null($this->fields->keywords)){
if(strcmp($custom_headerb,'') == 0){
$custom_headerb .= 'keywords=';
$custom_headerb .= $this->fields->keywords;
}else{
$custom_headerb .= '&keywords=';
$custom_headerb .= $this->fields->keywords;
}
}
if(strcmp($custom_headerb,'') == 0){
$this->header(Content::exportGeneratorRules($this));
}else{
$this->header($custom_headerb);
}
}
?>
description
和keywords
是否填写,将他们拼起来。description
和keywords
都没填写依旧用原方法。header()
函数中去。经过一段时间的使用,发现搜索引擎并不收录文章页面,而经常性收录以下页面:
为了让搜索引擎更多的收录文章,而不是其他页面,故在蜘蛛屏蔽文件 robots.txt 中增加以下信息:
Disallow: /category
Disallow: /tag
Disallow: /search
Pretty_for_handsome:一款针对Typecho主题Handsome专用美化插件,一个插件,替代修改主题代码的复杂操作。具有以下功能: