無限スクロールはSEO上避けるべき？Googleの推奨構成やJavaScriptの記述例を解説

無限スクロールはSEOに効果的とは限らない、という事実をご存知ですか？

確かに、クリックやタップをしなくても次ページへ遷移できるのは大きな強みですが、「後半ページがインデックスされない！」などSEOに悪影響を受けるケースもあるのです。

そこで今回は、無限スクロールとSEOの関係・Googleの推奨構成・JavaScriptの記述例・ページネーションとの違いなどについて解説します。

無限スクロールとは？

無限スクロール（Infinite Scroll）とは、ユーザーが画面下部までスクロールした際、クリックやタップといったページ遷移に必要な操作をしなくても、自動的かつ継続的に新しいコンテンツを表示させるUIに特化したウェブデザイン技術の一種です。

TwitterやPinterestなどのSNS、複数の画像が一連表示されるギャラリー的なサイトで導入されている仕様と言った方がイメージしやすいかもしれません。

ロングスクロールとも呼ばれており、WordPressのプラグインとしては「jQueryのinfinite scroll」が有名です。

無限スクロールのメリット4つ

SNSやアプリなどで先行導入された経緯からも分かる通り、メリットの多くはタブレット端末での操作性に対する優位性・利便性が際立っています。

▼メリット

• タップやクリックをせずにスクロールだけでページ遷移が完了する分、操作性が快適
• ユーザーを没頭させ、より長くwebページに留めておけるエンゲージメント効果が高い
• デバイスを問わず、大量の情報を素早く閲覧できる
• 画面が小さく縦長になりがちな「スマホ」や「タブレット」に適している

無限スクロールのデメリット5つ

一見、UIとして優れているように思える無限スクロールですが、下記のようなデメリットからストレスを感じるユーザーも少なくありません。

▼デメリット

• 同一ページ上に多くのコンテンツを読み込ませる分、「表示速度」と「動作速度」が遅くなる
• ストリーム中に、特定の場所でブックマークし難い
• 目当てのコンテンツを通過してしまうと、後から戻って探すのが難しい
• スクロールするほどスクロールバーの限度量が増えていくので、ゴールに辿りつけない
• 1つのコンテンツが終わりに近づくと次ページが表示されるので、本来表示されるはずのフッターが使えない

ユーザビリティが重視されている以上、必ずしもSEOにとってポジティブに作用するとは限らないのです。

無限スクロールとSEOの関係

結論から言うと、Googleが推奨する対策を講じずに導入した場合は、SEOにとって逆効果になりかねません。

場合によっては、検索結果に表示されないこともあります。

確かに、無限スクロールはモバイルユーザビリティに優れている分、特に閲覧者からは使い勝手の良い便利機能として高く評価されています。

特に、2021年から全てのWebサイトがMFI（Mobile First Indexing）の対象になって以降、SEO効果を向上させるべく導入を検討されているサイト運営者も多いことでしょう。

しかしながら、ことSEOの観点から言うと無限スクロールは決して万能ではありません。

そこで注目したいのが、Googleが2014年2月に「英語版ウェブマスター向け公式ブログ」を通じて行ったアナウンスです。

詳しくは後述しますが、検索エンジンが処理しやすい構成と導入方法について解説されています。

▼関連コラム

無限スクロールの種類！Googleが推奨しているパターンは？

無限スクロールの実装パターンを大きく分類すると下記の2種類に分けられます。

なお、SEOに有利なのはGoogleが推奨している2番の方法ですので、実装する際は2番の方法で行いましょう。

▼パターンの違い

1. ページ内に「同一URL」でコンテンツを読み込ませる
2. 読み込む度に「コンテンツごとのURL」へ切り替える

ページ内に「同一URL」でコンテンツを読み込ませる

結論から言うと、こちらのパターンはSEO上おすすめできません。

シンプルかつ簡単に実装できるというメリットがあるものの、Googleの推奨構成からも外れています。

なぜGoogleは同一URLのコンテンツを読み込ませる方法をSEO上NGとしているのか、その根拠となっているのが下記のプロセスです。

▼Googleから推奨されていない理由

1. レンダリング時のソースコードに存在しているのは、序盤のコンテンツ情報だけ
2. 一定のエリアまでスクロールすると、トリガーが発動して次コンテンツのURLが読み込まれる
3. 検索エンジンはスクロールする前の情報、つまり最初のURLしか取得も認識もできない

本来、コンテンツには固有のURLが存在しており、それぞれが検索エンジンに認識されなければインデックスさえされません。

