SEOに適した無限スクロールの導入
FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール（英: Infinite Scrolling）ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見かけます。
しかし、よく見られるjQueryを使ったシンプルな無限スクロールはコンテンツをすべて１つのHTMLファイル上に記述しておいて、スクロールするたびに「display:block」と「display:none」を使って表示させていく、というものです。人が見る分にはこの形でも良いでしょうが、Googlebot に対してとなると話が変わってきます。
ご自身のサイトのニュース フィードやピンボードで、ユーザーの利便性を考えて無限スクロール（英語）を使用している方もいらっしゃるでしょう。しかし、Googlebot に対してとなると話が変わってきます。無限スクロールでは、クローラーがユーザーの行動（スクロールやボタンを押してさらにアイテムを読み込むなど）を常にエミュレートできるとは限らないため、フィードやギャラリー内のすべてのアイテムにアクセスできないことがあります。クローラーがアクセスできないコンテンツは、検索結果に表示されることもないでしょう。
無限スクロール ページからリンクされている個別のアイテムを検索エンジンがクロールできるようにするには、無限スクロールを分割した一連のページ群を生成するようにしましょう。
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の設定が可能になります。
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によるリダイレクトの方法もあるので、試してみましょう。
setTimeout("redirect()", 0);
function redirect(){
location.href='../index.html';
}
digitalidentity.co.jp
note.com
面接について考える
note.com
note.com
felica29.starfree.jp
<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>これだけは呼んでおけ！厳選6冊</title>
<link rel="stylesheet" href="/infini-2021-09/css/style.css">
</head>
<body><script type="text/javascript" src="https://ad.netowl.jp/js/star-php.js"></script>
<div id="container">
<div class="wrapper">
<h1>これだけは呼んでおけ！厳選6冊</h1>
<p class="lead">歴史大河小説から近未来SF作品まで網羅した、厳選6冊を紹介</p>
<p class="main-img"><img src="/infini-2021-09/img/main.jpg" alt=""></p>
</div>
<a href="/infini-2021-09/book1/" id="next">次のページへ</a>
<p id="to-top"><a href="#"><img src="/infini-2021-09/img/chevron-up-solid.svg" alt=""></a></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/infini-2021-09/js/jquery.clever-infinite-scroll.js"></script>
<script>
$('#container').cleverInfiniteScroll({
contentsWrapperSelector: '#container',
contentSelector: '.wrapper',
nextSelector: '#next'
});
$('#to-top>a').on('click',function(){
$('html,body').animate({scrollTop:0},200);
});
</script>
</body>
</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='/infini-2021-09/'" />
<title>新・平家物語</title>
<link rel="stylesheet" href="/infini-2021-09/css/style.css">
</head>
<body><script type="text/javascript" src="https://ad.netowl.jp/js/star-php.js"></script>
<div id="container">
<div class="wrapper">
<h2>新・平家物語</h2>
<div class="contents">
<p class="photo"><img src="/infini-2021-09/img/01b.jpg" alt=""></p>
<p class="txt">『新・平家物語』は、吉川英治の歴史小説の大作。1950年から1957年まで「週刊朝日」に連載された。現行版は吉川英治歴史時代文庫全16巻。<br>
題材は『平家物語』だけでなく、『保元物語』『平治物語』『義経記』『玉葉』など複数の古典をベースにしながら、より一貫した長いスパンで源平両氏や奥州藤原氏、公家などの盛衰を描いた長編作品。</p>
</div>
</div>
<a href="/infini-2021-09/book2/" id="next">次のページへ</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/infini-2021-09/js/jquery.clever-infinite-scroll.js"></script>
<script>
$('#container').cleverInfiniteScroll({
contentsWrapperSelector: '#container',
contentSelector: '.wrapper',
nextSelector: '#next'
});
</script>
</body>
</html>
