[Website seo ranking optimization] typecho Handsome theme high ranking weight optimization plan

foreword

The previous optimization article mainly completed the beautification and simple optimization of various aspects of typecho, as follows:
Construct your unique blog beautification: typecho joe theme optimization log
and now the blogger uses the Handsome theme. Compared with the joe theme, editing, The customization function is more powerful and convenient, but there is a fatal problem, the seo effect is not as good as the joe theme, and because of switching the theme, some articles included in the search engine also fall out. Therefore, it is necessary to carry out targeted SEO optimization for the Handsome theme. The following targeted optimizations are mainly realized:

1. "Multiple h1 tags exist on this page" issue when resolving spider indexing
2. The external links in the article are not optimized, resulting in the loss of weight, you need to add the rel="nofollow" attribute
3. The latest comment item on the global left sidebar accumulates spam links, remove this item, and beautify the position of the remaining items
4. At the end of the article, add related article recommendations with tag as the recommendation condition, a total of 5 articles
5. Delete the spaces on both sides of the website title connector and increase the effective information content of the web page title
6. Add custom description and keywords label menu
7. Reduce the weight dispersion of pagination and label pages for homepage and article pages

"Multiple h1 tags exist on this page" issue when resolving spider indexing

Question: By viewing the source code, I found that each article has two h1 tags. After searching the theme file, it is found that it is the h1 used after the reading mode takes effect. If the h1 of the reading mode is modified, it may cause problems in the order of the title directory. But in the reading mode, the directory is not displayed, so there is no visual problem by default. It can be modified, and those who mind can not modify it.

Location: /handsome/libs/content.php

The h1 in the front is the title of the article page, and the h1 in the back is the h1 in the reading mode, just change it to h2. About line 675.

Article title 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;

Reading mode h1: change to 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>&nbsp;•&nbsp;
			<span class="delimiter"></span><time class="date">{
    
    $time}</time>
    	</div>     
        {
    
    $core_content}
    </div>
</div>

The external links in the article are not optimized, resulting in the loss of weight, you need to add the rel="nofollow" attribute

nofollow has three main functions:

1. To prevent untrustworthy content, the most common spam messages and comments on blogs are spam links to obtain external links, in order to prevent pages from pointing to some spam pages and sites.
2. Paid links: In order to prevent paid links from affecting Google's search result rankings, Google recommends using the nofollow attribute.
3. Guide crawlers to crawl effective pages: prevent crawlers from crawling meaningless pages, which will affect the efficiency of crawlers.

It is immoral to use other people's programs without leaving copyright, so it is necessary to leave the copyright information at the bottom, but the copyright, filing, and links outside the site should be tagged with nofollow. Of course, these are links outside the site, and there are also some in the site. Links need to add nofollow tags, such as advertising cooperation, contact information and other pages at the bottom of the website.

Handsome theme external link processing is divided into the following three types:

• Article external link
• Site-wide friendly links
• Inner page friendly link

Choose your own optimization scheme:

Article external link

Through the developer tools, it can be found that the class of the external link of the article is class="no-external-link" According to this class, query the theme file: the following code exists in /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 {
    
    
            <!--在下一行添加 rel="nofollow" 此处已修改-->
            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);

Add the corresponding code according to the code comment.

Site-wide friendly links

Code location: /handsome/component/aside.php

specific:

<ul class="nav nav-sub dk">
      <li class="nav-sub-header">
      <!--使用links插件，输出全站友链 下一行 rel='noopener nofollow' 即可 -->
     <?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>

Inner page friendly link

Code location: /handsome/libs/Content.php

specific:

$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>

The global left sidebar latest comment items accumulate spam links

It is allowed to leave links when commenting on articles, but we cannot guarantee the excellence of these links, and the latest comment column will be displayed directly on the homepage, which may lead to a decrease in the weight of the website. Therefore, try to remove the latest comment column, the effect is as follows:

Code location: /handsome/component/sidebar.php

Use comments: <!--注释符-->comment the following code:

<!--在 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; ?>-->

After removing the latest comments, you need to modify the positions of the remaining two columns, because the bottom navigation bar is not aligned:

We need to modify handsome.min.css, its location is: /handsome/assets/css

In order to pursue the transmission rate, css is compressed and difficult to find with the naked eye. We can use .nav-tabs-alt .nav-tabs>li[data-index="0"].active~.navs-slider-bar as the key Word search related code; its corresponding: transform: translateX(xx%); modify its xx to the corresponding value.

Note that the two buttons are distinguished by data-index="0":

• Modify the data-index="0"corresponding totransform: translateX(55%);transform: translateX(100%);
• Modify the data-index="2"corresponding totransform: translateX(460%);transform: translateX(405%);

Since it is a css file, it is meaningless to simply click to refresh. It will read the cache. You must press F5 to refresh the page without cache to see the modified results, as follows:

