⇒【東証プライム企業も多数利用!】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは?
Webサイトを長年運営していると、何らかの理由でサイトのURL自体を変える必要がでてくることがあります。
そんなとき、古いURLのサイトの訪問者を自動で新しいサイトに連れて行ってくれる便利な機能を持つのが、「meta refreshタグ」です。
meta refreshタグを使用すれば、古いURLのサイトを訪れたユーザーのアクセスを取りこぼさなくて済むようになります。
この記事では、meta refreshタグの効果や設定方法を解説していきますので、ぜひお役立てください。
1.HTMLで使える「meta refresh」とは?
meta refreshとは、サイト訪問者のアクセスを自動で「リダイレクト」させる役割を持ったHTMLのタグの一つです。
例えば、ユーザーがAサイト(http://www.a-site.com)を訪問した際に、すでにAサイトは閉鎖済みで新しいAAサイト(https://www.aa-site.com)に改装していた場合には、AサイトからAAサイトに案内しなければいけません。
上記の例のように既存サイトのコンテンツを新しい別ページに移した際に、ユーザーを新しいURLのサイトに転送するためのタグが、meta refreshです。
2.meta refreshとは?設定する効果は?
使う場面としてはサイトのドメインやページのアドレスを変更したときや、サイトをhttps化したときなどが挙げられます。また 旧サイトに訪れた人に対して「アドレスが変わったよ!」といったことを知らせる代わりになります。
なんらかの理由で公開時のアドレスと異なる記事へ移転や変更などした際、そのままにしておくと元のアドレスでエラーが表示されたり、古い記事が表示されたりしてしまいます。これでは知らずに訪れたユーザーに対して不親切です。
そうしたことが起こらないよう、元のアドレスにアクセスしてきたユーザーを適切なURLへと自動で転送してあげるのがこのmeta refreshの役割です。
リダイレクトさせるまでの秒数を任意で指定できるため、既存ページにお断りの文章などを掲載してリダイレクトされることや理由などを伝えることも可能。ユーザーを混乱させることなく、リダイレクトさせられるといった効果もあります。
3.meta refreshの設置方法
自身のサイトをhttps化させる人などがこれから増えてくると思うので、meta refreshの設置方法をお教えいたします。
数あるリダイレクト方法の中でも一番簡単でお手軽に設置することが可能です。
3-1.meta refreshの書き方
meta refreshは以下のようなHTMLタグとして自身のサイトのソース内に記述します。
<meta http-equiv=”refresh” content=”秒数;URL=URL”>
1
<meta http-equiv=”refresh” content=”秒数;URL=URL”>
「秒数」の部分ではサイトを訪れた人が何秒後に飛んでもらうか、数値で指定できます。 半角数字で「30」と入力すれば、ユーザーがサイトに訪れてから30秒後に指定したURLへ飛ばすことができるのです。
「URL」のところに飛ばす先のURLを入れてあげれば、指定の秒数の後に、書かれたURLへ自動で飛ばしてくれます。それぞれ任意の数字とURLを入れましょう。
▼例
<meta http-equiv=”refresh” content=”30;URL=https://www.sample.com”>
1
<meta http-equiv=”refresh” content=”30;URL=https://www.sample.com”>
上記例の場合、ユーザーがサイトに訪れてから30秒経つと「https://www.sample.com」のアドレスに自動で飛ばされます。
自動で飛ばされなかった場合を考えて、飛ばす前のサイトには飛ばす先へのリンクを設置しておくと親切ですね。
3-2.meta refreshを書く場所
meta refreshはHTMLタグの中でも、metaタグと呼ばれるものになります。
metaタグは通常のHTMLとは違い、bodyタグの中ではなくheadタグの中に表記しなければ実行されないタグです。 なので、meta refreshはheadタグ内に記述する必要があります。
<head>~</head>で囲まれた場所ならどこでも構いません。自身が把握しやすい場所に記述してください。
不慣れなうちは、</head>の直前などに表記すると、チェックの際にもわかりやすくておすすめです。
3-3.meta refreshでリダイレクトされているかチェックするツール
meta refreshを設置したページが無事にリダイレクトされているかは、アドレスバーに元のURLを入力することで簡単に確認ができます。
とはいえ実際にサイトにmeta refreshを設置してみて、指定した秒数後に指定したサイトへ移動されることを確認しても、本当にちゃんと処理されているのか不安に思う人も多いでしょう。
そんなときに便利なのが、実際にちゃんとしたステータスコードでリダイレクトが行われているかどうか、安全にチェックしてくれるウェブツールです。
どれも普段使用しているブラウザなどに標準で搭載されているツールで、「開発者ツール」や「デベロッパーツール」と呼ばれているものです。
たとえばGoogle Chromeの「デベロッパーツール」では、「Network」というタブで無事にリダイレクトされているかを確認できます。
- Windowsの場合「F12」キーを押す(Macなら「Command+Option+I」)
- 上のタブの「Network」をクリック
- 二段目「Preserve log」のチェックを入れる
- アドレスバーにテストをしたい移転元のURLを入力
- ログをチェックする
- ステータス欄で確認(404が表記されていなければ大丈夫です)
Google Chromeでは、「Redirect Path」といった便利な拡張機能もあるので、転送したURLが多い場合などには活用してみるのもおすすめです。
単純にmetaタグが正しく挿入されているかチェックしたい場合には、デベロッパーツールの「Elements」タブでソースが確認できますので、<head>~</head>内を確認すればOKです。
4.meta refreshを設置する際の注意点
meta refreshタグはSEOにおいてリスクが存在しています。
なぜなら転送目的での使用にはGoogleが推奨するタグではないからです。
meta refreshタグを使用する際は以下の点に注意してください。
- 基本的には301 / 302転送を使う
- ユーザビリティが低下するリスクがある
- SEO評価が引き継がれない場合がある
それぞれ詳しく解説します。
4-1.基本的には301 / 302転送を使う
リダイレクトによってユーザーを転送先へ移動させたい場合は、301リダイレクトや302リダイレクトを使用するのが理想です。
meta refreshタグは301、302リダイレクトを設定できない時に使うタグとして認識しておきましょう。
301、302リダイレクトはそれぞれの違いがあります。
〇301リダイレクト
恒久的にリダイレクトを行いたい場合
〇302リダイレクト
一時的にリダイレクトを行いたい場合
301、302リダイレクトの設定には「.htaccessファイル」を活用します。ただし、無料のCMSやブログサービスを利用している場合、「.htaccessファイル」の変更ができないケースがあります。
その場合はmeta refreshタグやjavascriptを使い、以下のように記述するのがおすすめです。
meta refresh&rel=”canonical”
meta refreshタグは<head>内の設置で済むため、「.htaccessファイル」の変更ができない場合でも転送処理を行うことができます。
meta refreshタグは、何かしらの理由で301、302リダイレクトを使用できない際の代替策として認識しておきましょう。
4-2.ユーザビリティが低下するリスクがある
meta refreshタグは転送までの時間を設定できますが、転送時間によってはユーザビリティを損ねる可能性があります。
ユーザーが記事を読んでいる最中に転送処理がかかってしまうリスクがあるからです。
コンテンツ量に対して転送までの秒数が短いと、ユーザーが記事の途中まで読んだタイミングで別ページに転送、自動更新してしまい、途中までスクロールしていた位置からページの冒頭に遷移させられてしまうこともあります。
ユーザーにとってはまた途中まで読み進めた箇所を探す必要が生じるため、ストレスを感じさせてしまう恐れがあります。
ユーザビリティを損ねないようにするためにも、meta refreshタグを設定する際は転送までの時間を0秒に設定しておくことが望ましいです。
4-3.SEO評価が引き継がれない場合がある
meta refreshタグは正しく転送元のSEO評価が転送先に引き継がれない恐れがあります。
下記の理由によって、ページの移動が検索エンジンのクローラーに伝わらない可能性があるからです。
- meta refreshはW3Cで推奨されていない
- meta refreshはページの恒久的な移動を表すステータスコード301を返さない
Googleのジョン氏も、ヘルプフォーラム内においてユーザーからの質問に応える形で、「SEO上、meta refreshを転送に使用することを勧めない」と回答しています。
先述の通り、meta refreshは301、302リダイレクトを利用できない場合に限り使用するようにしましょう。
5.meta refreshが正しく設定されているかチェックする方法
meta refreshタグを設定したときは、実際に転送元URLにアクセスするだけで確認できます。
アドレスバーに元URLを入力し、meta refreshで設定した移転先のページURLに転送されれば正しく設定されていると言えます。
そのほか、以下のようなツールで確認することも可能です。
- Google Chrome拡張機能「Lighthouse」
- Google Chrome拡張機能「Redirect Path」
- Google Chromeデベロッパーツール(「F12」で立ち上げ可能)
- リダイレクトチェッカ
- HTTPステータスコードチェッカー
正しく設定されていない場合は404エラーなどが表示されます。
6.まとめ
この記事では、meta refreshタグの機能や使い方を紹介しました。
meta refreshタグは既存のサイトから新しく作成したサイトにリダイレクトさせる役割があるタグで、head内に記述するだけで簡単に機能させることができます。
ただし、SEOの評価を引き継ぎできない可能性がある点には注意が必要で、基本的には、SEOの評価を引き継ぐことができる「301・302リダイレクト」を利用するのがおすすめです。
とはいえ、条件によっては301・302リダイレクトを動作させられないこともあるため、そのようなときに備えてmeta refreshの使用方法もしっかり押さえておくようにしましょう。
⇒【東証プライム企業も多数利用!】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは?