【网站 seo 排名优化】typecho Handsome 主题高排名权重优化方案

深碍√TFBOYSˉ_ 2023-10-12 12:06 12阅读 0赞

### 前言 ###

前一篇优化文章主要是完成了对于 typecho 各个方面的美化与简单优化，如下：  
[构造你独一无二的博客美化：typecho joe主题优化日志][typecho joe]  
而现在博主采用的是 Handsome 主题，相比较 joe 主题，编辑、定制功能更为强大、方便，但却存在一个致命的问题，seo 效果比不上 joe 主题，也是因为切换了主题，搜索引擎收录的文章也有部分掉出。故，对于 Handsome 主题有必要对其进行针对性的 seo 优化。主要实现了以下针对性优化：

1.  解决蜘蛛索引时，存在“该页面上存在多个 h1 标记” 问题
2.  文章中的外链未做优化处理造成权重流失，需要添加 rel=“nofollow” 属性
3.  全局左侧边栏最新评论项目累积垃圾链接，去除该项目，并美化剩下项目位置
4.  文章末尾添加以 tag 为推荐条件的相关文章推荐，共 5 条
5.  删除网站标题连接符两边的空格，增加网页标题有效信息内容
6.  增加自定义description和keywords标签菜单
7.  降低分页、标签页对于首页、文章页的权重分散

#### 解决蜘蛛索引时，存在“该页面上存在多个 h1 标记” 问题 ####

问题：通过查看源代码方式，发现每篇文章都有两个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>
            
            <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>

#### 文章中的外链未做优化处理造成权重流失，需要添加 rel=“nofollow” 属性 ####

nofollow主要有三个作用：

1.  防止不可信的内容，最常见的是博客上的垃圾留言与评论中为了获取外链的垃圾链接，为了防止页面指向一些拉圾页面和站点。
2.  付费链接：为了防止付费链接影响Google的搜索结果排名，Google建议使用nofollow属性。
3.  引导爬虫抓取有效的页面：避免爬虫抓取一些无意义的页面，影响爬虫抓取的效率。

使用别人的程序不留版权是不道德的行为，所以有必要在底部留下对于的版权信息，但是版权、备案、站外链接都应该加nofollow标签，当然这是站外的链接，站内也有部分链接需要加入nofollow标签，比如网站底部的广告合作、联系方式等页面。

Handsome 主题外链处理分为以下三种：

*  文章外链
 *  全站友情链接
 *  内页友情链接

自行选择优化方案：

##### 文章外链 #####

通过开发者工具可发现，文章外链所属的类为 class=“no-external-link” 根据此类，查询主题文件可得：在 /handsome/libs/content/ScodeContent.php 中存在如下代码：

//文章中的链接，以新窗口方式打开
    $content = preg_replace_callback("/<a href=\"([^\"]*)\">(.*?)<\/a>/", function ($matches) {
        
        if (strpos($matches[1], substr(@BLOG_URL, 0, -1)) !== false || strpos(substr($matches[1], 0, 6), "http") === false) {
        
            return '<a href="' . $matches[1] . '">' . $matches[2] . '</a>';
        } else {
        
            if (Utils::getExpertValue("no_link_ico", false)) {
        //true 则不加图标
                return '<a href="' . $matches[1] . '" target="_blank">' . $matches[2] . '</a>';
            } else {
        
                
                return '<span class="external-link"><a class="no-external-link" rel="nofollow"  href="' . $matches[1] . '" target="_blank"><i data-feather="external-link"></i>' .
                    $matches[2] .
                    "</a></span>";
            }
    
        }
    }, $content);

按代码注释增加对应代码即可。

##### 全站友情链接 #####

代码位置：/handsome/component/aside.php

具体：

<ul class="nav nav-sub dk">
          <li class="nav-sub-header">
          
         <?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\" 
        data-placement=\"top\"><a rel='noopener nofollow' href=\"{url}\" target=\"_blank\"><span>{name}</span></a></li>";
         $options = mget();
         if ($options->pluginReady){
        
             Handsome_Plugin::output($mypattern1, 0, "ten");
         } ?>
    </ul>

##### 内页友情链接 #####

代码位置：/handsome/libs/Content.php

具体：

$mypattern = <<<eof
    <div class="col-sm-6">
    
    <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>

#### 全局左侧边栏最新评论项目累积垃圾链接 ####

文章评论时允许留下链接，而这些链接我们无法保障其优秀性，而最新评论栏目又会直接展现在首页上，可能导致网站权重的降低，故，尝试去除最新评论栏目，效果如下：

![image-20230608013958335][]

代码位置：/handsome/component/sidebar.php

采用注释符：`` 注释以下代码即可：

去除最新评论之后，还需要修改剩余两个栏目的位置，因为底部导航条没有对齐：

![删除“最新评论”“栏目后的侧边栏][9c0eaa2bdc5567008615c6314e516875.png]

我们需要修改 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，无缓存刷新网页，才能看到修改后的结果，如下：

![针布戳.jpg][.jpg]

#### 文章末尾添加以 tag 为推荐条件的相关文章推荐 ####

