AFFINGER6で４０４エラーページをカスタマイズすると回遊率が良くなる

 

こんな悩みを解決します。

 

記事の内容

 

プロフィール

よっしー（@yosshiblog）

 

今回は、AFFINGER6で404ページのカスタマイズ方法を解説していきます。

 

404ページをカスタマイズする理由は、以下の通り。

 

上記のように、意味の内404ページをカスタマイズすることで、以外にも回遊率に繋がるんですよね。

 

今回は、記事の前半で404ページについて、記事の後半でプラグインでのリンク切れ対策ををご紹介します。

本記事を最後まで読み、実践をすることでカスタマイズが出来るだけではなく、AFFINGER6の操作に慣れることが出来ます。

 

 

そもそも４０４ページとは？

 

４０４ページとは、ページが表示されない時に表示されるエラーのことです。

 

４０４ページを意図的に表示させるためには、自サイトのURLの後に適当な文字を入れるだけです。

 

４０４ページが表示される原因は、以下の通り。

 

このあたりでしょうか。意外とページが表示されない原因は多いですね。

 

４０４ページをカスタマイズしなくてもSEO的には特に問題ありませんが、回遊率を上げるためにはやっておいて損はありませんね。

SEO対策については、こちらのAFFINGER６がSEOに強い理由９個【導入すべき】で詳しく解説をしているので、どうぞ。

 

４０４ページエラーは修正するべきか

 

４０４ページエラーが発生しても、SEO的には特に問題ありません。

 

４０４ページエラーは、以下のようにサーチコンソールで検出されることがあります。

 

上記のように検出してくれますが、基本的に無視しても問題ありません。

 

サーチコンソールでは、以下のように記載されています。

一般的に、404 エラーが発生してもサイトの検索パフォーマンスに影響が及ぶことはありません。したがって、対象の URL が自分のサイトに存在しないことが明確な場合は、このエラーを無視しても問題ありません。重要なのは、このような無効な URL が正しい 404 HTTP レスポンス コードを返し、サイトの robots.txt ファイルがこれらをブロックしないようにしておくことです。

引用元：searchconsoleヘルプ

 

つまり、「４０４ページがあっても、Googleの評価対象とはならない」というわけですね。

 

とは言っても、リンク切れやサイトが表示されないとなると、読者の回遊率を悪くさせてしまうので改善はする必要があります。

SEO的には問題ありませんが、リンク切れなどはすぐに対応するようにしましょう。

 

AFFINGER6で404ページのカスタマイズする理由

AFFINGER6で404ページのカスタマイズする理由は、以下の通り。

順に解説をします。

 

理由①：サイトの回遊率に繋がる

 

404ページをカスタマイズすることで、ブログの回遊率が上がります。

というのも、以下のように「Not found」と表示されてしまうと読者はすぐ離脱してしまうからです。

 

 

 

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

 

 

どうでしょうか。４０４ページのカスタマイズは人それぞれですが、少しでも工夫をすると読者が離脱しないような４０４ページを作ることが出来ます。

 

SEO的には直接関係ありませんが、４０４ページをカスタマイズしていない方はやっておいて損はありませんね。

 

理由②：読者の印象に残る

 

４０４ページをカスタマイズすることで、読者の印象に残すことが出来ます。

というのも、４０４ページにこだわっているサイトが少ないからです。

 

 

上記にような４０４ページだと読者の印象に残りません。

 

また、Google検索セントラルでは以下のように記載されています。

 

• ユーザーに対して、探しているページが見つからないことを明確に伝えます。親しみやすく平易な言葉を使用します。
• 404 ページを、サイトのその他の部分と同じデザイン（ナビゲーションを含む）にします。
• 最も人気のある記事や投稿へのリンクのほか、ホームページへのリンクを追加します。
• 無効なリンクを報告する方法をユーザーに提供することを検討します。

引用元：Google検索セントラル

 

サイト回遊率を上げるだけではなく、読者ファーストを意識することが大事です。

SEO対策に比べたら４０４ページをカスタマイズする重要性はそこまでありませんが、濃いファンを作るのならカスタマイズしておくべきでしょう。

 

AFFINGER6で４０４ページをカスタマイズする方法

 

AFFINGER6で４０４ページをカスタマイズする方法は、以下の通り。

順に解説をします。

 

カスタマイズ①：画像の挿入

 

まずは、お好みの画像を探していきましょう。

※４０４ページに使用する画像は特に指定はありませんが、全く関係がない画像より検索に関連している画像を使用するようにしましょう。

 

当サイトでは、「free pick」の画像を使っています。

 

画像を準備したら、投稿の新規追加をクリック。

 

 

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

 

 

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

 

 

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

 

 

テキストコードの前後に以下のコードを設置します。

 

