前言

在 《一篇帶你用 VuePress + Github Pages 搭建博客》中，我們使用 VuePress 搭建了一個(gè)博客，最終的效果查看：TypeScript 中文文檔。

十余年的昔陽網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整昔陽建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“昔陽網(wǎng)站設(shè)計(jì)”,“昔陽網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

本篇講講 SEO 與重定向。

問題

最一開始我使用 GitHub Pages 服務(wù)建立了站點(diǎn)，地址是：https://mqyqingfeng.github.io/learn-typescript，

考慮到 GitHub 在國(guó)內(nèi)訪問速度的問題，我又在 Gitee 上同步了一份，地址是：http://mqyqingfeng.gitee.io/learn-typescript

后來我決定自己建站，地址是：http://ts.yayujs.com

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

再除此之外，http://yayujs.com 也是這個(gè)網(wǎng)站……

這一下子就產(chǎn)生了 5 個(gè)地址，所以我決定，統(tǒng)一成一個(gè)，既方便記憶和收藏，又方便 SEO 優(yōu)化，不會(huì)導(dǎo)致重復(fù)收錄，分走應(yīng)有的搜索流量。

統(tǒng)一

那統(tǒng)一成哪一個(gè)呢？

首先肯定是自己的服務(wù)器和域名，要不然錢白花了……

然后因?yàn)?HTTPS 對(duì) SEO 更加友好一些，就比如百度搜索引擎認(rèn)為權(quán)值相同的站點(diǎn)，采用 HTTPS 協(xié)議的頁面更加安全，排名上會(huì)優(yōu)先對(duì)待，Google 也是建議使用 HTTPS：：

Google 會(huì)優(yōu)先選擇 HTTPS 網(wǎng)頁（而非等效的 HTTP 網(wǎng)頁）作為規(guī)范網(wǎng)頁

所以我們用 HTTPS。

至于 http://yayujs.com/，考慮到這個(gè)會(huì)作為冴羽的個(gè)人博客頁面使用，只是因?yàn)檫€沒有開發(fā)，所以先指向了這個(gè)站點(diǎn)，所以這個(gè)地址維持原狀，后期會(huì)上線為冴羽的個(gè)人博客。

所以最后統(tǒng)一的地址為 https://ts.yayujs.com

JS 重定向

GitHub Pages 和 Gitee Pages 搭建的站點(diǎn)頁面，因?yàn)椴皇亲约旱姆?wù)器和域名，沒有方法可以直接通過域名重定向或者 Nginx 重定向之類的方法，所以我們干脆 JavaScript 判斷一下域名，然后 location.href 跳轉(zhuǎn)為新的地址：

// config.js
module.exports = {
    title: 'TypeScript4 中文文檔',
    description: 'TypeScript最新官方文檔翻譯,TypeScript中文手冊(cè),提供 TypeScript 從入門到進(jìn)階的系統(tǒng)學(xué)習(xí)教程',
    head: [
      [
        'script', {}, `
        (function() {
	         if (location.href.indexOf('github.io') > -1 || location.href.indexOf('gitee.io') > -1) {
           		location.
           }
        })();
        `
      ]
    ]
}

注意在所有重定向方法中，JavaScript location 重定向應(yīng)該是最后考慮的手段，在谷歌搜索中心的文檔中就有寫到：

僅在您無法實(shí)施服務(wù)器端重定向或 meta refresh 重定向時(shí)，才使用 JavaScript 重定向。雖然 Google 會(huì)嘗試呈現(xiàn) Googlebot 抓取到的每個(gè)網(wǎng)址，但可能會(huì)由于各種原因而呈現(xiàn)失敗。這意味著，如果您設(shè)置了 JavaScript 重定向，但 Google 無法呈現(xiàn)相應(yīng)內(nèi)容，那么 Google 可能永遠(yuǎn)都無法看到該重定向。

Nginx 重定向

HTTP 重定向 HTTPS

接下來我們借助 Nginx 實(shí)現(xiàn) HTTP 重定向到 HTTPS，這個(gè)在之前的文章《VuePress 博客優(yōu)化之開啟 HTTPS》中也有講到過，我們借助 Nginx 的 rewrite 語句實(shí)現(xiàn)：

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 這句，我們加了一個(gè) permanent，表示這是一個(gè) 301 重定向，如果不加這個(gè)，會(huì)是 302 重定向，雖然表現(xiàn)上是一樣的，但對(duì)于搜索引擎來說，卻是不一樣的，Google 也是更建議使用 301 重定向：

如果您需要更改某個(gè)網(wǎng)頁在搜索引擎結(jié)果中顯示的網(wǎng)址，建議您盡可能使用永久服務(wù)器端重定向。這是確保將 Google 搜索和用戶定向到正確網(wǎng)頁的最佳方式。301 和 308 狀態(tài)代碼表示網(wǎng)頁已永久地遷移到新位置。

只有使用 301 重定向，才不會(huì)對(duì)網(wǎng)站排名產(chǎn)生任何負(fù)面的影響。

yayujs.com 重定向 www.yayujs.com

對(duì)于搜索引擎來說，yayujs.com 和 www.yayujs.com 是不同的站點(diǎn)，這很好理解，畢竟 www.yayujs.com 就相當(dāng)于 ts.yayujs.com 是一個(gè)子域名了，但如果域名不一樣，內(nèi)容卻是一樣的，這就會(huì)使得搜索引擎做兩份收錄，反而影響了兩個(gè)地址的自然流量，為此我們需要將一個(gè)重定向到另外一個(gè)地址。

那具體是從 yayujs.com 重定向到 www.yayujs.com 還是 www.yayujs.com 重定向到 yayujs.com 呢？

其實(shí)也無所謂，帶不帶 www，對(duì) SEO 來說沒有任何影響，這更多是個(gè)人偏好。

在 Google 搜索中心的文檔中也有舉過例子：

假定用戶可通過以下幾種方式訪問您的網(wǎng)頁：

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

可從這些網(wǎng)址中挑選一個(gè)作為規(guī)范網(wǎng)址，并使用 301 重定向?qū)碜云渌W(wǎng)址的流量引導(dǎo)至您的首選網(wǎng)址。

如果你希望 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;
  }
}

不過要注意，雖然對(duì) SEO 來說是一樣的，但我們?cè)谧鲰?xiàng)目時(shí)可能會(huì)遇到一些差別，就比如我們?cè)谔幚?Cookie 相關(guān)的內(nèi)容時(shí)，由于 Cookie 的同源策略，只能修改當(dāng)前域以及父域的 Cookie，比如 ts.yayujs.com 和 www.yayujs.com 的 Cookie 就是隔離的，但 ts.yayujs.com 和 yayujs.com 的 Cookie 就不是完全隔離的了。

系列文章

博客搭建系列是我至今寫的唯一一個(gè)偏實(shí)戰(zhàn)的系列教程，預(yù)計(jì) 20 篇左右，講解如何使用 VuePress 搭建、優(yōu)化博客，并部署到 GitHub、Gitee、私有服務(wù)器等平臺(tái)。本篇為第 28 篇，全系列文章地址：https://github.com/mqyqingfeng/Blog

微信：「mqyqingfeng」，加我進(jìn)冴羽唯一的讀者群。

如果有錯(cuò)誤或者不嚴(yán)謹(jǐn)?shù)牡胤?，?qǐng)務(wù)必給予指正，十分感謝。如果喜歡或者有所啟發(fā)，歡迎 star，對(duì)作者也是一種鼓勵(lì)。