WordPressで運営しているウェブサイトの404 Not Found現象を適切なページに自動転送(リダイレクト)させる手順

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

運営中のページにアクセスしたら「ページが見つかりません(404エラー)」が表示されたご経験はありませんでしょうか?もし過去に運営していたページが非公開や削除されたならリンク先の設定を変更しなければなりません。URLにアクセスしたら「404 Not Found」のままだったら閲覧者からの信頼を失ってしまいます。もちろんあえて「404ページ」を表示させているのなら構いませんが「あえて404ページを表示させる意味」はほとんどありません。移転先がないなら公式サイトのTOPに飛ばしておきましょう。

下記の通り、とあるページのランディングページが「404エラー」になっていました。100歩譲って404ページがおしゃれなデザインに仕上がっているのであれば良いかもしれませんが、以下のページを見ると英語で「Not Found The requested URL was not found on this server.」と表示されているだけです。

Googleなど気の効いた企業は404ページもしっかりデザインされています。このように予期せぬ来訪者に対しても適切な導線を残しておくことはとても大切です。本当の意味での「ユーザーファースト」です。

では本日は「存在しないページ」にユーザーが訪れた際に、特定ページにURLを自動的に転送(リダイレクト)する方法をご紹介いたします。方法はシンプルで「古いURLに.htaccessを設置する」だけです。

古いURLに設置する「htaccess」には下記の記述を行います。ページが下層ディレクトリに存在する場合は「/」ではなく「/123」などとリンク元ディレクトリを変更する必要がありますのでご注意ください。

Redirect permanent / http://example.com/

転送先は「お好きなドメインのURL」でOKです。直接新しいページURLに飛ばしてしまうのも良いですが下記のように特定ページをかまして「3秒後に転送する」などとすれば閲覧者にとってはより親切です。

上記のページを挟むのであれば

Redirect permanent / http://example.com/content/redirect.html

のような指定を行い「redirect.html」側のヘッダーでmeta処理を行うのが一般的です。

<meta http-equiv="refresh" content="3;URL=https://example.com/123">

上記の書き方では「redirect.html」に訪れたユーザーは3秒後に「https://example.com/123」へ自動転送(リダイレクト)されます。仕組みとしてはシンプルですよね。設定も意外とカンタン。

念のためテスト用として「リダイレクトページ」を準備しましたので、ぜひ自動転送(リダイレクト)の流れをご確認くださいませ。下記の順番で転送がかかります。

1. 非公開化されたページにアクセス
https://wp-labo.com/lp123

2. 転送用のページが表示(3秒間のみ)
内容は「https://wp-labo.com/lp123-url-redirect」にアップロードされたデータ

3. 以下URLに自動転送(ページが移動)
指定先は「https://wp-labo.com」で設定

ファイルのアップ先は「/lp123」に「.htaccess」。「/lp123-redirect-test」に「htmlファイル一式」。

「.htaccess」への記述内容は下記です。

Redirect permanent /lp123 https://wp-labo.com/lp123-url-redirect

そして「/lp123-url-redirect」にアップしたhtmlファイルが下記となっています。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="refresh" content="3; url=https://wp-labo.com">
</head>
<body>
現在ページを移動しています。少々お待ちくださいませ。<br>
もし画面が切り替わらない場合は下記の文字リンクをクリックしてください。<br>
<br>
<a href="https://wp-labo.com">リンク先を確認する</a>
</body>
</html>

ちなみに「style.css」でカンタンなレイアウト調整を行なっていて、さらにstyle.cssでは「reset.css」も読み込んでいます。割と複雑な作業なので少しむずかしく感じますがファイル一式を見ながら読めばイメージをつかみやすいです。ファイル一式はこちらからダウンロード可能なのでぜひご活用ください。

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録されているプラグインだけでは機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグイン無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する