Meta RefreshとJavaScriptリダイレクトガイド

サーバーサイドリダイレクト（301/302）が常に第一選択です。しかし、サーバー設定を変更できない場合や、実行時の条件に基づいてリダイレクトする必要がある場合は、クライアントサイドリダイレクトが役立ちます。

HTML meta refresh

<!-- 即座にリダイレクト -->
<meta http-equiv="refresh" content="0; url=/new-page.html">

<!-- 3秒後にリダイレクト -->
<meta http-equiv="refresh" content="3; url=https://newdomain.com">

• ✅ JavaScriptなしで動作
• ✅ HTML1行で実装可能
• ❌ ページ読み込み後はキャンセルできない
• ❌ 戻るボタンのトラップを作る（戻ると再びリダイレクトされる）
• ❌ SEOに不利 — Googleは非推奨としている

JavaScriptリダイレクトメソッド

window.location.href（最も一般的）

// 現在のページを履歴に追加 — ユーザーは戻れる
window.location.href = 'https://example.com';

location.replace()（履歴エントリなし）

// 現在の履歴エントリを置換 — ユーザーは戻れない
location.replace('https://example.com');

location.assign()（hrefと同じ）

location.assign('https://example.com');

window.open()（新しいタブ）

window.open('https://example.com', '_blank');

主な違い

履歴エントリ

• 履歴に追加: location.href、location.assign()、meta refresh
• 履歴に追加しない: location.replace()

キャンセル可否

• キャンセル可能: JavaScript（clearTimeoutを使用）
• キャンセル不可: meta refresh

使い分けの指針

meta refreshを使う場面

• JavaScriptのない静的HTMLページ
• カウントダウン付きの「ページが移動しました」通知

location.hrefを使う場面

• 条件付きリダイレクトロジックが必要
• ユーザーが戻れるようにしたい

if (!user.isLoggedIn) {
    location.href = '/login';
}

location.replace()を使う場面

• ログイン後 — ユーザーをログインページに戻さない
• エラーページの自動リダイレクト
• モバイル/デスクトップ検出リダイレクト

if (/Android|iPhone/i.test(navigator.userAgent)) {
    location.replace('/mobile/');
}

SEOへの影響

• Meta refresh — Googleは公式に非推奨としており、ランキング低下の原因になりうる
• JavaScriptリダイレクト — Googleはたどれるが、サーバーサイドリダイレクトより処理が遅い
• どちらもHTTPステータスコードを持たない — 検索エンジンは移動が恒久的か一時的かを判断できない

よくある落とし穴

リダイレクト後のコードが実行される

// ❌ 以下のコードも実行される
if (needRedirect) { location.href = '/other'; }
doSomethingElse(); // まだ実行される！

// ✅ returnを使用
if (needRedirect) { location.href = '/other'; return; }
doSomethingElse();

モバイルリダイレクトループ

// ✅ 再リダイレクトを防止するガード
if (isMobile && !location.pathname.startsWith('/mobile/')) {
    location.replace('/mobile' + location.pathname);
}

クエリ文字列の消失

// ❌ クエリ文字列が失われる
location.href = '/new-page';

// ✅ クエリ文字列を保持
location.href = '/new-page' + location.search;