「最近リダイレクトをしたいんだけどブログサービスで書いているんですよね。むつかしいことはわからないから、コピペでできるリダイレクトする方法をしりたいな。ついでに注意点とかも教えてくれるとうれしいな。」
こんなお悩みにお答えします。
この記事でわかること
- サーバーを使わないブログサービス使用の場合には、サーバーサイドのリダイレクトができない
- HTMLでページをリダイレクトの種類とやり方
- HTMLでリダイレクトする上での注意点
記事の信頼性
こんにちわ、Jouji(@jouji0720)です。僕はwebライター4年目で、webライティングのみで生活しています。
そんな僕が、今回はそんなあなたに、「HTMLで新ページにリダイレクトする方法」をご紹介していきましょう。
この記事を読めば、HTMLで新ページにリダイレクトする方法だけでなく、ブログサービスのリダイレクトの実態、そして注意点も丸っとばっちりわかっちゃいます。
ぜひ最後までお読みいただき、参考にしてくださいね。
サーバーを使わないブログサービスの場合、サーバーサイドのリダイレクトができない
サーバーを使わないブログサービスの場合は、サーバーサイドのリダイレクトができません。というのも、サーバー自体がブログサービスの運営会社のものになるからです。
使っているプランが無料・有料には関係なく、サーバーサイドのリダイレクトができません。ですのでHTMLを使ったリダイレクトしかできないのです。
HTMLでページをリダイレクトの種類とやり方
HTMLでページをリダイレクトする方法の種類にはどんなものがあるのでしょうか。
HTMLでのリダイレクトの方法
種類は次の通りです。
- Javascriptを使う方法
- meta refreshを使う方法
では、詳しく見ていきましょう。
Javascriptを使う方法
HTMLでのリダイレクトの方法の1つ目は、javascriptを使う方法です。この方法はJavascriptのコードを書くことによって転送する方法ですね。
この方法は遅延が大きくなるなどの問題があるけれど、この方法しか使えない環境があるためにGoogleはJavascriptリダイレクトをサポートしているとジョン・ミューラー氏もコメントで補足してらっしゃいます。
そのためにJavascriptを書く方法は、サーバーサイドリダイレクトが使えないときにつかう代替の方法ともいえるのですね。
meta refreshを使う方法
HTMLでのリダイレクトの方法の2つ目は、meta refreshを使う方法です。meta refreshは、htmlの<head>部分に記述することにより転送する方法です。
とはいえ検索エンジンの王様と呼ばれるGoogle先生も、meta refreshをサポートしてはいますが、非推奨のやり方という立場に立っています。
Javascriptによるリダイレクトができないときの、最終手段に使うのがよさそうです。
HTMLでのリダイレクトのやり方
HTMLでのリダイレクトのやり方を、ご紹介していきましょう。
リダイレクトの方法は以下の通り。
- Javascriptを使う場合
- metaタグを使う場合
では詳しく見ていきましょう。
Javascriptを使う場合
Javascriptを使う方法の手順は、以下の通りです。
- コードをコピーする
- 転送前の記事にコードを貼り付ける。
詳しく見ていきましょう。
コードをコピーする
まずはコードをコピーします。
必要なコードは以下の通り。
Javascriptコード
<script type="text/javascript" language="javascript">// <![CDATA[ // リンク先URL var url = "https://(転送先のurlを入力)"; // アドレスを消して転送先のURLを貼り付ける // 説明文言と、リンクhtmlの書き出し document.write("移転しました→<a href=\"" + url + "\">" + url + "</a><br>自動で切り替わります。お待ち下さい。</p>"); // リダイレクト処理 setTimeout("redirect()", 3000); // 3秒後に転送する function redirect(){ location.href = url; } // 移行を伝える「canonical」の書き換え var link = document.getElementsByTagName("link")[0]; link.href = url; // ]]></script>
コピーしたのちにカスタマイズを忘れることないようにしましょう。
入力する内容は以下の通り。
- var url =”https://(転送先のurlを入力);”：ここに転送先のURLを入れる。
- setTimeout(“redirect()”, 3000); // 3秒後に転送する：秒数を変更できます。
上記の2点ですね。
転送前の記事にコードを貼り付ける
転送前の記事にHTML編集で貼り付けましょう。
metaタグを使う場合
metaタグを使う場合の方法は、以下の通り。
- コードをコピーする
- headタグ内に貼り付ける。
では詳しく見ていきましょう。
コードをコピーする
まずはコードをコピーしましょう。
必要なコードは、以下の通り。
metaコード
<meta http-equiv="refresh" content="秒数;URL=URL">
変更する場所は、以下の通り。
- 秒数：3秒の場合には3と入力
- URL：転送先のURLに変更
headタグ内に貼り付ける。
次に、headタグ内にコピーしたコードを貼り付けます。
※はてなブログの場合は、以下の通り。
管理画面→設定→詳細設定→headに要素を追加→コピーコードを入力。
HTMLでリダイレクトする上での注意点
HTMLでリダイレクトする上では注意点がいくつかあったりします。
注意点は次の通りです。
- リダイレクト元のページがインデックスされる
- 旧ページを残す必要がある
- javascriptオフのブラウザでは使えない
では詳しく見ていきましょう。
リダイレクト元のページがインデックスされる
HTMLでリダイレクトする上での注意点の1つ目は、リダイレクト元のページがインデックスされることです。
通常サーバーサイドのリダイレクトを使用する場合には、302を利用しない限りにはリダイレクト先のページがインデックスされます。というのも、永久的に使えるページになるからです。
でも今回のHTMLでのリダイレクト方法では、永久的なものではありません。そのために、リダイレクト元のページがインデックスされてしまいます。
旧ページを残す必要がある
HTMLでリダイレクトする上での注意点の2つ目は、旧ページを残す必要があることです。
サーバーサイドリダイレクトを利用する場合には、旧ページを残さなくても永久的に新ページへとリダイレクトを行ってくれます。
しかし今回のようなJavascriptのリダイレクト設定をする場合には、旧ページが残っていないとコードを書く場所がなくなり、リダイレクトができなくなります。
そのために旧ページを残す必要がありますね。
javascriptオフのブラウザでは使えない
HTMLでリダイレクトする上での注意点の3つ目は、javascriptオフのブラウザーでは使えないことです。
今回ご紹介している方法は、ブラウザ側で実行されるリダイレクト方法です。そのためにjavascriptオフの設定をしているブラウザー上ではリダイレクト設定ができなくなります。
そのためにもし読者がJavascriptをオフにしていた場合には、新しいページに飛ぶことができなくなります。
注意が必要です。
まとめ｜サーバーサイドが使えない場合でもリダイレクトはできる
ここまでHTMLで新ページにリダイレクトする方法というテーマでお話してきました。
よく301リダイレクトがいいといわれますが、ブログサービスを使うとその方法は使えません。しかし今回の方法を使えば、インデックスされる場所が変わりはしますが、読者目線での使いやすさが向上します。
これを機にやってみてはいかがでしょうか。
次に読むのにおすすめの記事
記事の書き方を知りたいなら、
新しいブログサービスを探しているなら、
