SWELLのメリットを27人のユーザーに聞いてみた記事こちら

SWELLで404エラーページをカスタマイズしてサイト離脱率を下げる方法

こんにちは、わえ(@wae_lib)です!

「WordPressテーマのSWELLを使っているけど、404エラーページってどうやってカスタマイズできるの?」

「404エラーページをカスタマイズするメリットは?」

このような質問にお答えします。

404エラーページは、直接的にはSEOに影響しないものの、うまくカスタマイズすればサイト離脱率を下げることができます。

しかしSWELLでは、カスタマイザーを使って404エラーページをカスタマイズすることができません(本記事執筆時点)。

SWELLの404ページはデフォルトでは以下のような表示です。必要最小限のコンテンツは含まれていますが、もう少しオリジナリティを出して、コンテンツを充実させたいところ。

この記事では、404ページをSWELLでカスタマイズする方法と、カスタマイズするメリットについて解説します。

目次

SWELLで404エラーページをカスタマイズする方法

404ページのカスタマイズをするには、以下の2つの方法があります。

  • プラグインを使う
  • 親テーマにある404.phpファイルを子テーマにコピーして編集する

それぞれ解説していきましょう。

「404page」プラグインを使う場合

STEP
プラグインの導入

「404page」というプラグインを使います。

WordPress管理画面で「プラグイン」→「新規追加」と進み、「404page」を検索します。「今すぐインストール」を押してインストールし、有効化しましょう。

プラグインの設定画面を開くと、次の画面が表示されます。「General」タブでは、404ページに表示する固定ページ(後ほど作成)を選択します。

「Advanced」タブでは高度な設定ができますが、デフォルトの設定のままで特に問題ありません。

STEP
固定ページを作成

404ページ用の固定ページを作成します。

「固定ページ」→「新規追加」と進み、ページ編集画面を表示させましょう。

お好みで404ページを編集・作成します。参考までに、わたしの作成した404ページを紹介します。

まず、タイトルを「404ページ」とします。

以下のように「ページが見つかりませんでした。」の後に謝る猫の画像を挿入し、その後にページが見つからなかった旨、文章を書きます。

これに続いて、ブログユーザーにこの後のアクションを提案します。具体的には「検索から見つける」「カテゴリーから見つける」「トップページから探し直す」を提案しました。

このようにユーザーに「この後のアクション」を提案することによって、サイト離脱率を下げる効果が期待できます。

ページが完成したら、URLスラッグを「404」などとして、公開しましょう。

STEP
プラグインで固定ページを選択・設定

「404page」プラグインで先ほど作成した404ページを選択し、「変更を保存」を押します。

試しに存在しないURLをURL欄に入力してみて、「404エラー」ページが表示されることを確認してみましょう。

たとえば存在しないURL「https://waenoblog.com/hoge」をURL欄に入力すると、先ほど作成した固定ページが表示されることがわかります。

404.phpファイルを編集する場合(SWELL&エックスサーバーの例)

より高度な404ページの作成方法として、404.phpファイルを直接編集する方法があります。

404.phpファイルの編集をする方法はさまざまですが、ここでは当ブログで使っている上で編集する場合で説明します。

この後の編集ではファイルを直接編集するので、事前に変更するファイルのバックアップを取っておきましょう。

STEP
エックスサーバーでファイルマネージャを表示

まずエックスサーバーにログインして、「ファイル管理」ボタンを押し、ファイルマネージャを表示します。

ログイン後の画面で「ファイル管理」を押す
STEP
親テーマの404.phpを子テーマにコピー

ファイルマネージャで、「(ドメイン名)>public_html>wp-content>themes>swell」とフォルダを開きます。

swellフォルダに404.phpがあるのが確認できるでしょう。

404.phpをクリックして、ファイルマネージャ上にある「コピー」を押します。

コピー先はSWELLの子テーマフォルダの「/(ドメイン名)/public_html/wp-content/themes/swell_child」を選択し、「コピー」ボタンをクリックしましょう。

親テーマで404.phpを編集すると、将来テーマアップデートが行われたときに、この後の変更内容が失われてしまう可能性があります。編集は子テーマで行いましょう。

STEP
子テーマで404.phpを編集

子テーマのフォルダ(「(ドメイン名)>public_html>wp-content>themes>swell_child」)に移動して、404.phpファイルを選択し、上にある「編集」ボタンを押します。

404.phpの編集画面が表示されるので、お好みで編集します。

編集する箇所は、以下の<div class=”post_content”>と</div>の間の部分です。

たとえば、先ほどの謝る猫の画像を「ページが見つかりませんでした。」の下に挿入する場合。

まず、先ほど作成した404ページ用の固定ページを開いて、画像のHTMLコードを調べます。

ブロックエディタで固定ページを表示し、画像をクリックし、以下の画像の「HTMLとして編集」をクリックしましょう。

すると画像のHTMLコードが表示されるので、コピーします。

404.phpの編集画面でこのコードを、<div class=”post_content”>の前に挿入します。

ファイルを保存し、ブログで404ページを表示させると、謝る猫の画像がきちんと表示されます。

404ページの表示

404エラーページをカスタマイズするメリット

404エラーページは直接的なSEO効果はありませんが、整えておくことでメリットがあります。

404ページが表示されたユーザーのサイト離脱を防げる

404ページをきれいにカスタマイズすることは、ユーザーのサイト離脱を防ぐ効果があります。

404ページが突然表示されたブログユーザーの気持ちになって考えてみましょう。

探していた記事が見つからない上に、文字だけのそっけない404ページを見せられたら、悲しい気持ちにならないでしょうか。

例えるなら、お店に来て目当ての商品を探して店員さんに聞いてみたけど「その商品は無いよ。別の似た商品探したら?」と言われたときと同じ気分になるでしょう。

これではせっかくブログに訪問してくれたユーザーは離脱してしまいます。

逆に丁寧な404ページを用意しておけば、ユーザーのサイト離脱を防げるでしょう。

ユーザーに他の記事を読んでもらえる

404ページに、ユーザーの次のアクションについて書いておけば、ユーザーが後の行動を取りやすくなります。

記事を「検索から見つける」「カテゴリーから見つける」「トップページから探し直す」といった次のアクションを提示しておけば、ユーザーはブログ内の他の記事を探して読んでくれるでしょう。

まとめ

最後までお読みいただき、ありがとうございます!

この記事では、SWELLで404エラーページをカスタマイズして、サイト離脱率を下げる方法について解説しました。

トップページなどのカスタマイズは丁寧にしているけど、404エラーページはそのままという人は多いのではないでしょうか。

404ページをカスタマイズすることで、ユーザーのサイト離脱率を下げられるメリットがあるので、ぜひ試してみてくださいね。

この記事が気に入ったら
フォローしてね!

シェアはこちらのボタンから!

コメント

コメントする

CAPTCHA


目次
閉じる