
こんな悩みを解決します。
記事の内容
- エラーページの種類
- AFFINGER6で404ページを作る理由
- AFFINGER6で404ページを作る手順
- プラグインでリンク切れ対策
プロフィール
よっしー(@yosshiblog)
この記事を書いている僕はブログ歴1年3か月の高卒ブロガーです。1つ目の超特化ブログで月間1万PVを継続しています。
今回は、AFFINGER6で404ページのカスタマイズ方法を解説していきます。
404ページをカスタマイズする理由は、以下の通り。
- サイトの回遊率に繋がる
- 読者の印象に残る
上記のように、意味の内404ページをカスタマイズすることで、以外にも回遊率に繋がるんですよね。
今回は、記事の前半で404ページについて、記事の後半でプラグインでのリンク切れ対策ををご紹介します。
本記事を最後まで読み、実践をすることでカスタマイズが出来るだけではなく、AFFINGER6の操作に慣れることが出来ます。
AFFINGER6をさっそく導入したい方は、3ステップで分かりやすく解説をしているのでこちらの「AFFINGER6の導入方法」からご覧ください。

そもそも404ページとは?

not found
404ページとは、ページが表示されない時に表示されるエラーのことです。
404ページを意図的に表示させるためには、自サイトのURLの後に適当な文字を入れるだけです。
「https://yosshibolg.com/gvhfeiua;p」と言うように、適当に入力することで404ページを表示させることが出来ます。

404ページが表示される原因は、以下の通り。
- URLが間違っている
- ページが削除されている
- URLがリダイレクトできていない
- リンク切れになっている
- 記事が一時的に非公開になっている
このあたりでしょうか。意外とページが表示されない原因は多いですね。
404ページをカスタマイズしなくてもSEO的には特に問題ありませんが、回遊率を上げるためにはやっておいて損はありませんね。
SEO対策については、こちらのAFFINGER6がSEOに強い理由9個【導入すべき】で詳しく解説をしているので、どうぞ。
404ページエラーは修正するべきか
404ページエラーが発生しても、SEO的には特に問題ありません。
404ページエラーは、以下のようにサーチコンソールで検出されることがあります。

search console
上記のように検出してくれますが、基本的に無視しても問題ありません。
サーチコンソールでは、以下のように記載されています。
一般的に、404 エラーが発生してもサイトの検索パフォーマンスに影響が及ぶことはありません。したがって、対象の URL が自分のサイトに存在しないことが明確な場合は、このエラーを無視しても問題ありません。重要なのは、このような無効な URL が正しい 404 HTTP レスポンス コードを返し、サイトの robots.txt ファイルがこれらをブロックしないようにしておくことです。
引用元:searchconsoleヘルプ
つまり、「404ページがあっても、Googleの評価対象とはならない」というわけですね。
とは言っても、リンク切れやサイトが表示されないとなると、読者の回遊率を悪くさせてしまうので改善はする必要があります。
SEO的には問題ありませんが、リンク切れなどはすぐに対応するようにしましょう。
AFFINGER6で404ページのカスタマイズする理由
AFFINGER6で404ページのカスタマイズする理由は、以下の通り。
- サイトの回遊率に繋がる
- 読者の印象に残る
順に解説をします。
理由①:サイトの回遊率に繋がる
404ページをカスタマイズすることで、ブログの回遊率が上がります。
というのも、以下のように「Not found」と表示されてしまうと読者はすぐ離脱してしまうからです。

not found

実際に当サイトの404ページは、以下のようにカスタマイズしています。

当サイトの404ページ
- 画像
- ページが表示されない原因
- ホームページを誘導
- カテゴリー
どうでしょうか。404ページのカスタマイズは人それぞれですが、少しでも工夫をすると読者が離脱しないような404ページを作ることが出来ます。
SEO的には直接関係ありませんが、404ページをカスタマイズしていない方はやっておいて損はありませんね。
理由②:読者の印象に残る
404ページをカスタマイズすることで、読者の印象に残すことが出来ます。
というのも、404ページにこだわっているサイトが少ないからです。

