ブラウザバックとは？SEOへもたらす影響や問題点、制御する方法を解説

ブラウザバックとは

ブラウザバックとは、ユーザーが訪問したWebページから1つ前のWebページへと戻ることを指します。
ブラウザにある「戻る」ボタンをクリックまたはタップすることで実行されます。
ここでは、ブラウザバックについてより詳しく解説します。

ユーザーがWebページ間を自由に移動できる手段

ブラウザバックは、ユーザーがWebページ間を自由に移動できる手段でもあります。
そのため、ユーザーの視点に立って考えると便利な機能です。
しかし、サーバー側の視点で見ると、フォーム送信後といったタイミングで行われるブラウザバックは、予期せぬエラーを招く可能性があるため、一概に便利なものとはいえないのが現状です。

ブラウザバックの歴史には技術的な挑戦があった

ブラウザバックは、サーバー側の視点で考えると一概に便利なものとはいえないものの、起こり得る問題に対して対処されていないわけではありません。
ブラウザバックという操作がアプリの状態と連携し、適切なUX（ユーザーエクスペリエンス）が提供できるように技術的な挑戦が続いていました。
そのような挑戦の結果、現在では適切なUXが提供されるケースが多くなっています。

履歴スタックとの連携がされている

履歴スタックとは、ユーザーのブラウザ上での閲覧履歴のことを指します。
閲覧履歴はURLが保存されるため、ブラウザバックが行われるとブラウザが履歴スタックを参照して現在閲覧しているURLの1つ前のURLに戻ることになります。

例えば、下記の順番でWebページを閲覧していたとします。

❶https://www.sales-dx.jp/
❷https://www.sales-dx.jp/blog
❸https://www.sales-dx.jp/case

現在「https://www.sales-dx.jp/case」を閲覧中でブラウザバックを行うと、1つ前に閲覧していた「https://www.sales-dx.jp/blog」のWebページに戻ります。
さらにブラウザバックを行うと、「https://www.sales-dx.jp/」に戻れます。

このように、ブラウザバックは履歴スタックと連携がされているのです。

ブラウザバックは、JavaScriptで制御することでユーザーに使用させないようにできます。
ブラウザバッグをJavaScriptを使用して制御する方法については、後述する「ブラウザバックをJavaScriptで制御する方法」にてご紹介します。

ブラウザバックがSEOにもたらす影響

ブラウザバックは、SEOの観点から見るとよいものではありません。
ブラウザバックという行為は、ユーザーが訪問したWebページに満足しなかったというサインとなり得ます。
特に検索結果からアクセスし、すぐにブラウザバックが行われた場合、検索エンジンにユーザーニーズに応えられていないWebページであると判断され、検索結果の順位が下がることも考えられます。

ブラウザバックによって生じるSEO以外の問題点

ブラウザバックによって生じる問題は、SEOへの影響だけではありません。
ここでは、ブラウザバックによって生じるSEO以外の問題点を解説します。

個人情報が漏えいする可能性がある

会員登録や申し込みといった画面において、入力した個人情報がブラウザのキャッシュとして残っている状態のままブラウザバックをすると、場合によっては情報漏えいにつながる可能性があります。

セキュリティ面が強化されており、ブラウザバックがブロックされているようなWebページでは問題ありませんが、そうではないケースがこれに該当します。
場合によっては、セキュリティ上の欠陥やWebアプリの脆弱性を狙ったCSRF攻撃（Cross-Site Request Forgeries）やXSS攻撃（Cross-Site Scripting）などのサイバー攻撃によって個人情報が盗まれてしまう可能性がある点が、最大の問題点なのです。

データの不整合が発生する

ブラウザバックが行われることで、誤ったタイミングで情報がサーバー側に送られてしまう可能性があります。

例えば、フォーム入力をした際に、送信完了の画面が出る前にブラウザバックをしてしまうと、フォーム入力をした内容が二重で送信され、重複して登録されてしまうケースが発生することもあります。

また、再度入力した内容とはじめに送信した内容に変更がある場合、変更前の情報が登録されるケースも存在することから、ブラウザバックにはデータの不整合が発生するという問題もあるのです。

動作が不安定になったりUXが低下したりする

ブラウザバックを行うことで、先述したようにデータの不整合が発生します。
そのようなことが原因となり、Webページの動作が不安定になることもあります。
また、ナビゲーションシステムが正常に動作しなくなり、UXが低下することも、ブラウザバックによって発生する問題であるといえます。

ブラウザバックをJavaScriptで制御する方法

「ブラウザバックとは」でも述べたように、ブラウザバックはJavaScriptを使用することで制御できます。
ここでは、JavaScriptを使用してブラウザバックを制御する方法を解説します。

ブラウザバックが行われた際の遷移先をカスタマイズする

ブラウザバックが行われた際に、遷移先をカスタマイズする方法があります。
「history.pushState()」を使用してブラウザの履歴に状態を追加し「window.onpopstate」イベントハンドラを使うことで、ユーザーがブラウザバックをした際の挙動を定義できます。

記述方法は以下のとおりです。