上記のコードを設置しないと行間が狭く読みづらくなってしまうので、各ウィジェット毎に設置をしていきます。

※必要のない方は、設置しなくても大丈夫です。

 

入力が完了したら、「保存」をクリック。

実際に反映を確認していきましょう。

 

 

画像がちゃんと反映されていますね。

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

 

 

カスタマイズ②：コメントの設定

 

４０４ページには、元々以下のようなコメントが設定されています。

 

初期のままだとなんでページが見つからなかったのかが分からないので、コメントを追加していきましょう。

 

先ほどと同じように、「外観」→「ウィジェット」→「00_STINGERカスタムHTML」→「４０４ページ」の順に選択して、「ウィジェットの追加」をクリック。

 

当サイトでは、以下のようなコメントを設定しています。

 

上記のコメントをそのまま使っていただいてもかまいませんし、自分なりにアレンジしてもかまいません。

先ほど追加した「00_STINGERカスタムHTML」に上記のコメントを入力していってください。

 

 

入力が完了したら、「保存」をクリック。

反映確認をしていきましょう。

 

 

しっかりと反映されていますね。

 

カスタマイズ③：ホームページへのリンク設定

 

ホームページへのリンク設定をすることで、読者の回遊率が良くなります。

 

投稿画面を開いて、「タグ」→「カスタムボタン」→「ノーマル」→「基本」の順に選択をして、以下のようなコードを表示させてください。

 

 

このコードを少し編集していきます。

 

 

上記の設定をしたら、コードをコピーしましょう。

先ほどと同じように、「外観」→「ウィジェット」→「00_STINGERカスタムHTML」→「４０４ページ」の順に選択して、「ウィジェットの追加」をクリック。

 

 

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

 

 

追加が完了したら「保存」をクリック。

※当サイトでは、このウィジェットで「<p>」のコードを入力しています

 

反映されているか、確認していきましょう。

 

 

しっかりと反映されていますね。

今回はリンクですので、ホームページを移動するかの確認もしておきましょう。

 

カスタマイズ④：カテゴリーの設置

 

最後にカテゴリーの設置をしていきます。

 

「外観」→「ウィジェット」→「16_STINGERカテゴリー」→「４０４ページ」の順に選択して、「ウィジェットの追加」をクリック。

 

 

追加をしたら、以下の欄にチェックを入れてください。

 

 

設定が完了したら、「保存」をクリック。

実際に反映されているか確認しましょう。

 

 

しっかりと反映されていますね。

これで４０４ページのカスタマイズ設定は終了です。

 

 

リンク切れ対策としてプラグインの導入

 

先ほどまでは４０４ページのカスタマイズ方法を解説しましたが、リンク切れなどによる４０４ページが表示されることは避けなければなりません。

というのも、４０４ページをいくらカスタマイズしたとしても、離脱してしまう読者がいるからですね。

 

リンク切れの対策としては、以下の通りがあります。

 

上記のように様々な修正方法がありますが、「プラグインで対策をする」が一番効果的でしょう。

 

使用するプラグインは、「Broken Link Checker」というものです。

 

 

Broken Link Checkerの機能は、以下の通り。

 

このプラグインを入れるだけで上記に用にリンク切れが起きてもすぐに対応することが出来るので、さっそく導入しましょう。

 

「プラグイン」→「新規追加」の順に選択をして、「Broken Link Checker」と検索をしましょう。

 

 

上画像で赤枠で囲っているものが「Broken Link Checker」ですので、さっそく「インストール」→「有効化」をしてください。

 

Broken Link Checkerは初期設定のままですと、サーバーに負担がかかってしまうので以下のように設定をしていきます。

 

 

上記のように設定が完了したら、保存をクリック。

次に高度な設定をしていきます。

 

 

設定が完了したら、保存を忘れずに。

Broken Link Checkerの簡単な設定に関しては、以上です。

 

Broken Link Checkerでの修正方法については、今後記事にしていくのでお待ちください。

 

まとめ：AFFINGER6で４０４ページを充実させよう！

 

今回は「AFFINGER6で４０４ページのカスタマイズ方法」について解説をしました。

４０４ページのカスタマイズはそこまでSEO的には関係ありませんが、サイト回遊率が上がるだけではなく読者の印象に残すことが出来るのでやっておいて損はありません。

 

またAFFINGER6の場合、外観ウィジェットで設定をしていくのでコードを使うことなく簡単に設定をすることが出来ます。

AFFINGER6のデザインやカスタマイズに関しては、こちらの【保存版】ズボラAFFINGER6使いのデザインやカスタマイズをすべて公開で詳しく解説をしているので、どうぞ。

 

今回は、以上です。

関連記事ブログ初心者にAFFINGE６をおすすめする３つの理由【誰でも使える】