(23) 試著學 Hexo - SEO 篇 - 新增你的 404 頁面

前言

接下來這一篇會來聊聊關於 404 頁面為什麼對於 SEO 也會有影響，其中當然也會包含實作。

404 是什麼？能吃嗎

404 簡單來講是不存在或者有錯誤的意思，當使用者不小心進入你某些不存在或者有錯誤的頁面，就會跳出這個 404 頁面，以我的網站來講，若你點下 這個連結 就會進入 404 頁面，並且約五秒後會跳回首頁，而這個頁面最大的用途在於增加使用者體驗，例如畫面上會有 Logo or 返回首頁按鈕，確保使用者不會因為看到這個頁面立刻關閉。

而這個頁面之所以重要的原因在於，Google 搜尋引擎也會依照你是否有這個當作一個加分評比，詳情可見 搜尋引擎最佳化 (SEO) 入門指南 - 顯示實用的 404 網頁

在此如果你跟我一樣是使用 GitHub 當作部落格放置空間，更會建議你使用自訂的 404，因為 Google 不接受你使用 GitHub 的 404 頁面。

製作 404 頁面

基本上製作 404 頁面的方式很多，其中一個方式是直接建立一個新頁面(詳見(10)試著學 Hexo - 新增頁面章節) 然後自己寫，在此我們要把握以下 Google 提供的 SEO 重點

請避免：
讓搜尋引擎將您的 404 網頁編入索引 (請務必將網路伺服器設定為當使用者要求的網頁不存在時，能傳回 404 HTTP 狀態碼；如果是 JavaScript 網站，則納入 noindex 漫遊器中繼標記)。
透過 robots.txt 檔案禁止搜尋引擎檢索 404 網頁。
只提供「找不到」、「404」等模糊的訊息，或者甚至連 404 網頁都沒有。
404 網頁的設計與您網站的其他網頁不一致。

robots.txt 我們後面再講，我們可以直接使用以下指令建立一個新的 404 頁面

hexo new page 404

接下來將以下內容貼到 404/index.md 下就可以做到 404 頁面並跳轉的效果囉。

---
title: '404 - 真巧，竟然在這裡遇到你！'
date: 2020-09-12 23:01:35
comments: false
permalink: /404.html
---

<!-- markdownlint-disable MD039 MD033 -->

## 這是一個不存在的頁面

很抱歉，你目前存取的頁面並不存在。

預計將在約 <span id="timeout">5</span> 秒後返回首頁。

如果你很急著想看文章，你可以 **[點這裡](https://israynotarray.com/)** 返回首頁。

<script>
let countTime = 5;

function count() {
  
  document.getElementById('timeout').textContent = countTime;
  countTime -= 1;
  if(countTime === 0){
    location.href = 'https://israynotarray.com/'; // 記得改成自己網址 Url
  }
  setTimeout(() => {
    count();
  }, 1000);
}

count();
</script>

上面跳轉 Url 的地方記得改成自己的唷~

這邊要注意 permalink: /404.html 是非常重要的屬性，如果你沒有使用 permalink: /404.html 那麼就無法正確出現 404 頁面。

而另一個客製化的方式則是自己寫一個 .html 並放在 themes/source 底下即可。

這一篇教了各位如何製作 404 頁面，相信你對於 Hexo 更有掌握，那麼我們就下一篇見囉~

參考文獻

• Creating a custom 404 page for your GitHub Pages site