SEO Optimization of VuePress Blog (2) Redirection

foreword

In "An article that takes you to build a blog with VuePress + Github Pages" , we used VuePress to build a blog, and the final effect can be viewed: TypeScript Chinese document .

This article talks about SEO and redirection.

question

At first I built a site using GitHub Pages service, the address is: https://mqyqingfeng.github.io/learn-typescript ,

Considering the speed of GitHub's access in China, I synced another copy on Gitee, the address is: http://mqyqingfeng.gitee.io/learn-typescript

Later I decided to build my own website, the address is: http://ts.yayujs.com

Later, I thought how can I not do https? So there is a new address: https://ts.yayujs.com

In addition to this, http://yayujs.com is also this website...

This time, 5 addresses were generated, so I decided to unify them into one, which is not only convenient for memory and collection, but also convenient for SEO optimization.

Unite

Which one is it unified into?

First of all, it must be your own server and domain name, otherwise the money will be wasted...

Then because HTTPS is more friendly to SEO, for example, Baidu search engine thinks that sites with the same weight value, pages using HTTPS protocol are more secure, and will be given priority in

Google prefers HTTPS pages over the equivalent HTTP pages as canonical pages

So we use HTTPS.

As for http://yayujs.com/ , considering that this will be used as Yu Yu's personal blog page, just because it has not been developed yet, so I pointed to this site first, so this address remains the same, and it will be launched later as Yu Yu personal blog.

So the final unified address is https://ts.yayujs.com

JS redirect

The site pages built by GitHub Pages and Gitee Pages, because they are not their own servers and domain names, there is no way to redirect directly through the domain name or Nginx redirection, so we simply judge the domain name with JavaScript, and then jump to location.href as New address:

// config.js
module.exports = {
    title: 'TypeScript4 中文文档',
    description: 'TypeScript最新官方文档翻译,TypeScript中文手册,提供 TypeScript 从入门到进阶的系统学习教程',
    head: [
      [
        'script', {}, `
        (function() {
             if (location.href.indexOf('github.io') > -1 || location.href.indexOf('gitee.io') > -1) {
                   location.href = 'https://ts.yayujs.com'
           }
        })();
        `
      ]
    ]
}

Note that of all redirection methods, JavaScript location redirection should be the last resort, as described in doc in the Google Search Center:

Use JavaScript redirects only if you cannot implement server-side redirects or meta refresh redirects. While Google will attempt to render every URL Googlebot crawls, rendering may fail for a variety of reasons. This means that if you set up a JavaScript redirect and Google can't render the content, Google may never see the redirect.

Nginx redirect

HTTP redirect HTTPS

Next, we use Nginx to redirect HTTP to HTTPS. This is also mentioned in the previous article "VuePress Blog Optimization: Open HTTPS" . We use Nginx's rewrite statement to achieve:

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
              rewrite ^(.*)$ https://$host$1 permanent;

        location ^~ /learn-typescript/ {
          alias /home/www/website/ts/;
        }

        location / {
          alias /home/www/website/ts/;
          index index.html;
        }
}

Pay attention to the rewrite sentence, we added a permanent, indicating that this is a 301 redirection. If this is not added, it will be a 302 redirection. Although the performance is the same, it is different for search engines. Google is also more recommends using 301 redirect :

If you need to change the URL of a page that appears in search engine results, we recommend that you use permanent server-side redirects whenever possible. This is the best way to ensure that Google searches and users are directed to the correct page. 301 and 308 status codes indicate that the page has been permanently migrated to the new location.

Only using 301 redirects will not have any negative impact on website rankings.

yayujs.com redirects www.yayujs.com

For search engines, yayujs.com and www.yayujs.com are different sites, which is easy to understand, after all, www.yayujs.com is a subdomain, which is equivalent to comts.yajs , but if the domain name is different, but the content is the same, this will make the search engine do two indexing, but affect the natural traffic of the two addresses, so we need to redirect one to the other address.

It specifically from yayujs.com redirected to www.yayujs.com or www.yayujs.com redirected to yayujs.com it?

In fact, it doesn't matter. With or without www, it has no effect on SEO. This is more of a personal preference.

There is also an example in the document in the Google search center:

Assume that users can access your page in the following ways:

• https://example.com/home
• https://home.example.com
• https://www.example.com

Pick one of these URLs as the canonical URL and use a 301 redirect to direct traffic from the other URLs to your preferred URL.

If you want yayujs.com to redirect to www.yayujs.com , you can modify Nginx configuration like this:

server {
  listen 443 ssl;
  server_name yayujs.com www.yayujs.com;
  if ($host != 'www.yayujs.com') {
       rewrite ^/(.*)$ https://www.yayujs.com/$1 permanent;
    }
}   

If you want www.yayujs.com to redirect to yayujs.com , you can modify Nginx configuration like this:

server {
  listen 443 ssl;
  server_name yayujs.com www.yayujs.com;
  if ($host = 'www.yayujs.com') {
    rewrite ^/(.*)$ https://yayujs.com/$1 permanent;
  }
}

However, it should be noted that although it is the same for SEO, we may encounter some differences when working on projects. For example, when we are dealing with cookie-related content, due to the same-origin policy of cookies, we can only modify the current domain and The cookies of the parent domain, such as the cookies of ts.yayujs.com and www.yayujs.com are isolated, but the cookies of ts.yayujs.com and yayujs.com are not completely isolated.

series of articles

The blog building series is the only series of practical tutorials I have written so far. It is expected to be about 20 articles, explaining how to use VuePress to build and optimize blogs, and deploy them to GitHub, Gitee, private servers and other platforms. This article is the 28th article, the address of the full series of articles: https://github.com/mqyqingfeng/Blog

WeChat: "mqyqingfeng", add me to the only readership of Xianyu.

If there are any mistakes or inaccuracies, please be sure to correct me, thank you very much. If you like or have inspiration, welcome to star, which is also an encouragement to the author.