もっと見る(追加読み込み型) ハイブリッド
初期表示は静的HTML、ボタン押下でJS経由(fetch)により追加項目を読み込みます。
翻訳/クロールテスト用モックサイト。検証したいシナリオごとにページを分けています。
一覧を複数ページに分けて表示する方式のバリエーション。クローラーからの見え方の違いを検証します。
初期表示は静的HTML、ボタン押下でJS経由(fetch)により追加項目を読み込みます。
クライアントJSを使わず、ページ番号のURL遷移(?p=)だけで完結する静的なページネーションです。
スクロールして一覧末尾が画面に入ったことを検知し、自動的に追加項目を読み込みます。
入力を伴う画面のバリエーション。確認・完了画面が、クローラーからどう見えるかを検証します。
入力→確認→完了がそれぞれ別URLに遷移します。確認・完了画面は、直前の送信で作られるサーバー側セッションがないと表示できません。
入力→確認→完了が同一URLのまま、JSによるDOM書き換えだけで進みます。確認・完了に対応するURLは存在せず、実際のフォーム入力とボタンクリックを再現しないと到達できません。
キーワード検索結果の見え方のバリエーション。検索語やクエリ結果が、クローラーからどう見えるかを検証します。
古典文学の作品名・著者名で検索できます。検索語がURL(?q=)に反映され、結果もサーバーが静的HTMLとして返します。URLを直接発見・再訪問すれば、JSなしで正しい結果を取得できます。
見た目・URLの形式(?q=)は上と同じですが、検索結果はJSがfetchで取得して描画します。ブラウザでは正常に見えますが、JSを実行しないクローラーには結果が一切見えません。
フィルタ・一覧とも初期HTMLに存在せず、JS経由(fetch)ですべて描画します。