乐趣区

关于javascript:VuePress-博客之-SEO-优化二之重定向

jiezi

前言

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

本篇讲讲 SEO 与重定向。

问题

最一开始我应用 GitHub Pages 服务建设了站点，地址是：https://mqyqingfeng.github.io/learn-typescript，

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

起初我决定本人建站，地址是：http://ts.yayujs.com

起初我想怎么能够不搞下 https 呢？于是有了新的地址：https://ts.yayujs.com

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

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

对立

那对立成哪一个呢？

首先必定是本人的服务器和域名，要不然钱白花了……

而后因为 HTTPS 对 SEO 更加敌对一些，就比方百度搜索引擎认为权值雷同的站点，采纳 HTTPS 协定的页面更加平安，排名上会优先看待，Google 也是倡议应用 HTTPS：：

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

所以咱们用 HTTPS。

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

所以最初对立的地址为 https://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 搜寻核心的文档中也有举过例子：

假设用户可通过以下几种形式拜访您的网页：

  • https://example.com/home
  • https://home.example.com
  • https://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 篇，全系列文章地址：https://github.com/mqyqingfeng/Blog

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

如果有谬误或者不谨严的中央，请务必给予斧正，非常感激。如果喜爱或者有所启发，欢送 star，对作者也是一种激励。

退出移动版