// 新しい履歴エントリを追加
history.pushState({page: 1}, "title 1", "?page=1");

// ユーザーが戻るボタンを押したときのイベントリスナー
window.onpopstate = function(event) {
  if(event.state) {
    // 「event.state.page」を使ってページ内容を更新
    loadPageContent(event.state.page);
  }
};

function loadPageContent(page) {
  // ここにページの内容を更新するコードを書く
}

ブラウザバック時に警告文を表示する

「window.addEventListener('beforeunload', function(event) { ... }); 」を使用することで、ユーザーがWebページから離れる＝ブラウザバックをしようとした際に警告文を表示できます。

記述方法は以下のとおりです。

window.addEventListener('beforeunload', function(event) {
  // デフォルトのイベントをキャンセル
  event.preventDefault();
  // ChromeではreturnValueを設定する必要がある
  event.returnValue = '';
});

ブラウザバックをしても同じページにとどまるようにする

ページをローディングする際、履歴スタックに状態を追加することで、ブラウザバックをしたとしても同じページにとどまるように設定ができます。

記述方法は以下のとおりです。

// ページが読み込まれた直後に履歴を操作
window.onload = function() {
  // 現在のページで履歴エントリを置き換え
  window.history.replaceState(null, null, window.location.href);
  // 新しい履歴エントリを追加
  window.history.pushState(null, null, window.location.href);
};

// 戻るボタンが押されたときにページをリロード
window.onpopstate = function() {
  window.location.reload();
};

ブラウザバックを無効化する

ユーザーがブラウザバックを使用できないようにすることも可能です。
これにより、ブラウザバックによる問題点を回避できる可能性が高まります。
「onpopstate」イベントハンドラを設定することで、ブラウザバックが行われた際に履歴を操作し、ユーザーを現在のページにとどめられるのがこの手法です。

記述方法は以下のとおりです。

window.onpopstate = function(event) {
    // バックボタンが押された際の処理をここに記述
    history.pushState(null, null, window.location.href);
};

 ブラウザバックされないWebページを作るコツ

ブラウザバックは、先述したようにJavaScriptを使用することで制御できます。
しかし、ユーザーにとってはすぐに前のページへと戻れる便利な機能であるため、フォーム入力時の情報漏えいリスクの防止といった理由がない場合は、ユーザビリティの観点からもすべきではないといえるでしょう。
ユーザビリティとは、ユーザーから見てWebページの見やすさや使いやすさなどを示す言葉です。
ユーザビリティが低下すると、SEOの観点からも悪影響が出る可能性があるため、ユーザビリティは担保する必要があります。

ここでは、ユーザビリティを守りながらブラウザバックされないWebページを作るコツを解説します。

ユーザーニーズを的確にとらえる

ユーザーがブラウザバックをする原因のひとつとして考えられるのが、自分の必要としている情報がないと判断していることがあげられます。
この状況を防止するためには、ユーザーニーズを的確に捉えたコンテンツ作成をすることが重要です。

Googleも以下のように述べていることから、SEOの観点から見てもユーザーニーズを的確に捉え、ユーザーにとって有益な情報を提供するコンテンツを作成することが重要であるといえます。

Google の自動ランキング システムは、検索エンジンでのランキングを上げることではなく、ユーザーにメリットをもたらすことを主な目的として作成された、有用で信頼できる情報を検索結果の上位に掲載できるように設計されています。

引用：有用で信頼性の高い、ユーザーを第一に考えたコンテンツの作成

Google 検索セントラルでは、どのようなコンテンツがユーザーにとって有益であるのかが述べられています。
まだご覧になったことがない場合は、コンテンツ作成をする前に確認することをおすすめします。

レスポンシブ対応にする

レスポンシブ対応とは、パソコンやスマートフォン、タブレットといったデバイスに依存せず、どのデバイスからでも見やすいレイアウトに自動で調整するデザインのことを指します。
レスポンシブ対応されていないWebページの場合、開いた瞬間にユーザーが見づらいと感じてしまい、ブラウザバックされる可能性が高まります。

実際にGoogleは、以下のように述べていることからレスポンシブ対応にすることは必要不可欠といえるでしょう。

モバイル版のページを用意することは、コンテンツを Google の検索結果に表示させるための要件ではありませんが、非常に強く推奨されています。
引用：モバイルファースト インデックスに関するおすすめの方法 

レスポンシブ対応については、Googleが「レスポンシブ レイアウトの概要」にておすすめの手法について掲載していますので、そちらをご覧ください。

まとめ

この記事では、ブラウザバックとはどのようなことなのか、概要を中心に解説しました。
ブラウザバックは、ユーザーにとってはWebページを自由に行き来できるようになる便利な機能ですが、フォーム送信中などに行われた場合は問題が発生する可能性もあります。
そのため、フォーム送信中はブラウザバックができないよう、JavaScriptでの制御方法を参考に無効化する設定をお試しください。
しかし、ブラウザバックをできるだけされないようなWebページ作りをすることも重要です。
この記事を参考に、ユーザビリティを守りながらブラウザバックされないWebページ作りに取り組みましょう。