VuePress 博客之 SEO 优化（二）重定向

前言

在 《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，最终的效果查看：TypeScript 中文文档。

本篇讲讲 SEO 与重定向。

问题

最一开始我使用 GitHub Pages 服务建立了站点，地址是：mqyqingfeng.github.io/learn-types…，

考虑到 GitHub 在国内访问速度的问题，我又在 Gitee 上同步了一份，地址是：mqyqingfeng.gitee.io/learn-types…

后来我决定自己建站，地址是：ts.yayujs.com

后来我想怎么可以不搞下 https 呢？于是有了新的地址：ts.yayujs.com

再除此之外，yayujs.com 也是这个网站……

这一下子就产生了 5 个地址，所以我决定，统一成一个，既方便记忆和收藏，又方便 SEO 优化，不会导致重复收录，分走应有的搜索流量。

统一

那统一成哪一个呢？

首先肯定是自己的服务器和域名，要不然钱白花了……

然后因为 HTTPS 对 SEO 更加友好一些，就比如百度搜索引擎认为权值相同的站点，采用 HTTPS 协议的页面更加安全，排名上会优先对待，Google 也是建议使用 HTTPS：：

Google 会优先选择 HTTPS 网页（而非等效的 HTTP 网页）作为规范网页

所以我们用 HTTPS。

至于 yayujs.com/，考虑到这个会作为冴羽的个人博客页面使用，只是因为还没有开发，所以先指向了这个站点，所以这个地址维持原状，后期会上线为冴羽的个人博客。

所以最后统一的地址为 ts.yayujs.com

JS 重定向

GitHub Pages 和 Gitee Pages 搭建的站点页面，因为不是自己的服务器和域名，没有方法可以直接通过域名重定向或者 Nginx 重定向之类的方法，所以我们干脆 JavaScript 判断一下域名，然后 location.href 跳转为新的地址：

// 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'
           }
        })();
        `
      ]
    ]
}
复制代码

注意在所有重定向方法中，JavaScript location 重定向应该是最后考虑的手段，在谷歌搜索中心的文档中就有写到：

仅在您无法实施服务器端重定向或 meta refresh 重定向时，才使用 JavaScript 重定向。虽然 Google 会尝试呈现 Googlebot 抓取到的每个网址，但可能会由于各种原因而呈现失败。这意味着，如果您设置了 JavaScript 重定向，但 Google 无法呈现相应内容，那么 Google 可能永远都无法看到该重定向。

Nginx 重定向

HTTP 重定向 HTTPS

接下来我们借助 Nginx 实现 HTTP 重定向到 HTTPS，这个在之前的文章《VuePress 博客优化之开启 HTTPS》中也有讲到过，我们借助 Nginx 的 rewrite 语句实现：

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;
        }
}
复制代码

注意 rewrite 这句，我们加了一个 permanent，表示这是一个 301 重定向，如果不加这个，会是 302 重定向，虽然表现上是一样的，但对于搜索引擎来说，却是不一样的，Google 也是更建议使用 301 重定向：

如果您需要更改某个网页在搜索引擎结果中显示的网址，建议您尽可能使用永久服务器端重定向。这是确保将 Google 搜索和用户定向到正确网页的最佳方式。301 和 308 状态代码表示网页已永久地迁移到新位置。

只有使用 301 重定向，才不会对网站排名产生任何负面的影响。

yayujs.com 重定向 www.yayujs.com

对于搜索引擎来说，yayujs.com 和 www.yayujs.com 是不同的站点，这很好理解，毕竟 www.yayujs.com 就相当于 ts.yayujs.com 是一个子域名了，但如果域名不一样，内容却是一样的，这就会使得搜索引擎做两份收录，反而影响了两个地址的自然流量，为此我们需要将一个重定向到另外一个地址。

那具体是从 yayujs.com 重定向到 www.yayujs.com 还是 www.yayujs.com 重定向到 yayujs.com 呢？

其实也无所谓，带不带 www，对 SEO 来说没有任何影响，这更多是个人偏好。

在 Google 搜索中心的文档中也有举过例子：

假定用户可通过以下几种方式访问您的网页：

• example.com/home
• home.example.com
• www.example.com

可从这些网址中挑选一个作为规范网址，并使用 301 重定向将来自其他网址的流量引导至您的首选网址。

如果你希望 yayujs.com 重定向到 www.yayujs.com，你可以这样修改 Nginx 配置：

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

如果你希望 www.yayujs.com 重定向到 yayujs.com，你可以这样修改 Nginx 配置：

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

不过要注意，虽然对 SEO 来说是一样的，但我们在做项目时可能会遇到一些差别，就比如我们在处理 Cookie 相关的内容时，由于 Cookie 的同源策略，只能修改当前域以及父域的 Cookie，比如 ts.yayujs.com 和 www.yayujs.com 的 Cookie 就是隔离的，但 ts.yayujs.com 和 yayujs.com 的 Cookie 就不是完全隔离的了。

系列文章

博客搭建系列是我至今写的唯一一个偏实战的系列教程，预计 20 篇左右，讲解如何使用 VuePress 搭建、优化博客，并部署到 GitHub、Gitee、私有服务器等平台。本篇为第 28 篇，全系列文章地址：github.com/mqyqingfeng…

微信：「mqyqingfeng」，加我进冴羽唯一的读者群。

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。