VuePress 部落格之 SEO 優化（二）之重定向

冴羽發表於2022-03-14
Vue優化

前言

在 《一篇帶你用 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 搜尋中心的文件中也有舉過例子：

假定使用者可通過以下幾種方式訪問您的網頁：

可從這些網址中挑選一個作為規範網址，並使用 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，對作者也是一種鼓勵。

相關文章