webサイトデザインAI入門科授業用ブログ

池袋フェリカテクニカルアカデミーの求職者支援訓練の授業解説ブログです。

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

サイト制作

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

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

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

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


f:id:yachin29:20160216192134p:plain

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';
}





digitalidentity.co.jp


note.com




面接について考える

note.com


note.com



felica29.starfree.jp

<!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>これだけは呼んでおけ！厳選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><!-- /.wrapper -->
<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><!-- /#container -->

<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>

<!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='/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><!-- /.wrapper -->
<a href="/infini-2021-09/book2/" id="next">次のページへ</a>
</div><!-- /#container -->

<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>