At the end of the article, add related article recommendations with tag as the recommendation condition

Here I just want to display related articles on the article page. In addition, it is not recommended to carry too many links on a single page of personal blog. What is written below is a maximum of 5.

The location of the specific code can be decided by yourself, just put it at the end of the article. The position adopted by the blogger is below the position of the next article and the previous article, as follows:

The code location is: /handsome/post.php

specific location:

<!--120 行：上一篇&下一篇-->
<nav class="m-t-lg m-b-lg">
    <ul class="pager">
    	<?php thePrev($this); ?>   <?php theNext($this); ?>
    </ul>
</nav>

Related referral codes:

<!--相关推荐-->
<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>  

Delete the spaces on both sides of the website title connector and increase the effective information content of the web page title

It will be 空格-空格replaced by -, if the blog with a lot of words in the title can remove the spaces on both sides to get a 1-2 word display.

$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;

Repair home page description and keywords display BUG

The header section of the page is missing a description.

In the section where the description is added to the page source code:<meta name='description' content='在此处输入有关页面内容的描述性、富含关键字的文本。'>。

Search engines may use the description provided in the tags on the search engine results pages (SERPs). A well-written description will fit the content of the page and be relevant to the intent of the searcher, helping you to increase traffic to your website, as such a description will help increase your page's click-through rate when a search is made.

Abstract too long or too short

Change the description length in the markup of the page source code to between 25 and 160 characters .

Search engine crawlers only display the first 150-160 characters of the description in the search results page, so if the description is too long, searchers may not see all the text; if the description is too short, search engines may add other The text content found at the location. Note that search engines may show other descriptions instead of the one you wrote if they think they are more relevant to what the user is searching for.

The description and keywords tags of the original Typecho cannot be customized, which is not SEO-friendly enough. In fact, it is very simple. Add two menu items description and keywords at the front of the original menu. The general principle is that if they are empty, the default description and keywords tags will be used, and if they are not empty, the tags set when writing the article will be used. A home page, tags and classification judgments are made. The official documentation is as follows: The magic is syntax - Typecho Docs

The specific method of typecho framework

• Open it var/Widget/Archive.php, and change the added code to the following in the same position as above:

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;
    }
}

explain

• A judgment statement is added to judge whether the current page is the homepage/label/category, and it is only executed if it is not the homepage, label and category.
• Add another judgment statement to judge whether the description and keywords are empty strings, and use the original method if they are empty strings.

How to modify Handsome source code

• There is no problem after a simple test, please test yourself in actual use.
• The home page bug mentioned at the beginning has been fixed.
• If there is no label and classification judgment, just refer to the above code and just add it, use ANDthe connection.
• Refer header.phpto the official documentation: Custom Header Information Output - Typecho Docs

specific method

• Open it usr/themes/handsome/component/header.php, find line 54, which is <?php $this->header(Content::exportGeneratorRules($this)); ?>this line, and replace this line with the following:

<?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);
            }
        }
    ?>

explain

• First judge whether it is the home page, if it is the home page, use the original method.
• If it is not the first page, judge descriptionand keywordsfill it out separately, and put them together.
• If descriptionthe sum keywordsis not filled in, the original method is still used.
• Finally sent header()to the function.

Reduce the weight dispersion of pagination and label pages for homepage and article pages

After a period of use, I found that search engines do not include article pages, but often include the following pages:

• Pages with various article tags
• Various keyword search pages
• Pages for various article categories

In order to allow search engines to index more articles instead of other pages, the following information is added to the spider shielding file robots.txt:

Disallow: /category
Disallow: /tag
Disallow: /search

Plug-in Supplementary Recommendation

Pretty_for_handsome : A special beautification plugin for the Typecho theme Handsome, a plugin that replaces the complicated operation of modifying the theme code. Has the following functions:

• iframe video article embedding optimization
• iframe video shortcode insertion
• Response time and total number of visitors (the word count of the whole site is given up, reducing server pressure)
• Time lapse module on the right sidebar
• The top navigation shows the weather
• left directory color icon
• Colored tags and a colored tag cloud on the right
• The mouse rotates and zooms in on the avatar
• mouse click effects
• Article Title Centered
• LOGO sweep light
• Replication success prompt
• H1/H2 title background color setting
• The bouncing effect of the reward button
• Hide tag cloud and blog information on mobile
• Home Articles Mouseover Floating
• website uptime
• Article end logo
• Article QR code
• Submit Baidu button at the end of the article
• Full station black and white
• Copyright notice at the bottom of the article
• Comment borders and shadows
• Comments on Avatar Breathing Effect
• Article header image floating
• Optimize the style of the home page carousel
• dynamic background
• Optimize the home page picture layout article title style
• Hide the dynamic background switch on the mobile terminal
• Night mode hides dynamic background switch
• Static wallpaper settings
• Increase the advertising space before the article
• Increase the advertising space before the comment column