404ページってカスタマイズするモノなんですか？
404エラーページって何？
404エラーページとは記事を削除したりしてページが存在しない時に表示されるページです。
カスタマイズしていないと、このように表示されます。
これではサイトを訪れてくれた読者はすぐに離脱してしまいますよね。
するとGoogle先生に『サイトの質が低い』と判断されて検索結果の表示順位が下がってしまいます。
404エラーページが表示される原因
404エラーページが表示される原因
- URLを間違って入力した
- 記事が削除されている
- 記事が非公開にされている
記事が削除されていて404エラーページが表示されてしまうのはサイト運営者の責任なので致し方ありません。
しかし読者がURLの入力を間違っていたり、善意でサイトを紹介しようとしてリンクを貼ってくれた方がURLの入力を間違っていたら、こちらとしてはどうしようもありません。
せっかく読者がサイトを訪れてくれたのに読んでもらえないのではもったいないですね。
そこで404エラーページをこのようにカスタマイズして他の記事へ誘導すれば、もしかしたらお目当ての記事を見つけてもらえるかもしれません。
そうなれば直帰率が高くなってしまう事を少しでも抑えられます。
それでは404エラーページのカスタマイズを始めましょう。
Step 1：画像の準備
赤枠で囲った位置に表示させる画像を用意します。
コメント・検索ボックス・戻るボタンの設置のみで、このように画像は無しで良ければ Step 1 と Step 2 は飛ばしてください。
Step 2：画像をアップロード
WordPress管理画面で【投稿】→【新規追加】をクリックします。
404エラーページが完成したら削除するので何でもいいのですが、わかるように記事のタイトルを付けておきます。
とりあえず『ボタンタグ取得』と付けました。
タグを使うのでビジュアルエディターにします。
表示させる画像をアップロードします。
アップロードしたら【投稿に挿入】をクリック。
画像が挿入されました。
Step 3：ボタンタグを取得
そのままだとタグが繋がって表示されて間違えやすくなるので、【enter】キーを押してカーソルを下の行に移します。
【タグ】をクリックするとプルダウンメニューが表示されます。
プルダウンメニューの【カスタムボタン】にマウスポインターを合わせると更にプルダウンメニューが表示されます。
そこから【ノーマル】→【基本】を選んでクリックします。
ボタンのタグが挿入されました。
【下書き保存】をクリックして保存します。
Step 4：ウィジェットの追加
次は【外観】から【ウィジェット】をクリック。
『利用出来るウィジェット』の最初にある【00_STINGERカスタムHTML】をクリック。
プルダウンメニューが表示されるので、下へスクロールして・・・
【404ページ】をクリック。
【404ページ】にチェックが入るので【ウィジェットを追加】をクリック。
右側の『404ページ』に【00_STINGERカスタムHTML】の内容を入力するウインドウが開きます。
内容は後で入力するので、ここではこのまま左下の【完了】をクリック。
『404ページ』に【00_STINGERカスタムHTML】が追加されました。
もう一度同じ操作で２つ目の【00_STINGERカスタムHTML】を『404ページ』に追加します。
『利用出来るウィジェット』の最初にある【00_STINGERカスタムHTML】をクリック。
今度は【404ページ】にチェックが入っているので、そのまま【ウィジェットを追加】をクリック。
右側『404ページ』の左下の【完了】をクリック。
『404ページ』に【00_STINGERカスタムHTML】が２つ追加されました。
次は左側の『利用できるウィジェット』の下の方にある【検索】をクリック。
開いたプルダウンメニューから【404ページ】をクリックしてチェックを入れ、【ウィジェットを追加】をクリック。
右側『404ページ』に【検索】の入力画面が表示されるので【完了】をクリック。
最初と同じ操作で３つ目の【00_STINGERカスタムHTML】を『404ページ』に追加します。
『利用出来るウィジェット』の【00_STINGERカスタムHTML】をクリック。
今度も【404ページ】にチェックが入っているので、そのまま【ウィジェットを追加】をクリック。
右側『404ページ』の左下の【完了】をクリック。
『404ページ』にウィジェットが四つ追加されました。
Step 5：ウィジェットの設定
ウィジェットはこのように対応しています。
ウィジェット一つずつに表示させる内容を設定します。
【投稿】の項目から【投稿一覧】をクリック。
下書き保存した『ボタンタグ取得』の【編集】をクリック。
右上の【テキスト】をクリックしてテキストエディターにします。
画像タグとボタンタグが表示されます。
『<img class= ～ />』となっている画像貼り付けタグを【ctrl】+【C】でコピーします。
【外観】の【ウィジェット】をクリック。
『404ページ』をクリック。
一番上の【00_STINGERカスタムHTML】をクリック。
内容編集ウインドウが開くので、1行目にマウスポインターを移動してクリック。
1行目先頭にカーソルが点滅表示されます。
【ctrl】+【V】でコピーしたタグを貼り付けます。
これで画像は表示されますが、このままだと次のコメントが画像のすぐ下に表示されて見た目が良くありません。
改行タグを挿入して見た目を整えます。
まずはenterキーを押して改行します。
すると2行目が表示されます。
2行目に『<br>』と入力してenterキーを押します。
<br>タグの「br」は「break」の略で、改行を行うためのタグです。
3行目にも『<br>』と入力してenterキーを押します。
保存して完了をクリック。
画像が正しく設定されたか確認してみましょう。
404エラーページを表示させる方法は、ブラウザのURL入力欄に「https://ブログのドメイン/URLに使われていない文字」を入力すれば表示されます。
わたしのブログの場合は「https://raydego.com/た」と入力すれば表示されます。
画像表示の設定が正しく反映されました。
検索ボックスはウィジェットを設置しただけで表示されるので、画像の下に表示されています。
ちなみに、改行タグを挿入しないと画像と検索ボックスがくっ付いてしまいます。
続いてコメントを設定します。
『404ページ』の2番目の【00_STINGERカスタムHTML】をクリック。
表示するコメントを入力します。
この例では『お探しのページは「URLが異なっている」「記事が削除された」などの理由で見つかりませんでした。下の検索ボックスでページをお探しください。』としてみました。
【保存】ボタンをクリックして保存します。
このように表示されました。
上記の例でも問題はありませんが、わたしはこのようにしました。
このように表示されます。
最後にトップページへ戻るボタンを設置すれば完成です。
画像貼り付けタグを取得した時と同じ操作で・・・
【投稿】の【投稿一覧】から『ボタンタグ取得』の【編集】をクリック。
ボタン設置タグの『 [st-mybutton ～ beacon=""] 』の部分を選択してコピーします。
【外観】の【ウィジェット】をクリック。
『404ページ』の一番下の【00_STINGERカスタムHTML】をクリック。
内容欄にコピーしたタグを貼り付けます。
このタグを編集します。
『url="#"』の『#』を削除して表示させたいページの URL を入力します。
わたしの場合は『url="https://raydego.com/"』となります。
『title="ボタン"』を『title="トップページへ戻る"』と書き換えます。
ここはボタンに表示されるテキストなので、『Home』や『ホームへ戻る』などご自身のサイトのデザインに合わせて書き換えてください。
ボタンが設置されました。
ボタンをクリックしてトップページが表示されれば完成です。
わたしのサイトの場合、ボタンが白く目立つのでボタンの色をページの色に合わせました。
わたしのサイトの404エラーページはこのようになりました。
最後に下書き保存されている『ボタンタグ取得』の投稿をゴミ箱へ移動して作業は終了です。
まとめ
404エラーページを作る事に時間を掛けるよりも記事を書いた方がいいのでしょう。
しかしデフォルトのままではすぐにサイトを離脱されてしまいます。
最低限検索ボックスと Home ボタンは設置しておくことをおすすめします。
読者の直帰率を上げない為にも404エラーページを疎かにしないようにしましょう
