pushStateとajaxを使ってSEOに強い無限スクロールページを作成する

webサイト制作

SEOに適した無限スクロールの導入

FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール（英: Infinite Scrolling）ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見かけます。
しかし、よく見られるjQueryを使ったシンプルな無限スクロールはコンテンツをすべて１つのHTMLファイル上に記述しておいて、スクロールするたびに「display:block」と「display:none」を使って表示させていく、というものです。人が見る分にはこの形でも良いでしょうが、Googlebot に対してとなると話が変わってきます。

ご自身のサイトのニュース フィードやピンボードで、ユーザーの利便性を考えて無限スクロール（英語）を使用している方もいらっしゃるでしょう。しかし、Googlebot に対してとなると話が変わってきます。無限スクロールでは、クローラーがユーザーの行動（スクロールやボタンを押してさらにアイテムを読み込むなど）を常にエミュレートできるとは限らないため、フィードやギャラリー内のすべてのアイテムにアクセスできないことがあります。クローラーがアクセスできないコンテンツは、検索結果に表示されることもないでしょう。

無限スクロール ページからリンクされている個別のアイテムを検索エンジンがクロールできるようにするには、無限スクロールを分割した一連のページ群を生成するようにしましょう。

作例

felica29.starfree.jp



Google ウェブマスター向け公式ブログ [JA] : 検索エンジンとの相性を考慮した無限スクロールのベストプラクティス


 

pushStateによるブラウザの履歴の更新

pushStateとは？

pushStateとは、HTML5でサポートされるAPIです。
ページを遷移せずHTML（の一部）を変えた場合でもブラウザに履歴を残し、また一意のURLを割り当てることが可能です。
HTMLの中身が変わってもAjaxはページを遷移しないのでURLが同じままです（#以下が入れ替わるだけで一意のURLとして処理しない）。
ブラウザの戻るボタンを押しても前のコンテンツを再び表示させることはできません。本当に前のページに戻ってしまいます。なのでGoogleは、クロール・インデックスできるように特殊な仕様をサポートしてくれたわけです。しかしpushStateを使えば、Ajaxで変化させたそれぞれのコンテンツに対してユニークなURLを割り当てられるのです。
つまり検索エンジンにとってクロール・インデックスしやすくなります。

 



JavaScriptが切れている状態でも手動でページ遷移出来るような設定も取り入れ、検索エンジンとの相性を考慮した無限スクロールにカスタマイズしましょう。


www.suzukikenichi.com


さらに簡易的なリダイレクト機能を使って、下層ページから入った時にトップページに戻るよう設定しましょう。

<meta http-equiv="refresh" content="0;URL='index.html'" />

 

以上の内容を踏まえて、今回は検索エンジンが処理しやすい無限スクロールを作っていきましょう。

今回のポイント

  • ajaxを使ったシームレスなページ遷移
  • HTML5のAPIを使い、各ページにユニークなURLやタイトルを最適化する事が出来る
  • 無限スクロールページを、JavaScript が無効でもアクセス可能な形にする。
  • 各コンテンツページにはトップページに自動的に戻るリダイレクト機能を実装
  • 相対パスはNGなのでルートパス、もしくは絶対パスを使用すること
  • SPA(Single Page Application)の基本的な考え方を理解する

今回の注意点

  • パスは全てルートパス
  • タイトルは必ずページ毎に設定する
  • トップページに「トップに戻るボタン」を設置
  • footerは最後のページに設置

 


※特にページのタイトルの最適化は非常に大事です。通常の無限スクロールは1枚のhtmlファイルに無数のコンテンツが記述されていますが、今回のようにhtmlファイルを細分化する事で、コンテンツに応じたより細かいタイトルやURLの設定が可能になります。


ajax

pikawaka.com


 

API

APIとは「Application Programming Interface（アプリケーション・プログラミング・インターフェイス）」の略語であり、「ある1つの機能に特化したプログラムで共有可能なもの」や「ソフトウェアの機能を共有する仕組み」のことです。よく使う機能がAPIとして用意されていれば、わざわざ一からプログラムを組む必要はありません。必要に応じてAPIを利用し、効率的に開発を進められます。


SPA(Single Page Application)

ブラウザによるページ遷移を行うことなく、単一のWebページでコンテンツの切り替えを行うことで、ユーザーのUXが向上します。JavaScriptフレームワーク（Angular、Vue.js、Reactなど）で作成される事が多いです。



github.com

 

<script>
		$('#container').cleverInfiniteScroll({
			contentsWrapperSelector: '#container',
			contentSelector: '.wrapper',
			nextSelector: '#next',
		});
	</script>

 

デモページ
felica29.starfree.jp



 

Javascriptによるリダイレクト

Javascriptによるリダイレクトの方法もあるので、試してみましょう。

setTimeout("redirect()", 0);
function redirect(){
    location.href='../index.html';
}

 


トップページ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pushstateとajaxを使った無限スクロール</title>
<link rel="stylesheet" href="/infinite-scroll/css/style.css">
</head>
<body id="top">
<div id="container">
<div class="wrapper">

<h1>これだけは呼んでおけ！厳選6冊</h1>
<p class="lead">歴史大河小説から近未来SF作品まで網羅した、厳選6冊を紹介</p>
<div class="main-visual">
<img src="/infinite-scroll/img/main.jpg" alt="">
</div>

</div><!-- /.wrapper -->
<a href="/infinite-scroll/content01/" id="next">次のページへ</a>

</div><!-- /#container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/infinite-scroll/js/jquery.clever-infinite-scroll.js"></script>
<script>
$(function(){
$('#container').cleverInfiniteScroll({
			contentsWrapperSelector: '#container',
			contentSelector: '.wrapper',
			nextSelector: '#next',
		});
});
</script>
</body>
</html>

 

下層ページ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="0;URL='/infinite-scroll/'" />
<title>新・平家物語</title>
<link rel="stylesheet" href="/infinite-scroll/css/style.css">
</head>
<body id="contents">
<div id="container">

<div class="wrapper">
<h1>Contents-01</h1>
<div class="content-box">
<p class="photo"><img src="https://placehold.jp/3d4070/ffffff/500x500.jpg" alt=""></p>
<div class="txt-box">
</div>
</div><!-- /.content-box -->
</div><!-- /.wrapper -->
<a href="/infinite-scroll/content02/" id="next">次のページへ</a>

</div><!-- /#container -->
</body>
</html>

 





digitalidentity.co.jp


note.com




 

面接について考える

note.com