リンクをクリックした際にリンク先のページがないとエラー画面になります
こうなってしますとサイトを訪れた方に不安を抱かせてしまったり、サイトの回遊率が下がってしまうなどデメリットばかりです。
それを避けるために今回は404ページというものを作成していきます。
今日のテーマ
- 404ページが必要な理由がわかる
- 404ページの作成ができる
1.404ページとは
404ページはユーザーがURLの打ち間違いや削除された記事にアクセスしたときに表示されるエラーページのことです。
WordPressでは、テーマフォルダ内に 404.php というテンプレートファイルを作成することで、独自の404ページを表示できます。
役割としてはただ単にページがないということを伝えればOKということではなく、以下のことを守って作成することが大事です。
googleは404ページに対して以下のように書いています。
ユーザーに対して、探しているページが見つからないことを明確に伝えます。親しみやすく魅力的な言葉を使用します。
404 ページを、サイトのその他の部分と同じデザイン（ナビゲーションを含む）にします。
最も人気のある記事や投稿へのリンクのほか、ホームページへのリンクを追加します。
google
- 他のページデザインとの統一感を持たせる
- 訪れたユーザーにアクセスしたサイトがないことをきちんと伝える
- topページへのリンクをつける
- 検索窓や人気記事へのリンクをつけ次の行動を促す
この様なポイントを含めて404ページを作ることを心がけようということですね
2.404ページを作成するメリット
2-1.ユーザー体験（UX）を守る
デフォルトの404ページは簡素すぎてユーザーにとって不親切です。 カスタム404ページを作成することで
- トップページへのリンク
- サイト内検索フォーム
- 人気記事の表示 などが可能になり、ユーザーがサイト内を離脱せずに済みます。
2-2.SEO対策
Googleは404エラーそのものは問題視しませんが、404ページがしっかり作られていないとクロールエラーとしてSEOに悪影響を及ぼすことがあります。ユーザーが行き詰まらずに別のページへ移動できる設計にすることで、検索エンジンの評価も下がりにくくなります。
2-3.サイトのデザイン・信頼性を保つ
無機質な404ページはサイト全体の印象を損ねます。ブランディングの一環として、見た目やトーンを揃えた404ページを用意することは重要です。
2-4.不明なリンク・問題の発見につながる
404アクセスのログを取ることで、
- 外部サイトからのリンク切れ
- 誤ったURLを打ち込む傾向 などを分析でき、サイト改善にも役立ちます。
3.404ページの作成方法
- STEP1404.phpファイルを作成する
ファイル名は字のごとく404.phpで作成します。
- STEP2404.phpの中身を作成する
ファイルの中身を制作します。
以下のコードをテンプレにデザインに合わせてPHP(HTML)とCSSを変更してください。
<?php get_header(); ?> <h2 class="error-title">ページが見つかりません</h2> <p class="error-message">お探しのページは存在しないか、移動された可能性があります。</p> <?php get_search_form(); ?> <a href="<?php echo home_url(); ?>" class="back-home-link">トップページに戻る</a> <?php get_footer(); ?>ちなみに
get_search_formというコードは記述すると検索窓が作成されるコードです。詳しくは以下の記事をご覧ください。
他にもデザインの統一感を出すためと作業効率化のためindex.phpをコピーして必要そうなところだけ残し上のテンプレコードを入れても問題ないです。
- STEP3CSSで整える
一例ではありますがこのような感じで整えます。
.error-title { font-size: 2rem; margin-bottom: 20px; } .error-message { font-size: 1rem; margin-bottom: 30px; } .back-home-link { text-decoration: underline; }
以上で完成です！
シンプルですが基準を満たす404ページにはなっているかとは思います。(自分調べ)
3.まとめ
404ページの作成では以下のポイントを含める
- 他のページデザインとの統一感を持たせる
- 訪れたユーザーにアクセスしたサイトがないことをきちんと伝える
- topページへのリンクをつける
- 検索窓や人気記事へのリンクをつけ次の行動を促す
404ページの作成手順
- 404.phpファイルを作成する
- 中身を作成する
- CSSで整える
WordPressをもっと学びたい方はこちらもオススメです！
コメント