not found
上記にような404ページだと読者の印象に残りません。
また、Google検索セントラルでは以下のように記載されています。
- ユーザーに対して、探しているページが見つからないことを明確に伝えます。親しみやすく平易な言葉を使用します。
- 404 ページを、サイトのその他の部分と同じデザイン(ナビゲーションを含む)にします。
- 最も人気のある記事や投稿へのリンクのほか、ホームページへのリンクを追加します。
- 無効なリンクを報告する方法をユーザーに提供することを検討します。
引用元:Google検索セントラル
サイト回遊率を上げるだけではなく、読者ファーストを意識することが大事です。
SEO対策に比べたら404ページをカスタマイズする重要性はそこまでありませんが、濃いファンを作るのならカスタマイズしておくべきでしょう。
AFFINGER6で404ページをカスタマイズする方法
AFFINGER6で404ページをカスタマイズする方法は、以下の通り。

当サイトの404ページ
- 画像の挿入
- コメントの設定
- ホームページへのリンク設定
- カテゴリーの設置
順に解説をします。
カスタマイズ①:画像の挿入
まずは、お好みの画像を探していきましょう。
※404ページに使用する画像は特に指定はありませんが、全く関係がない画像より検索に関連している画像を使用するようにしましょう。
当サイトでは、「free pick」の画像を使っています。
画像を準備したら、投稿の新規追加をクリック。

画像の準備
投稿画面に先ほど準備した画像を挿入して、テキスト状態でコピーをしてください。

テキストのコピー
コピーが完了したら、「外観」→「ウィジェット」→「00_STINGERカスタムHTML」→「404ページ」の順に選択して、「ウィジェットの追加」をクリック。

00_STINGERカスタムHTML
ウィジェットの404ページと言う欄に「00_STINGERカスタムHTML」が追加されたので、先ほどの画像テキストをペーストします。

テキストのペースト
テキストコードの前後に以下のコードを設置します。
- <p>・・・始まり
- </p>・・・終わり
上記のコードを設置しないと行間が狭く読みづらくなってしまうので、各ウィジェット毎に設置をしていきます。
※必要のない方は、設置しなくても大丈夫です。
入力が完了したら、「保存」をクリック。
実際に反映を確認していきましょう。

反映確認
画像がちゃんと反映されていますね。
この後も同じように、「ウィジェットの追加」→「反映確認」の繰り返し作業を行っていきます。

カスタマイズ②:コメントの設定
404ページには、元々以下のようなコメントが設定されています。

not found
初期のままだとなんでページが見つからなかったのかが分からないので、コメントを追加していきましょう。
先ほどと同じように、「外観」→「ウィジェット」→「00_STINGERカスタムHTML」→「404ページ」の順に選択して、「ウィジェットの追加」をクリック。

00_STINGERカスタムHTML
当サイトでは、以下のようなコメントを設定しています。
お探しのページは「URLが異なっている」か「記事が削除された」などの理由で見つかりませんでした。
上記のコメントをそのまま使っていただいてもかまいませんし、自分なりにアレンジしてもかまいません。
先ほど追加した「00_STINGERカスタムHTML」に上記のコメントを入力していってください。

コメントの追加
入力が完了したら、「保存」をクリック。
反映確認をしていきましょう。

反映確認
しっかりと反映されていますね。
カスタマイズ③:ホームページへのリンク設定
ホームページへのリンク設定をすることで、読者の回遊率が良くなります。
投稿画面を開いて、「タグ」→「カスタムボタン」→「ノーマル」→「基本」の順に選択をして、以下のようなコードを表示させてください。

ボタンの表示
このコードを少し編集していきます。
- url・・・自サイトのURLを入力
- title・・・ホームページを誘導するコメントを入力

