AFFINGER   ※当サイトのコンテンツには広告が含まれる場合があります。

AFFINGER6(アフィンガー6) 404ページカスタマイズ方法【図解】:回遊率アップでSEO対策

yume-tada

how-to-customize-404page
ゆめただのり
ゆめただ

404エラーページのカスタマイズを行ってますか?

SEO対策の1つとして、404エラーページの対処は内部対策として大切です。

なぜなら

 なぜなら、何も対処しないとユーザーの離脱率を上げてしまうからです。

 訪問してようとしているユーザーに、ページ内のコンテンツを探してもらえれば、

 継続してサイト内を回遊してもらうことができます。

それでは、さっそく説明していきます。

本記事を読んでわかるコト・できるコト

AFFINGER6で404エラーページをカスタマイズする方法がわかります。

404エラーページをカスタマイズして、回遊率アップにつながりSEO内部施策ができます。

この記事を書いた人【ゆめただ】

この記事を書いた人

当サイト使用テーマ

カスタマイズ性」「分析力」「レスポンスデザイン」「サポート」「実績」が凄い!

稼ぐなら、AFFINGER6一択!

【初心者にイチオシ おすすめのテーマ】

action_banar

AFFINGER公式サイトへ行く

404エラーページとは

そもそも、404エラーページとはなんですか?

Worried
お悩みさん
ゆめただのり
ゆめただ

ユーザーがアクセスしようとしたとき、指定されたURLがサイトに無い場合、この404エラーが返され表示されます。

このページのことを404エラーページと言います。

デフォルトの404エラーページ例

Not Found

404エラーの原因は?

404エラーの原因は何でしょうか?

エラーの原因は2つ

  • ユーザーが指定したURLにミスがあり指定されたページが見つからない場合
  • 過去には存在したページが現在は存在ぜず、ユーザーが指定したページがリンク切れになってしまい見つからない場合

ページが見つからない場合、

「404ページ」が表示されて、ユーザーに伝えます

では、なぜカスタマイズが必要なのでしょうか?

404 Error

404ページのカスタマイズが必要な理由は?

ゆめただのり
ゆめただ

404エラーページでサイトが応答し、ページが見つからないことをユーザーに通知します。

デフォルトで行われるのは、「通知まで」です。

これだけでは、引き続きサイト内を探してもらえず、ユーザーの離脱に繋がります。

ポイントは、できるだけサイト内を回遊してもらい離脱を防ぐコト。

404ページカスタマイズポイント

離脱を防ぎサイト内回遊率を上げるコト【SEO内部施策】

Not found user
SEO内部施策記事
how-to-normalize-url
URL正規化の方法【統一してSEO対策】

続きを見る

GoogleのSEOアドバイス

では、どうやってユーザー離脱の対策をするのでしょうか?

ゆめただのり
ゆめただ

404エラーページの対処方法として、GoogleはSEOアドバイスをしています。

GoogleのSEOアドバイス(日本語訳)

自動翻訳なので、ちょっとわかりづらいですね。

まとめると、次のようになります。

Googleアドバイスをまとめると

  1. 「お探しのページが見つからない」ことを明確に伝える
  2. 404エラーページを自サイト内に取り込み、訪問しようとしているサイトからのメッセージであることを伝える
  3. 人気記事や記事へのリンク、自サイトのトップページへのリンク等を追加し、ユーザーが目的のページを探す手助けをする
  4. ユーザーが、サイト管理者にリンク切れであることを報告する方法を提供する

カスタマイズ内容は?

ゆめただのり
ゆめただ

Googleのアドバイスに沿って、次をカスタマイズしていきます。

 具体的なカスタマイズ内容

❶ 自サイトからのエラーメッセージであることがわかる文章にする

❷ 自サイト専用の404エラーページであるデザインにする

❸「検索窓」や「おすすめ記事」「カテゴリー別記事」「サイトマップ」等を追加

❹ 連絡方法を明記する

Advanced customization

カスタマイズ具体例【図解付き】

【方法1】アイキャッチ画像の追加

ゆめただのり
ゆめただ

アイキャッチ画像を追加して、自サイトのメッセージであることを明示します。

biz-sel.comの404アイキャッチ画像

404_page

step
1
外観ーカスタマイズーヴィジェットに移動


 管理メニューから、ヴィジェット画面に移動する

外観ヴィジェット

step
2
「404ページ」ヴィジェットに画像を追加


 「404ページ」ヴィジェットに、「画像」ヴィジェットをドラッグ&ドロップする

画像D&D

step
3
「画像」ヴィジェットに表示したい画像を指定


 「404ページ」ヴィジェットに追加した「画像」ヴィジェットで、表示したい画像を指定し保存する
 「画像を追加」➡「画像を指定」➡「ヴィジェットに追加」➡「保存」

画像指定

これで、画像の設定が完了です。

確認方法

 自サイトのURLを指定して、最後に存在しない適当なページを指定します。

 例:https://my-site.com/hogehoge

 設定した画像が表示されれば成功です!

【方法2】専用メッセージの追加

ゆめただのり
ゆめただ

自サイトのメッセージであることを示す文章を追加して表示させます。

biz-sel.comは、検索窓を追加しているため、最後に検索ができるというメッセージを追加しています。

biz-sel.comの追加メッセージ

step
1
外観ーカスタマイズーヴィジェットに移動


 管理メニューから、ヴィジェット画面に移動する

外観ヴィジェット

step
2
「404ページ」ヴィジェットに「カスタムHTML」を追加


 「404ページ」ヴィジェットに、「カスタムHTML」ヴィジェットをドラッグ&ドロップする

step
3
「カスタムHTML」ヴィジェットに追加するメッセージを指定


 「404ページ」ヴィジェットに追加した「カスタムHTML」ヴィジェットで、追加したいコメントを指定し保存する

ポイント

 追加したいコメントを、<p>と</p>の間に入れて指定します。

 改行させたい場合は、改行位置に、<br>を入れます。

 以下コード例

<p>
	ご指定のページは、移動または削除された可能性がございます。URLを直接ご指定の場合は、お手数ですが今一度ご指定内容をご確認ください。<br>以下より、お探しのページを検索することも可能です。
</p>

【方法3】検索窓を設置する

ゆめただのり
ゆめただ

希望のページが見つけられるように「検索窓」を設置します。

biz-sel.comの404ページ検索窓設置例

original-search

step
1
外観ーカスタマイズーヴィジェットに移動


 管理メニューから、ヴィジェット画面に移動する

外観ヴィジェット

step
2
「404ページ」ヴィジェットに「カスタムHTML」を追加


 「404ページ」ヴィジェットに、「検索」ヴィジェットをドラッグ&ドロップする

step
3
「検索」ヴィジェットのタイトルを指定


 「404ページ」ヴィジェットに追加した「検索」ヴィジェットで、タイトルを指定し保存する

【方法4】リンク切れを報告してもらう

ゆめただのり
ゆめただ

リンク切れがあった場合は報告してもらえるように

「連絡方法」を明記します。

対応例

 設定方法は、【方法2】で説明したやり方で、連絡方法を記載しておきます。

 例:リンク切れのご報告は、よろしければ以下まで連絡をお願いします。

   連絡先:hogehoge@mymail.com

 問い合わせページを設置している方は、そちらに誘導する方法もあります。

ゆめただのり
ゆめただ

以上、AFFINGER6の404ページのカスタマイズ方法でした。

あなたも、SEO内部施策の1つとして404ページをカスタマイズしましょう!

-AFFINGER