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

前言

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

404 是什麼?能吃嗎

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

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

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

預設 404 畫面

製作 404 頁面

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

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

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

1
hexo new page 404

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
---
title: '404 - 真巧,竟然在這裡遇到你!'
date: 2020-09-12 23:01:35
comments: false
permalink: /404.html
---

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

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

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

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

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

<script>
let countTime = 5;

function count() {

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

count();
</script>

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

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

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

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

參考文獻

0%