htmlソース

「Not Found」という404エラー表示のページをオリジナルにするには「.htaccess」の編集が必須です

2020.10.24
この記事は約6分で読めます。

notfound404.jpg通称「404エラー」と言われているのが「404 Not Found」というホームページの表示エラーです。404エラーは、ブラウザで該当ページのURLを開くことができない場合に発生します。主に、そのページが移転したり、URL表示が間違っていたりすることが原因です。しかし、404エラーのページは単に「Not Found」と表示されることが多く、ユーザーがそのサイトから離脱してしまう原因になってしまいます。またSEO的にもこの問題を放置するのはマイナスです。
なので、できればオリジナルの404エラーページを作成し、もしも404エラーが起きてしまってもそのオリジナルの404ページを開くようにしましょう。

当サイトの404エラーページ

当サイトも404エラーが発生した場合は、専用の404エラーページを表示するようにしています。

▼当サイトの404エラーページ
dm2cojp404page.jpg

当サイトはMT（ムーバブルタイプ）で構築しています。上記の404エラーページはMTのテンプレートに組み込んであります。

▼404エラーページのテンプレート
dm2cojp404tmpl.jpg

このテンプレートで
https://dm2.co.jp/404.html
というページを生成しています。

最近はワードプレスでの構築案件が多いので、MTで404エラーページを作成することがほぼなくなってしまいました。ワードプレスだと標準で404エラーページを出力してくれますからラクですね。しかも、プラグインを使えばオリジナルの404エラーページを固定ページで作成し、そのページを404エラーページとして指定することもできるので、割と簡単に設定が可能になりました。

しかし、一部のサーバやネットショップなどの専用サーバでは、404エラーページがあまりいい感じで表示されない例も見受けます。

できるだけオリジナルの404エラーページを作成したうえで、表示するようにしたほうがいいです。

オリジナルの404エラーページを表示する方法

notfounderror404.jpg

オリジナルの404エラーページを作成したとして、そのページを404エラーが発生したときに表示させるには、「.htaccess」の内容を編集する必要があります。

オリジナルの404エラーページを作成する

まずは、オリジナルの404エラーのページを作成しておきます。

そのページを
404.html
という名前でアップロードしておきます。

「.htaccess」を編集する

次は「.htaccess」の設定です。

おそらくすでに「.htaccess」があるはずなので、

ErrorDocument 404 /404.html

という一行を追記します。

この一行だけで「404エラーが発生したらhttps://********.com/404.htmlを開け」ということを示しています。ここでの「https://********.com」は自分のサイトのドメインという意味ですが、上記の「.htaccess」では省略して相対アドレス表示にしています。

なので、「404.html」をルートディレクトリにあたるところにアップロードすればOKです。レンタルサーバによってルートディレクトリの場所は微妙に違うので、FTPソフトやサーバ管理画面のファイルアップロード画面では操作にご注意ください。

ショップサーブで自作の404エラーページを表示する方法

通販サイトの場合は買い物かごなどの高度でセキュリティ要件の高い動作をする関係で、自作の404エラーがうまく設定できない場合があります。

ショップサーブもそのひとつです。

/smp/ 配下
/SHOP/ 配下
のカテゴリや商品詳細ページなどについては自動的に404エラーページが表示されますので、自作の404エラーページを表示させることができません。

しかし、それ以外のドメイン直下のURLの場合は、自作の404エラーページを表示させることができます。

まず事前に「404.html」を作成しておき、「/docs」というフォルダに「404.html」というファイルをFTPソフトでアップロードしておきます。

次に「/docs」というフォルダには「.htaccess」がありますので、バックアップしたうえで、

ErrorDocument 404 /404.html

という一行を追記します。

これでOKのはずです。

▼ショップサーブにFTP接続した画面
ftpshopservedocs.jpg

参考までに、今回処理した「.htaccess」ファイルを紹介しておきます。

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR,NC] RewriteCond %{REQUEST_FILENAME} -d [NC] RewriteCond %{REQUEST_URI} !^/Report/(.*) [NC] RewriteCond %{REQUEST_URI} !^/pic-labo/(.*) [NC] RewriteCond %{HTTP_HOST} !^www\.********\.co\.jp [NC] RewriteRule ^(.*) http://www.********.co.jp/$1 [R=301,L] RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_USER_AGENT} ^DoCoMo/ [OR] RewriteCond %{HTTP_USER_AGENT} ^(J-PHONE|J-EMULATOR)/ [OR] RewriteCond %{HTTP_USER_AGENT} ^(Vodafone|Vemulator|SoftBank)/ [OR] RewriteCond %{HTTP_USER_AGENT} UP.Browser
RewriteRule ^$ /mbp/index.html [R] RewriteCond %{HTTP_USER_AGENT} ^DoCoMo/ [OR] RewriteCond %{HTTP_USER_AGENT} ^(J-PHONE|J-EMULATOR)/ [OR] RewriteCond %{HTTP_USER_AGENT} ^(Vodafone|Vemulator|SoftBank)/ [OR] RewriteCond %{HTTP_USER_AGENT} UP.Browser
RewriteRule ^index.html$ /mbp/index.html [R] ErrorDocument 404 /404.html

※赤文字のところは自社サイトの独自ドメインに応じて編集が必要です。
※最終行は必ず一行空白にしてください。（空白行がないとうまく動作しない恐れがあります）

ショップサーブで実際に設定したファイル

404.htmlページの作成方法は以下のようにしました。

１．/SHOP/00000000.htmlを開く（存在しない/SHOP直下のURLです）
→404エラーページが表示されます

２．そのページのhtmlソースを開きエディタで編集し「404.html」として保存する
→ブラウザの右クリックでソース表示できます
→htmlの編集はメモ帳でも可能ですができるだけ専用のエディタを使用したほうがいいです

３．編集の際に<title>404エラーが発生しました「404.html」</title>を入れる
→ショップサーブの自動生成404エラーページにはタイトルタグが空なので、自作した404エラーと区別する意味でも入れると便利です

４．メタリフレッシュ機能で30秒後にトップページにリダイレクトさせる

<title>404エラーが発生しました「404.html」</title>
<meta http-equiv=”refresh” content=”30;URL=/”>

この２行をヘッダ内に挿入すればいけると思います。

なお、ショップサーブの「.htaccess」ファイルは、管理画面の操作などで初期状態に戻る場合があります。
必ず「.htaccess」ファイルをバックアップをしておきましょう。もし、初期化された場合は、カスタムした状態にその都度戻す必要がありますのでご注意ください。