这里仅仅是希望在文章页中进行相关文章的展示，另外个人博客单页面承载的链接不建议过多。下面写的是最多5个。

具体代码的位置可以自行决定，放在文章末尾的地方就好了。博主采用的位置为文章内容下一篇、上一篇的位置下方，如下：

![image-20230608012118471][]

代码位置为：/handsome/post.php

具体位置：

<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="<?php $relatedPosts->permalink(); ?>" title="<?php $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;

#### 修复首页description和keywords显示BUG ####

##### 页面的标头部分缺少说明。 #####

描述添加到页面源代码的 部分中: `<meta name='description' content='在此处输入有关页面内容的描述性、富含关键字的文本。'>。`

搜索引擎可能会使用搜索引擎结果页面(SERP)中的 标记中所提供的描述。编写良好的描述将与页面的内容相契合，并且与搜索者的意图相关，从而帮助你提高网站流量，因为在进行搜索时，这种描述有助于提高页面的点击率。

##### 摘要过长或过短 #####

将页面源代码的 标记中的描述长度更改为介于 **25 到 160 个字符之间**。

搜索引擎爬网程序仅在搜索结果页面中显示该说明的前 150-160 个字符，因此如果说明过长，搜索者可能无法看到所有文本；如果说明过短，搜索引擎可能会添加在页面其他位置找到的文本内容。请注意，如果搜索引擎认为其他说明与用户搜索内容的相关性更高，则可能会显示其他说明，而非你编写的说明。

原版Typecho的description和keywords标签无法自定义，对SEO不够友好。其实很简单，在原来的菜单最前面加上description和keywords两个菜单项，大概原理是如果为空就使用默认的description和keywords标签，不为空就使用文章撰写时设置的标签，这里顺带加了个首页、标签和分类判断。官方文档如下：[神奇的is语法 - Typecho Docs][is_ - Typecho Docs]

##### typecho 框架具体方法 #####

*  打开`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;
        }
    }

###### 解释 ######

*  增加了一个判断语句判断当前页面是否首页/标签/分类，非首页、标签和分类才执行。
 *  再增加了一个判断语句判断description和keywords是否为空字符串，如果是空字符串也使用原方法。

##### 修改Handsome源码的方法 #####

*  经过简单测试没有问题，实际使用请自测。
 *  已经修复一开始提到的首页BUG。
 *  没加标签和分类判断，参考上面的代码看着加就是了，用`AND`连接。
 *  参考`header.php`使用官方文档：[自定义头部信息输出 - Typecho Docs][- Typecho Docs]

##### 具体方法 #####

*  打开`usr/themes/handsome/component/header.php`，找到第54行，也就是`<?php $this->header(Content::exportGeneratorRules($this)); ?>`这一行，将这一行替换成如下内容：

<?php
            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][Pretty_for_handsome]：一款针对Typecho主题Handsome专用美化插件，一个插件，替代修改主题代码的复杂操作。具有以下功能：

*  iframe视频文章嵌入优化
 *  iframe视频短代码插入
 *  响应耗时和访客总数（全站字数放弃，减少服务器压力）
 *  右侧边栏时光流逝模块
 *  顶部导航显示心知天气
 *  左侧目录彩色图标
 *  右侧彩色标签和彩色标签云
 *  鼠标经过头像旋转放大
 *  鼠标点击特效
 *  文章标题居中
 *  LOGO扫光
 *  复制成功提示
 *  H1/H2标题背景颜色设置
 *  打赏按钮跳动效果
 *  移动端隐藏标签云和博客信息
 *  首页文章鼠标经过上浮
 *  网站运行时间
 *  文章end标识
 *  文章二维码
 *  文章尾部提交百度按钮
 *  全站黑白
 *  文章底部版权提示
 *  评论边框和阴影
 *  评论头像呼吸效果
 *  文章页头图悬浮
 *  优化首页轮播图样式
 *  动态背景
 *  优化首页图片版式文章题目样式
 *  移动端隐藏动态背景开关
 *  夜间模式隐藏动态背景开关
 *  静态壁纸设置
 *  增加文章前广告位
 *  增加评论列标前广告位

[typecho joe]: https://blog.csdn.net/yumuing/article/details/128761619
[image-20230608013958335]: https://img-blog.csdnimg.cn/img_convert/b1f42c8beafb747e2b67be03046eb9df.png
[9c0eaa2bdc5567008615c6314e516875.png]: https://img-blog.csdnimg.cn/img_convert/9c0eaa2bdc5567008615c6314e516875.png
[.jpg]: https://img-blog.csdnimg.cn/img_convert/5dad8f7dc61a26a69b66b72f54e53de8.png
[image-20230608012118471]: https://img-blog.csdnimg.cn/img_convert/f5ee61f71a514028a5705b1fd840d49f.png
[is_ - Typecho Docs]: http://docs.typecho.org/themes/is-syntax
[- Typecho Docs]: http://docs.typecho.org/themes/custom-header-output
[Pretty_for_handsome]: https://github.com/isSuperman/Pretty_for_handsome