WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

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

Webサイト制作

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を割り当てられるのです。

つまり検索エンジンにとってクロール・インデックスしやすくなります。

Googleの記事では、無限スクロールは次々にページを捲っていく事と同じとしている。そのため、無限スクロールで新しいコンテンツが表示される度にブラウザの履歴（URL）を更新しなければいけない。さらにスクロールでページを進んだり戻ったりする度にURLを更新させる必要があります。


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


www.suzukikenichi.com


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

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

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

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


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


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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>SEOに適した無限スクロール</title>
<link rel="stylesheet" href="/infini-scroll/css/style.css">
</head>
<body>
<h1>SEOに適した無限スクロール</h1>
<div id="container">
<div class="wrapper">
<p class="main-photo"><img src="/infini-scroll/img/top.png" alt=""></p>
<p class="lead">yachin29が薦める「これだけは読んでおけ！」な5冊を紹介。 国民文学作家による、歴史大河小説から世界的に有名な海外SF作品まで、珠玉の5冊を紹介。きっとあなたの「これだけは読んでおけ！」な本が見つかるはず</p>
</div><!-- ./wrapper -->

<a id="next" href="/infini-scroll/book1/">次のページ</a>
</div><!-- /#container -->

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

下層ページ

<script>
setTimeout("redirect()", 0);
function redirect(){
location.href='../index.html';
}
</script>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新・平家物語</title>
<link rel="stylesheet" href="/infini-scroll/css/style.css">
</head>
<body>

<div id="container">
<div class="wrapper">
    
<h1 class="page-title">新・平家物語</h1>
<div class="page-inner">
<p class="page-photo"><img src="/infini-scroll/img/01b.jpg" alt=""></p>
<div class="page-txt-box">
<p class="page-txt"> 新・平家物語『新・平家物語』は、吉川英治の歴史小説の大作。1950年から1957年まで「週刊朝日」に連載された。現行版は吉川英治歴史時代文庫全16巻。題材は『平家物語』だけでなく、『保元物語』『平治物語』『義経記』『玉葉』など複数の古典をベースにしながら、より一貫した長いスパンで源平両氏や奥州藤原氏、公家などの盛衰を描いた長編作品。</p>
<p class="to-amazon"><a href="#">ご購入はこちら</a></p>
</div>
</div><!-- /.page-inner -->
</div><!-- ./wrapper -->

<a id="next" href="/infini-scroll/book2/">次のページ</a>
</div><!-- /#container -->

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




note.com