お困り女子自動的に別のページに移動するアレやりたいです。
なべくんメタリフレッシュはHTMLだけで実装できますよ。
お問合せ後、『ありがとうございました』と表示されたのちに自動的にトップページに移動するメタリフレッシュ。
実装はとても簡単で、以下のhtmlコードを実装したいページにコピペすればOKです。
<meta http-equiv="refresh" content="秒数; url=リダイレクト先のURL">上記のコードの秒数とリダイレクト先のURLを設定すれば、ものの数十秒で実装完了。
本記事では実装サンプルコードを用いて、実装上の注意点やメリット・デメリットなどについても解説しています。
サクッとメタリフを使いたいけど、ペナルティやSEO的評価を下げたくない方はぜひ参考にしてください。
メタリフ(meta refresh)とは？自動アクションをするHTMLタグの一つ
お困り女子め、メタリフってなに？
なべくんメタリフレッシュというHTMLタグのことを指します。
メタリフレッシュとは、ウェブページが一定時間経過後に自動的にリフレッシュ（再読み込み）されたり、別のURLにリダイレクト（転送）されたりするために用いられるHTMLタグのことを指します。
基本的な構造は以下の通り。
<meta http-equiv="refresh" content="秒数; url=リダイレクト先のURL">サイト運営者の人は、content=”秒数; url=リダイレクト先のURL”の部分だけ理解して使えるようになれば問題ありません。
メタリフ(meta refresh)を5秒後に再読み込みさせるサンプルコード
メタリフで5秒後に再読み込みをさせるコードは下記のとおりです。
<meta http-equiv="refresh" content="5">content=”5″部分の5を任意の秒数に変更すれば、指定した秒数が経過したのちに再読み込みが発生します。
ただし、メタリフの動作秒数をあまりにも長い時間に設定してしまうとWebブラウザー側で読込みエラーが発生することもあるので、特別な意図がない限りは長時間の設定は避けるのが無難です。
メタリフ(meta refresh)を10秒後に別のURLにリダイレクトさせるサンプルコード
メタリフで10秒後に指定のURLにリダイレクトさせるコードは下記のとおりです。
<meta http-equiv="refresh" content="10; url=https://example.com">- content=”10″：10秒後
- url=https://example.com：指定のURLにリダイレクト
上記の通り、指定のURLにリダイレクトさせたい場合、url=以降の部分に指定のURLをコピペすればOKです。
- コーポレートサイトの問合せ後、サンクスページからトップページへリダイレクト
- サイトやブログなどのお引越しで新しいURLにリダイレクト
- アフィサイトなどで指定のURLからアフィリンクにリダイレクト
特定ページに来たアクセスを別のURLに自動的に遷移させる目的でさまざまな場面で活用されています。
メタリフ(meta refresh)を指定の場所までスクロールされたら動作させるサンプルコード
悪用厳禁ですが、特定の場所まで読み込んだらメタリフを動作させることも可能です。
<div id="redirect-trigger" style="height: 1px;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var redirectTrigger = document.getElementById('redirect-trigger');
if ('IntersectionObserver' in window) {
var observer = new IntersectionObserver(function(entries) {
if (entries[0].isIntersecting) {
setTimeout(function() {
window.location.href = "https://hoge.com/";
}, 1000); // 1000ミリ秒 = 1秒
}
}, { threshold: 1.0 });
observer.observe(redirectTrigger);
} else {
// Fallback for browsers that don't support IntersectionObserver
window.addEventListener('scroll', function() {
if (redirectTrigger.getBoundingClientRect().top <= window.innerHeight) {
setTimeout(function() {
window.location.href = "https://hoge.com/";
}, 1000); // 1000ミリ秒 = 1秒
}
});
}
});
</script>上記のコードを簡単に説明すると上記コード設置部分がPCやスマホの画面に表示されたら、指定秒数経過後、指定のURLにリダイレクトするものです。トリガーなんてごにょごにょしたのは理解不要。
前述までのコードと異なり、少し高度なことをしているので、ミリ秒の設定とリダイレクト先URLを入力する箇所が2箇所になっている点に注意してください。
メタリフ(meta refresh)のメリット・デメリット・注意点
お悩み女子メタリフにメリットやデメリットはあるの？
なべくん簡単に設置できる反面、多用するとSEO的に悪影響がでることがあります。
メタリフレッシュの実装に際して、以下のメリットとデメリットが挙げられます。
| メリット | デメリット |
|---|---|
| 簡単に設定できる 自動的に実行される メンテナンスが楽 | ユーザー体験の悪化 SEO評価に悪影響 リンク評価が引き継がれない |
メタリフレッシュは他のリダイレクト方法と異なり、ページ内に1行追加すれば簡単に実装できるとても便利なコードです。
しかし、悪意あるメタリフの使用は、UXの悪化を招くだけでなく、検索エンジンによる評価に悪影響を与えることがあり、ときにはクローキングやスパム行為などのペナルティを受けることがあります。
SEO集客を中心におこなっているメディアでリダイレクトをかけるときは、. htaccessで301や302でリダイレクトをかけるようにし、SEO的な評価に影響が出ないように配慮するなどして、広告効果計測やサイト移転などといった特定の目的がなければ、なるべくメタリフの使用は避けるのが無難です。
念のため、ワードプレスで実装する際の注意点として、ブロックエディター・クラシックエディターのキャプチャーを掲載いたします。
使用エディターによって実装方法が異なるので、お使いのエディターを確認の上、導入してください。
- クラシックエディター：テキストエディターに変更
- ブロックエディター：カスタムHTMLブロックを使用
- はてぶ：HTML編集に変更
- 無料ブログ：メタリフ禁止
- 無料Webサービス：使えるところもある
上記にワードプレスと一般的な無料ブログの使用例を掲載しました。大半の無料ブログはメタタグの使用が禁止されていたり、Java scryptの使用が禁止されていたりします。
まとめ：用法・要領を守って適切にメタリフ(meta refresh)を使おう
喜ぶ女子HTML1行で実装できるなんて便利すぎ。
なべくんスパム利用も多いので取扱いに要注意。
以下に本記事で掲載したサンプルコードを再掲載します。
// 5秒後に再読み込み
<meta http-equiv="refresh" content="5">// 10秒後に別のURLにリダイレクト
<meta http-equiv="refresh" content="10; url=https://example.com">//コード設置場所が画面に表示されたらメタリフ発動
<div id="redirect-trigger" style="height: 1px;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var redirectTrigger = document.getElementById('redirect-trigger');
if ('IntersectionObserver' in window) {
var observer = new IntersectionObserver(function(entries) {
if (entries[0].isIntersecting) {
setTimeout(function() {
window.location.href = "https://watanabe.uk/";
}, 5000); // 5000ミリ秒 = 5秒
}
}, { threshold: 1.0 });
observer.observe(redirectTrigger);
} else {
// Fallback for browsers that don't support IntersectionObserver
window.addEventListener('scroll', function() {
if (redirectTrigger.getBoundingClientRect().top <= window.innerHeight) {
setTimeout(function() {
window.location.href = "https://watanabe.uk/";
}, 5000); // 5000ミリ秒 = 5秒
}
});
}
});
</script>//でコメントアウトしている下の部分をコピペして、必要に応じて秒数やリダイレクト先などを設定の上、自己責任でご利用ください。
それぞれのサイトでメタリフレッシュを効果的に使用して、望ましい結果を手に入れてください。
最後までお読みいただき、ありがとうございます。
本記事が参考になりましたら、幸いです。