コードの設定
上記の設定をしたら、コードをコピーしましょう。
先ほどと同じように、「外観」→「ウィジェット」→「00_STINGERカスタムHTML」→「404ページ」の順に選択して、「ウィジェットの追加」をクリック。

00_STINGERカスタムHTML
追加をしたら、「00_STINGERカスタムHTML」の欄に先ほどのコードを入力しましょう。

ホームボタンの追加
追加が完了したら「保存」をクリック。
※当サイトでは、このウィジェットで「<p>」のコードを入力しています
反映されているか、確認していきましょう。

反映確認
しっかりと反映されていますね。
今回はリンクですので、ホームページを移動するかの確認もしておきましょう。
カスタマイズ④:カテゴリーの設置
最後にカテゴリーの設置をしていきます。
「外観」→「ウィジェット」→「16_STINGERカテゴリー」→「404ページ」の順に選択して、「ウィジェットの追加」をクリック。

16_STINGERカテゴリー
追加をしたら、以下の欄にチェックを入れてください。
- ドロップダウンで表示
- 投稿数を表示
- 階層を表示

カテゴリーの設定
設定が完了したら、「保存」をクリック。
実際に反映されているか確認しましょう。

反映確認
しっかりと反映されていますね。
これで404ページのカスタマイズ設定は終了です。

リンク切れ対策としてプラグインの導入
先ほどまでは404ページのカスタマイズ方法を解説しましたが、リンク切れなどによる404ページが表示されることは避けなければなりません。
というのも、404ページをいくらカスタマイズしたとしても、離脱してしまう読者がいるからですね。
リンク切れの対策としては、以下の通りがあります。
- 自分でリンクを踏んでチェックをする
- 無料チェックツールを使用する
- プラグインで対策をする
- Googleサーチコンソールの通知から修正する
上記のように様々な修正方法がありますが、「プラグインで対策をする」が一番効果的でしょう。
使用するプラグインは、「Broken Link Checker」というものです。

Broken Link Checker
Broken Link Checkerの機能は、以下の通り。
- 簡単にエラーの修正が出来る
- リンク切れが起きた時にメールで通知してくれる
- エラーになっている個所に打消し線で表示してくれる
このプラグインを入れるだけで上記に用にリンク切れが起きてもすぐに対応することが出来るので、さっそく導入しましょう。
「プラグイン」→「新規追加」の順に選択をして、「Broken Link Checker」と検索をしましょう。

Broken Link Checker
上画像で赤枠で囲っているものが「Broken Link Checker」ですので、さっそく「インストール」→「有効化」をしてください。
Broken Link Checkerは初期設定のままですと、サーバーに負担がかかってしまうので以下のように設定をしていきます。

Broken Link Checkerの設定
- 各リンクをチェック・・・168時間に設定
- リンクの調整・・・3つの欄にチェックをする
- 提案・・・チェックを外しておく
上記のように設定が完了したら、保存をクリック。
次に高度な設定をしていきます。

高度な設定
- リンクモニター・・・「バック九ラウンドで1時間ごとに実行する」のチェックを外す
- サーバー負荷の制限・・・10~12の間に設定をする
設定が完了したら、保存を忘れずに。
Broken Link Checkerの簡単な設定に関しては、以上です。
Broken Link Checkerでの修正方法については、今後記事にしていくのでお待ちください。
まとめ:AFFINGER6で404ページを充実させよう!
今回は「AFFINGER6で404ページのカスタマイズ方法」について解説をしました。
404ページのカスタマイズはそこまでSEO的には関係ありませんが、サイト回遊率が上がるだけではなく読者の印象に残すことが出来るのでやっておいて損はありません。
またAFFINGER6の場合、外観ウィジェットで設定をしていくのでコードを使うことなく簡単に設定をすることが出来ます。
AFFINGER6のデザインやカスタマイズに関しては、こちらの【保存版】ズボラAFFINGER6使いのデザインやカスタマイズをすべて公開で詳しく解説をしているので、どうぞ。
今回は、以上です。