紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

HTMLで新ページにリダイレクトする方法【コピペで簡単】

HTMLで新ページにリダイレクトする方法①

 

f:id:slash1196:20200520205950j:plain

ブログ初心者

「最近リダイレクトをしたいんだけどブログサービスで書いているんですよね。むつかしいことはわからないからコピペでできるリダイレクトする方法をしりたいな。ついでに注意点とかも教えてくれるとうれしいな。」

 

こんなお悩みにお答えします。

 

この記事でわかること

  • サーバーを使わないブログサービス使用の場合には、サーバーサイドのリダイレクトができない
  • HTMLでページをリダイレクトの種類とやり方
  • HTMLでリダイレクトする上での注意点

 

こんにちわ、紅蓮です。

 

ブログサービスで記事を書いていて、今運営しているブログから、別のブログサービスに移動したりしたい場合ってありますよね。

 

そんな時にどうやって移動したらいいかわからないと悩んでいませんか?

 

今回はそんなあなたに、「HTMLで新ページにリダイレクトする方法」をご紹介していきましょう。

 

この記事を読めば、HTMLで新ページにリダイレクトする方法だけでなく、ブログサービスのリダイレクトの実態、そして注意点も丸っとばっちりわかっちゃいます。

 

この記事を書く僕はブログ運営歴は3年目。

今ではアフィリエイトからの収益も伸びて毎月3000円ほど入ってきますね。

 

そんな僕もリダイレクトの方法がわからずに結構悩んでいましたが、ある方法を実行してみると検索上位に乗るものも増えてきましたね。

 

そんな方法でもあるので今回もぜひ最後までお読みいただけたらと思いますね。

 

では行ってみましょう。
Here we go!!

 

 

 

サーバーを使わないブログサービス使用の場合には、サーバーサイドのリダイレクトができない

できない

実はサーバーを使わない俗に言われるブログサービスと呼ばれるもので書いている場合には、サーバーサイドのリダイレクトができません。

 

 

というのもサーバー自体がブログサービスの運営会社のものになるからですね。

 

これは使っているプランが無料・有料には関係なく、サーバーサイドのリダイレクトができませんね。

 

ですのでHTMLを使ったクライアントサイドのリダイレクトしかできないのです。

 

 

HTMLでページをリダイレクトの種類とやり方

howto

HTMLでページをリダイレクトする方法の種類にはどんなものがあるのでしょうか。

 

 

HTMLでのリダイレクトの種類

種類は以下の通り。

 

  • 方法①Javascriptを使う方法
  • 方法②meta refreshを使う方法

 

では詳しく見ていきましょう。

 

方法①Javascriptを使う方法

種類の一つ目は、javascriptを使う方法ですね。

 

この方法はJavascriptのコードを書くことによって転送する方法ですね。

 

この方法は遅延が大きくなるなどの問題があるけれど、この方法しか使えない環境があるためにGoogleはJavascriptリダイレクトをサポートしているとジョンミューラー氏もコメントで補足してらっしゃいますよね。

 

そのためにJavascriptを書く方法は、サーバーサイドリダイレクトが使えないときにつかう代替の方法ともいえるのですね。

 

方法②meta refreshを使う方法

種類の2つ目はmeta refreshを使う方法ですね。

 

meta refreshは、htmlの<head>部分に記述することにより転送する方法ですね。

 

とはいえ検索エンジンの王様と呼ばれるGoogle先生もmetarefreshをサポートして這いますが、非推奨のやり方という立場に立っています。

 

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秒後に転送する:秒数を変更できます。

 

上記の二点ですね。

 

手順②転送前の記事にコードを貼り付ける。

f:id:slash1196:20210807090059j:plain

転送前の記事にHTML編集で貼り付けましょう。

 

方法②metaタグを使う場合

metaタグを使う場合の方法は、以下の通り。

 

  • 手順①コードをコピーする
  • 手順②headタグ内に貼り付ける。

 

では詳しく見ていきましょう。

 

手順①コードをコピーする

まずはコードをコピーしましょう。

 

必要なコードは、以下の通り。

 

metaコード

