HTMLだけでリダイレクト処理をする方法

HTMLコードイメージ

大阪府豊中市でホームページ制作|スマートフォンアプリ開発を行なっているImpreateSoft(インプレイトソフト)です。

ホームページのリニューアル作業やリライト作業などをしているときに、前のホームページの記事を新しい記事に飛ばしたい!ということをしたいことがあります。
前回のページのURLを新しいURLへ飛ばす(転送)することを「リダイレクト」といいます。

このリダイレクトにはいくつかの方法があるのですが、今回はHTMLだけでリダイレクトをする方法を紹介します。

meta refreshタグを使ってリダイレクト

やり方は簡単で、HTML内に一行のコードを追加するだけでいけます。
今回はサンプル用に2つのページとソースコードを用意しています。

リダイレクトしないページ

下記がリダイレクトしない簡単なHTMLページになります。
https://impreatesoft.jp/sample/sample1.html

「このページはリダイレクトしません!」と書かれたシンプルなページです。
このページのHTMLコードは下記のようになっています。

ソースコード

<!DOCTYPE html>
<html>
<head>
<title>リダイレクトサンプル1</title>
<meta charset="utf-8">
</head>
<body>
<h1>このページはリダイレクトしません!</h1>
</body>
</html>

このようになっているHTMLページに1行追加するだけでリダイレクト処理ができるようになります。

リダイレクトするページ

下記がリダイレクトする簡単なHTMLページになります。
https://impreatesoft.jp/sample/sample2.html

「このページはリダイレクトします」と書かれて、弊社のTOPページに遷移することが確認できると思います。
このページのHTMLコードは下記のようになっています。

ソースコード

<!DOCTYPE html>
<html>
<head>
<title>リダイレクトサンプル2</title>
<meta charset="utf-8">
<meta http-equiv="refresh" content="5;URL='https://impreatesoft.jp/'">
</head>
<body>
<h1>このページはリダイレクトします</h1>
</body>
</html>

追加したソースコードはハイライトで表した部分です。

<meta http-equiv=”refresh” content=”5;URL=’https://impreatesoft.jp’/”>

このコードでは、5秒後にhttps://impreatesoft.jpのホームページにリダイレクト(転送)するという命令が書かれています。
そのため、0秒後に遷移させたい場合は、content=”5″の部分をcontent=”0″に。
特定のURLに遷移させたい場合は、URL=’転送するページのURL’を記入することで転送することができます。

WordPressでリダイレクトを行う場合

WordPressでリダイレクト処理を行う場合は、便利なプラグインがあるためそちらの使用をオススメします。
WordPressのリダイレクト処理方法はまた、別記事にて紹介させていただきます。

リダイレクトしてSEO対策を

リダイレクトするメリットは前回のURLのグーグルの検索結果(SEO)を引き継ぐことができる点です。
そのため、ホームページのリニューアル時や古い記事を新しい記事に置き換えるときなどにしっかりとリダイレクト処理を行いましょう。
今回はWordPressなどを使っておらず、HTMLだけで構成されたホームページでもリダイレクト処理できるように、HTMLだけでリダイレクトできる方法を紹介させていただきました。

インプレイトソフト代表。プログラマーとして、iPhoneアプリ開発、プログラミング教室、WordPressによるホームページ制作をメインに活動しています。

関連記事

  1. CSSイメージ画像
  2. Web担当者

最近の記事

  1. Localization native development regionをJapanに設定
  2. うさじゃんぷスクリーンショット1
  3. うさじゃんぷスクリーンショット1

スポンサードバナー

PAGE TOP