にもかかわらず、同一URLとしてページ内に読み込まれてしまうと、1ページ目のコンテンツしか存在していないと誤認されてしまうのです。

読み込む度に「コンテンツごとのURL」へ切り替える

Googleが公式サイトで明言している通り、SEO的に有利に働くのはこちらのパターンです。

出典：Google検索セントラル 検索エンジンとの相性を考慮した無限スクロールのベストプラクティス

下記の画像が表している通り、全コンテンツを1つのURLにまとめる（画像左）よりも、複数のページに分割した（画像右）方が検索エンジンに認識されやすくなります。

また、検索エンジンに一連ページであると伝わるように、headセクションに「rel=”prev/next”」を記述しておきましょう。

「無限スクロール」と「ページネーション」の違いとは？

無限スクロールと似ている手法として、ページネーションが挙げられます。

ただし、何かと混同されがちなページネーションですが、両者の特徴を比較してみると違いは明らかです。

▼無限スクロールとページネーションの違い

• 無限スクロール：本来、個別のコンテンツを一連ページのように表示させること
• ページネーション：1つのコンテンツを複数のページに分割すること

▼関連コラム

SEOに強いのは無限スクロール？それともページネーション？

結論から言うと、Googleのベストプラクティスに則っていれば無限スクロールとページネーションにSEOの優位性はありません。

肝心なのは、自サイトの方向性にどちらが適しているかどうかなのです。

▼使い分けのヒント

• 無限スクロール：特定の情報を探すというより、データストリームを楽しむユーザー向け
• ページネーション：特定の情報を探している、またはブックマークなど位置を把握したいユーザー向け

Google画像検索でも活用されている通り、テキストの比重が少なくサクサク目で追える下記のようなサイトは、SEOの側面から言っても無限スクロールを選択すべきでしょう。

▼無限スクロールが向いているサイト

• TwitterやFacebookなど、ユーザー生成を伴っているサイト
• InstagramやPinterestなど、ビジュアルコンテンツがメインのサイト

最後にJavaScriptで無限スクロールを実装する方法と記述例

最後に、JavaScriptライブラリやjQueryを使わずに、JavaScriptだけで無限スクロールを実装する方法を解説します。

例題としてご紹介するのは、20枚の画像をスライドショーのように表示させる手法です。

HTMLの記述例

<div class="scroll" data-max="20" data-lastnum="2">
<img src="1.jpg" />
<img src="2.jpg" />
</div>

カスタムデータ属性に下記の2点を追加しておくことで、次にロードすべき画像番号が指定できる仕組みになっています。

▼カスタムデータ属性の追加項目

• data-max：写真の最大枚数
• data-lastnum：現在表示されている最後の画像番号

CSS記述例

<style>
.scroll {
	overflow:auto;
	width:400px;
	height:300px;
}
.scroll img {
	height:180px;
	display:block;
	margin:1px;
}
</style>

scrollクラスでは、スクロールバーが適切に表示されるよう下記2点を指定します。
▼scrollクラスでの指定

• 写真を表示する領域サイズ
• overflow:auto;

一方、imgタグでは画像の縦並び表示を予防します。

▼imgタグでの指定

• display:block;でブロック要素に指定する

JavaScriptの記述例

<script>
document.querySelectorAll('.scroll').forEach(elm => {
	elm.onscroll = function () {
		if (this.scrollTop + this.clientHeight >= this.scrollHeight) {
			//スクロールが末尾に達した
			if (parseInt(this.dataset.lastnum) < parseInt(this.dataset.max)) {
				//未ロードの画像がある場合
				this.dataset.lastnum = parseInt(this.dataset.lastnum) + 1;
				let img = document.createElement('img');
				img.src =  this.dataset.lastnum +'.jpg';
				this.appendChild(img);
			}
		}
	};
});
</script>

JavaScriptの記述ポイントは、下記の2点です。

▼ポイント

• 6行目：HTMLで記載した「data-lastnum」と「data-max」を参照させ、次にロードすべき画像番号を明確にする
• 8～11行目：「data-lastnum+1」の番号画像を、createElementしたimg要素に設定する

まとめ

SNSやアプリの普及に伴い、多くのWebサイトが無限スクロールを導入しています。

しかし、大前提としてGoogleが提供しているベストプラクティスを順守していなければ、インデックスさえされず検索結果から除外され兼ねません。

SEOにおける不利益を回避しつつモバイルフレンドリーなサイト構築を目指すなら、推奨構成を参考にするのが無難です。

SEOの観点から導入を検討している方は、まず自サイトの方向性に適しているのか見極めるところから始めてみましょう。