<meta http-equiv="refresh" content="秒数;URL=URL">

 

変更する場所は以下の通り。

 

  • 秒数:3秒の場合には3と入力
  • URL:転送先のURLに変更

 

という感じ。

 

手順②headタグ内に貼り付ける。

次に、headタグ内にコピーしたコードを貼り付けます。

 

※はてなブログの場合は、以下の通り。

f:id:slash1196:20210524163311j:plain

管理画面→設定→詳細設定→headに要素を追加→コピーコードを入力。

 

HTMLでリダイレクトする上での注意点

注意点

HTMLでリダイレクトする上では注意点がいくつかあったりします。

 

注意点は以下の通り。

 

  • 注意点①リダイレクト元のページがインデックスされる
  • 注意点②旧ページを残す必要があるためにコピーコンテンツになりやすい
  • 注意点③javascriptオフのブラウザでは使えない
  • 注意点④ページの評価が引き継がれる保証がない


では詳しく見ていきましょう。

 

注意点①リダイレクト元のページがインデックスされる

まず注意点の1つ目は、リダイレクト元のページがインデックスされることですね。

 

通常サーバーサイドのリダイレクトを使用する場合には、302を利用しない限りにはリダイレクト先のページがインデックスされるんです。

 

というのも、永久的に使えるページになるからですね。

 

でも今回お話ししたHTMLでのリダイレクト方法では、永久的なものではないわけです。

 

そのために、リダイレクト元のページがインデックスされますね。

 

注意点②旧ページを残す必要があるため。

2つ目の注意点は、旧ページを残す必要があるためにコピーコンテンツになりやすいことなんですよね。

 

サーバーサイドリダイレクトを利用する場合には旧ページを残さなくても永久的に新ページへとリダイレクトを行ってくれます。

 

しかし今回のようなJavascriptのリダイレクト設定をする場合には、旧ページが残っていないとコードを書く場所が必要になるのでリダイレクトができなくなるんですよね。

 

そのために旧ページを残す必要がありますね。

 

注意点③javascriptオフのブラウザでは使えない

注意点の3つ目は、javascriptオフのブラウザーでは使えないということですね。

 

今回ご紹介している方法は、ブラウザ側で実行されるリダイレクト方法です。

 

そのためにjavascriptオフの設定をしているブラウザー上ではリダイレクト設定ができなくなりますね。

 

注意点④ページの評価が正しく引き継がれる保証がない

注意点の4つ目は、ページの評価が正しく引き継がれる保証がないことですね。

 

というのもこの方法は、ブラウザー側で実行されるリダイレクト法です。

 

そのために旧URLのページの評価を引き継がれる保証はどこにもないわけですね。

 

まとめ|サーバーサイドが使えない場合でもリダイレクトはできる

お疲れさまでした。

 

ここまでHTMLで新ページにリダイレクトする方法というテーマでお話してきました。

 

まとめると以下の通りです。

 

まとめ
  • サーバーを使わないブログサービス使用の場合には、サーバーサイドのリダイレクトができない
  • HTMLでページをリダイレクトする方法の種類
    • ②Javascriptを使う方法
    • ①meta refreshを使う方法
  • リダイレクトのやり方
    • ①Javasciptを使う方法
      • ①コードをコピーする
      • ②転送前の記事にコードを貼り付ける。
    • metaタグを使う場合
      • ①コードをコピーする
      • ②headタグ内に貼り付ける。
  • HTMLでリダイレクトする上での注意点
    • ①リダイレクト元のページがインデックスされる
    • ②旧ページを残す必要があるためにコピーコンテンツになりやすい
    • ③Javascriptオフのブラウザでは使えない
    • ④ページの評価が引き継がれる保証がない

 

よく301リダイレクトがいいといわれますが、悲しいかなブログサービスを使うとその方法は使えないです。

 

しかし今回の方法を使えば、インデックスされる場所が変わりはしますが読者が読みに来ないことはないですね。

 

これを気にぜひともやってみてはいかがでしょうか。きっと読者にとっていいブログになるはずです。

 

ってことで今回はこの辺で。

また次回に。