暫定日本語訳：Infinite Scroll SEO

暫定日本語案: TL;DR — Infinite scroll loads more コンテンツ as あなた scroll down, instead of 暫定日本語案: making あなた クリック へ ページ 2, ページ 3, と so on. catch: Googlebot doesn’t 暫定日本語案: scroll と doesn’t クリック. So if あなた 商品 または 記事 だけ 表示される once 暫定日本語案: 訪問者 scrolls, Google 可能性がある 決して see them. fix is へ give すべての “page” of 暫定日本語案: コンテンツ real URL of its own, so 検索エンジン have something へ クロール even 暫定日本語案: though それら 決して touch あなた scroll.

何 infinite scroll is

暫定日本語案: あなた’ve 使用 it hundred times なしで naming it. On social フィード, shopping 暫定日本語案: category, または long 記事, あなた 保つ scrolling と more stuff 保持 表示される — 暫定日本語案: no “Next page” button, no ページ numbers. その’s infinite scroll: JavaScript 暫定日本語案: watches どのように far あなた’ve scrolled と, as あなた near bottom, quietly fetches と 暫定日本語案: adds next batch of コンテンツ.

暫定日本語案: It feels seamless 向けに 人々. 問題 is その 検索エンジン aren’t 人々.

なぜ it’s risky 向けに SEO

暫定日本語案: Google finds と reads あなた ページ とともに automated program called Googlebot. 暫定日本語案: Googlebot loads あなた ページ, ただし it does ない behave like human 訪問者:

• 暫定日本語案: It doesn’t scroll down ページ.
• 暫定日本語案: It doesn’t クリック buttons.

暫定日本語案: So any コンテンツ その だけ loads 後に someone scrolls (または クリック “Load more”) 暫定日本語案: simply isn’t there as far as Googlebot is concerned. If あなた category ページ 表示 暫定日本語案: 24 商品 up front と loads rest on scroll, Google 可能性がある だけ ever see それらの 暫定日本語案: 最初 24.

one rule その 保持 it safe

暫定日本語案: Here’s whole trick in one sentence: すべての chunk of コンテンツ needs its own 暫定日本語案: real web address.

暫定日本語案: Instead of relying だけ on scrolling, 検索-friendly setup また has plain, 暫定日本語案: crawlable ページ behind scenes — example.com/shoes?page=2, 暫定日本語案: ?page=3, と so on — linked together とともに normal links Google できる follow. 暫定日本語案: infinite scroll is nice experience 向けに humans; numbered URLs are 暫定日本語案: safety net 向けに 検索エンジン. Modern implementations even swap address in 暫定日本語案: あなた ブラウザー bar as あなた scroll, so if あなた copy URL あなた land back in exact 暫定日本語案: 同じ spot.

何 大半の 人々 get 誤った

• 暫定日本語案: “Google can render JavaScript now, so it’ll figure it out.” Google できる run 暫定日本語案: あなた JavaScript — ただし it still won’t scroll または クリック へ trigger loader. Being 暫定日本語案: able へ render isn’t 同じ as taking action.
• 暫定日本語案: “A ‘Load more’ button is safer than auto-scroll.” だけ if その button is 暫定日本語案: real link へ real ページ. button その just runs クリック handler is invisible へ 暫定日本語案: Google too.
• 暫定日本語案: “If a page isn’t indexed, Google is ignoring it.” とともに infinite scroll, “not indexed” sometimes means コンテンツ got merged へ another ページ by accident — 暫定日本語案: which is 異なる 問題 とともに 異なる fix.

暫定日本語案: Infinite scroll isn’t banned または penalized. Done right — とともに real URLs underneath 暫定日本語案: — it’s completely fine. Want mechanics of なぜ two ページ sometimes get インデックス登録 暫定日本語案: as one, plus actual code pattern へ implement it? Switch へ Advanced 暫定日本語案: tab.

暫定日本語案: TL;DR — Googlebot 決して scrolls と 決して クリック, so scroll-gated コンテンツ is 暫定日本語案: invisible by デフォルト. Google’s workaround is へ render in very tall viewport 暫定日本語案: (roughly 411×12,140px mobile, 1024×9,307px desktop) — ただし その 同じ height できる 暫定日本語案: trigger scroll loader during rendering, folding next logical ページ へ 暫定日本語案: 現在の one so two ページ get インデックス登録 as single URL. durable fix is 暫定日本語案: architectural: persistent, absolute, per-chunk URLs (e.g. ?page=12), linked とともに 暫定日本語案: crawlable anchors, とともに History API updating address bar as 各 chunk 暫定日本語案: becomes 主要. rel=next/rel=prev is legacy 向けに Google (dropped 2019) ただし 暫定日本語案: still respected by Bing. On ecommerce PLPs, sitemaps または マーチャント Center フィード are 暫定日本語案: discovery backstop. Verify everything in URL Inspection ツール’s rendered HTML.

最初, disambiguation

暫定日本語案: If あなた 検索 “Google infinite scroll” あなた’ll hit results について Google’s own 暫定日本語案: continuous scroll on its 検索結果 ページ — SERP feature Google turned on 暫定日本語案: と then discontinued in mid-2024. その’s Google-商品 UX decision と has 暫定日本語案: nothing へ do とともに どのように Googlebot crawls あなた サイト. この 記事 is について 暫定日本語案: latter: infinite scroll as loading pattern on あなた own ページ, と whether Google 暫定日本語案: できる インデックス登録 何 it loads.

core constraint: Google doesn’t interact とともに あなた ページ

暫定日本語案: Everything here follows から one fact. Google’s own lazy-loading docs say 暫定日本語案: recommended patterns “don’t rely on user actions, such as scrolling or clicking, to load content, which is important as Google Search does not interact with your page.” 暫定日本語案: pagination doc says it even more plainly: “Google’s crawlers don’t ‘click’ buttons and generally don’t trigger JavaScript functions that require user actions to update the current page contents.”

暫定日本語案: As I put it in my own JavaScript SEO guide: “Googlebot doesn’t take action on webpages. It’s not going to click things or scroll, but that doesn’t mean it doesn’t have workarounds. As long as content is loaded in the DOM without a needed action, Google will see it. If it’s not loaded into the DOM until after a click, then the content won’t be found.”

暫定日本語案: So infinite scroll その だけ triggers on real scroll イベント is コンテンツ-discovery 暫定日本語案: 問題 前に it’s anything else.

Google’s workaround: very tall viewport

暫定日本語案: Google doesn’t simulate scrolling. Instead it renders あなた ページ in unusually tall 暫定日本語案: viewport, so コンテンツ few screens down is already inside rendered area なしで 暫定日本語案: anyone scrolling. earliest on-record hint of この was John Mueller’s 2017 note 暫定日本語案: その “Googlebot renders with a very tall viewport, which skews some CSS (often images). Try in Chrome dev-tools, eg 9000px high viewport.”

暫定日本語案: specific numbers I’ve documented: 向けに mobile, Google loads ページ at screen 暫定日本語案: size of 411×731 pixels と resizes length へ 12 140 pixels — “essentially, it becomes a really long phone with a screen size of 411×12140 pixels. For desktop, it does the same and goes from 1024×768 pixels to 1024×9307 pixels.” (I haven’t seen 暫定日本語案: recent re-tests of それらの exact figures, と それら 可能性がある vary とともに ページ length; 暫定日本語案: original dimensions trace back へ independent テスト by SEO researcher JR Oakes.) 暫定日本語案: point isn’t exact pixel count — it’s その Google fakes “seeing far down the page” とともに height, ない とともに movement.

暫定日本語案: Treat both exact pixel dimensions と two-ページ-merged behavior below as 暫定日本語案: dated, implementation-specific observations rather than stable プラットフォーム contract — 暫定日本語案: Google doesn’t publish 公式 spec 向けに either number, と rendering behavior できる 暫定日本語案: change. Don’t assume あなた サイト behaves 同じ way; confirm 現在の behavior 向けに あなた 暫定日本語案: own URLs とともに rendered-HTML テスト in next section instead of taking これらの 暫定日本語案: figures as guarantee.

failure mode nobody explains: two ページ インデックス登録 as one

暫定日本語案: Here’s どこ tall viewport bites back. Because render viewport is so tall, 暫定日本語案: scroll-triggered loader できる fire during rendering even though nothing 暫定日本語案: “scrolled” in human sense — sheer DOM height できる be enough へ satisfy 暫定日本語案: IntersectionObserver または scroll-position 確認. いつ その happens, loader 暫定日本語案: appends next logical ページ’s コンテンツ へ 現在の ページ’s render, と 暫定日本語案: Google indexes merged result as single URL.

暫定日本語案: I’ve diagnosed この several times. から my JavaScript SEO guide:

暫定日本語案: “Another issue I’ve seen with this setup is, occasionally, two pages get indexed as one. I’ve seen this a few times when people said they couldn’t get their page indexed. But I’ve found their content indexed as part of another page that’s usually the previous post from them.”

暫定日本語案: “My theory is that when Google resized the viewport to be longer, it triggered the infinite scroll and loaded another article in when it was rendering. In this case, what I recommend is to block the JavaScript file that handles the infinite scrolling so the functionality can’t trigger.”

暫定日本語案: John Mueller described 同じ mechanic から Google’s side in 2022 office-hours 暫定日本語案: session: Google renders とともに high viewport, その “would trigger some amount of infinite scrolling,” と “we might have two or three of these pages loaded on one page with infinite scroll, but not everything.” (その office-hours quote is 暫定日本語案: relayed via 検索エンジン Journal’s write-up, ない confirmed against 主要 暫定日本語案: recording.)

暫定日本語案: Two consequences fall out of この:

1. 暫定日本語案: There’s no guarantee of どのように much gets pulled in. Might be nothing extra, 暫定日本語案: might be two または three ページ, 決して reliably everything. Infinite scroll alone 暫定日本語案: is ない dependable way へ get deep コンテンツ インデックス登録.
2. 暫定日本語案: “Not indexed” できる be misdiagnosis. 不足している ページ 可能性がある ない be 不足している at 暫定日本語案: all — it 可能性がある be インデックス登録 as part of earlier URL. その needs 異なる fix than 暫定日本語案: normal インデックス登録 bug.

どのように へ diagnose it

暫定日本語案: 使用 検索 Console’s URL Inspection ツール と read rendered HTML, ない 暫定日本語案: raw ソース. Google’s docs are explicit: “You can use the URL Inspection Tool in Search Console to see if all content was loaded. Check the rendered HTML to make sure your content is in the rendered HTML by looking for it in URL Inspection Tool.” 検索 暫定日本語案: rendered HTML 向けに コンテンツ あなた expect へ be on ページ 1 だけ. If あなた find コンテンツ 暫定日本語案: から ページ 2 (または next 記事) sitting inside ページ 1’s render, あなた’ve reproduced 暫定日本語案: merge bug.

暫定日本語案: あなた できる また replicate tall viewport locally: open Chrome DevTools, 設定 very 暫定日本語案: tall カスタム viewport (Mueller’s suggestion was ~9000px), と load ページ へ see 暫定日本語案: whether あなた loader fires とともに no scrolling.

fix: paginated URLs + History API

暫定日本語案: durable fix is architectural, straight から Google’s 現在の lazy-loading doc. 暫定日本語案: へ 作る infinite scroll indexable, “make sure your website supports paginated loading of these chunks”:

• 暫定日本語案: “Give each chunk its own persistent, unique URL.”
• 暫定日本語案: “Ensure that the content shown on each URL remains the same every time it’s loaded in a browser” — Google suggests absolute ページ numbers like ?page=12.
• 暫定日本語案: “Avoid using relative elements like ?date=yesterday in these URLs” — 暫定日本語案: address その returns 異なる コンテンツ 各 load is unusable as canonical.
• 暫定日本語案: “Link sequentially to the individual URLs so that search engines can discover the URLs in a paginated set” — real <a href> links, ない クリック handlers.
• 暫定日本語案: “When a new page chunk is loaded in response to the user scrolling, and it becomes the primary visible element for the user, update the displayed URL using the History API.”

暫定日本語案: その 最後 point is elegant part. history.pushState() / replaceState() swaps 暫定日本語案: URL in address bar as ユーザー scrolls past 各 boundary — so visible 暫定日本語案: URL 常に matches 主要 コンテンツ, と ユーザー できる refresh, share, と link へ 暫定日本語案: exactly どこ それら are. Meanwhile crawlable ?page=N URLs exist independently, so 暫定日本語案: Google できる reach すべての chunk directly whether または ない renderer ever triggers 暫定日本語案: scroll.

暫定日本語案: Two implementation notes その matter:

• 暫定日本語案: 使用 IntersectionObserver (または native ブラウザー lazy-loading), ない raw scroll 暫定日本語案: listener. It performs far better (no scroll-thrash) と it’s “load when visible” mechanism Google endorses 向けに deferred コンテンツ.
• 暫定日本語案: 保つ paginated 設定 discoverable independently of JS. Real anchors in 暫定日本語案: DOM, と/または ?page=N URLs listed in あなた XML sitemap. Whatever renderer 暫定日本語案: captures, sitemap-と-links layer is あなた backstop.

暫定日本語案: If live サイト is already exhibiting merge bug と あなた need へ stop bleeding 暫定日本語案: 前に あなた できる rebuild, my blunt emergency fix is へ block JavaScript file その 暫定日本語案: triggers infinite scroll in robots.txt so it physically できる’t fire during 暫定日本語案: rendering — buying time へ ship proper paginated-URL architecture.

Navigation state: back, forward, refresh, と share have へ reconstruct 同じ view

暫定日本語案: History API point above covers half contract — updating address bar as 暫定日本語案: chunk becomes 主要. other half is making sure すべての entry path back へ その 暫定日本語案: URL actually reconstructs right コンテンツ, ない just right scroll position:

• 暫定日本語案: 使用 pushState() いつ chunk becomes 主要 visible コンテンツ 向けに 最初 暫定日本語案: time — その’s real navigation 手順, と it’s 何 作る back button meaningful.
• 暫定日本語案: 使用 replaceState() 向けに corrections その shouldn’t 作成 their own back-button 暫定日本語案: stop, like syncing URL 後に fast scroll past several chunks at once.
• 暫定日本語案: Listen 向けに popstate と re-render (または re-fetch) chunk その matches URL in 暫定日本語案: イベント. ブラウザー’s デフォルト back/forward behavior restores scroll position, 暫定日本語案: ない dynamic list state あなた JavaScript built — if ユーザー hits back 後に あなた 暫定日本語案: loader appended 40 more items, あなた need へ reconstruct which items belong on その 暫定日本語案: ページ, ない just scroll them there.
• 暫定日本語案: Don’t lean on 自動 scroll restoration alone へ solve この. It controls どこ 暫定日本語案: viewport lands, ない 何 コンテンツ is present — if underlying list できる change 暫定日本語案: 間に visits (新しい 商品 追加, items out of stock), scroll position なしで 暫定日本語案: コンテンツ reconstruction できる strand ユーザー in 誤った context.

暫定日本語案: この is 同じ discipline paginated-URL fix already depends on: chunk’s URL 暫定日本語案: has へ return コンテンツ it promised on fresh load, refresh, と 暫定日本語案: 検索-Console live テスト — ない just 最初 time it’s fetched mid-scroll.

Loading, error, と end-of-results states

暫定日本語案: production implementation needs more states than “loading” と “loaded”:

• 暫定日本語案: Initial load — 最初 chunk すべき already be in raw HTML サーバー 暫定日本語案: 送信, ない assembled entirely by JS 後に fact.
• 暫定日本語案: Next-chunk loading — visible in-progress indicator so ユーザー (と anyone 暫定日本語案: テスト とともに assistive tech) know fetch is underway.
• 暫定日本語案: Empty — distinct state 向けに zero results, ない blank space その looks broken.
• 暫定日本語案: Error / retry — failed fetch shouldn’t silently strand ページ とともに no way へ 暫定日本語案: try again, と retry shouldn’t duplicate または reorder items already on ページ.
• 暫定日本語案: End of results — clear signal, ない infinite spinner, once there’s nothing 暫定日本語案: left へ load.

暫定日本語案: None of この is Google-specific, ただし it’s 同じ reliability paginated-URL fix 暫定日本語案: depends on: if loader できる silently break mid-fetch, あなた できる’t trust その any given 暫定日本語案: クロール または ユーザー session actually captured chunk it すべき have.

Accessibility と パフォーマンス: two things infinite scroll doesn’t give あなた 向けに 無料

暫定日本語案: Infinite scroll has no inherent Core Web Vitals outcome, good または bad — it’s determined 暫定日本語案: entirely by どのように あなた 構築 it. すべての appended chunk grows DOM, と large enough 暫定日本語案: DOM raises layout と style-recalculation cost, so watch append cost, 画像 loading, 暫定日本語案: layout shift から コンテンツ なしで reserved space, と long tasks as list grows. On 暫定日本語案: very long ページ, consider virtualizing chunks その have scrolled far out of view 暫定日本語案: (removing their DOM nodes) instead of letting DOM grow unbounded.

暫定日本語案: Accessibility needs its own deliberate design, ない assumption その “it renders, so it’s fine”:

• 暫定日本語案: Keyboard ユーザー need へ be able へ reach 新しい コンテンツ — と footer または 暫定日本語案: end-of-ページ navigation — なしで ページ silently growing out から 下で their tab 暫定日本語案: order.
• 暫定日本語案: Screen reader ユーザー need 新しい コンテンツ announced なしで interrupting 何 それら’re 暫定日本語案: doing — polite status 地域, ない disruptive alert, is usual pattern.
• 暫定日本語案: WAI-ARIA フィード design pattern is built 向けに exactly この ケース: 記事-level 暫定日本語案: 地域 inside フィード container, とともに defined keyboard behavior 向けに moving 間に 暫定日本語案: items と 向けに reaching コンテンツ 前に と 後に フィード.
• 暫定日本語案: Focus shouldn’t silently jump または get lost いつ 新しい chunk loads.

暫定日本語案: None of この is optional cleanup. It’s difference 間に infinite scroll その 暫定日本語案: 機能 向けに everyone と one その だけ 機能 向けに mouse ユーザー とともに JavaScript who 決して 暫定日本語案: strays から happy path.

historical context: rel=next/prev is legacy

暫定日本語案: If あなた learned pagination years ago, あなた learned rel="next" / rel="prev". Google 暫定日本語案: introduced them in 2011 と paired them とともに its original 2014 “infinite scroll search-friendly recommendations” (paginate コンテンツ, 提供 component ページ). 暫定日本語案: Then in 2019 Google announced it hadn’t been using それらの tags 向けに years と formally 暫定日本語案: dropped them. pagination doc confirms it 現在: “In the past, Google used <link rel="next" href="..."> and <link rel="prev" href="..."> to identify next page and previous page relationships. Google no longer uses these tags, although these links may still be used by other search engines.”

暫定日本語案: So 現在の Google recipe is unique URLs + crawlable links + History API — no 暫定日本語案: rel=next/rel=prev 必要. ただし “other search engines” 含む Bing, which 暫定日本語案: still respects them, so there’s no harm in 保持 them in あなた markup 向けに cross-engine 暫定日本語案: benefit と accessibility. Bing itself doesn’t publish infinite-scroll-specific 暫定日本語案: guidance; its stance reduces へ general JS-rendering caution its team laid out — 暫定日本語案: bingbot できる render JavaScript ただし “it is difficult for bingbot to process JavaScript at scale,” so crawlable paginated fallback 役立つ Bing 向けに exactly 同じ 理由 it 暫定日本語案: 役立つ Google.

Ecommerce category ページ: highest-stakes ケース

暫定日本語案: 大半の 一般的な real-world infinite scroll is on ecommerce category / 商品 暫定日本語案: listing ページ (PLPs), と it’s どこ risk costs actual money. If deep-catalog 暫定日本語案: 商品 past 最初 screenful 決して get インデックス登録, それら できる’t 順位, と あなた lose 暫定日本語案: long tail of 商品-level オーガニック トラフィック. この is 同じ territory covered in depth 暫定日本語案: in category-ページ material — infinite scroll is one more 理由 それらの ページ need 暫定日本語案: crawlable structure underneath UX.

暫定日本語案: Two backstops matter here:

• 暫定日本語案: XML sitemaps listing すべての canonical 商品 と paginated category URL, so 暫定日本語案: discovery doesn’t depend on renderer.
• 暫定日本語案: ** マーチャント Center 商品 フィード**, which フィード Google 商品 データ independently of 暫定日本語案: whatever category ページ’s renderer captures.

暫定日本語案: Lumar’s analysis of top UK fashion retailers found infinite scroll へ be, in their 暫定日本語案: words, “the biggest loser when it comes to indexability and SEO friendliness” among 暫定日本語案: pagination patterns — useful reminder その この isn’t theoretical edge ケース, it’s 暫定日本語案: デフォルト failure mode of very popular PLP UX. (Lumar’s specific percentage 暫定日本語案: figures すべき be read から their live レポート 前に citing exact number.)

Infinite scroll vs. pagination vs. load more

暫定日本語案: Google’s pagination doc frames three UX patterns と is honest について tradeoffs. 暫定日本語案: Infinite scroll “uses a single page for all content” と is “intuitive — the user just keeps scrolling,” ただし it “can lead to ‘scrolling fatigue’ because of unclear result size” と “can’t handle very large numbers of results.” Classic numbered pagination is 暫定日本語案: 大半の robust 向けに SEO because すべての ページ is inherently real URL. “Load more” sits in 暫定日本語案: 間に — fine if button is (または wraps) real link へ paginated URL, useless 向けに 暫定日本語案: SEO if it’s pure クリック handler.

暫定日本語案: decision isn’t “which is allowed” — all three are 許可. It’s “which UX do you want, and did you build the crawlable URL layer underneath it.” Mueller’s 2023 summary 暫定日本語案: is whole thing in one line: “if each piece or virtual page is also accessible and findable through a unique URL, generally it should be fine to have infinite scroll.”

AI要約

暫定日本語案: condensed take on Advanced version:

• 暫定日本語案: Root constraint: Googlebot doesn’t scroll または クリック. コンテンツ gated behind 暫定日本語案: scroll または クリック イベント is invisible へ it by デフォルト (“Google Search does not interact with your page”).
• 暫定日本語案: Google’s workaround: it renders in very tall viewport (~411×12,140px mobile, 暫定日本語案: ~1024×9,307px desktop) instead of scrolling.
• 暫定日本語案: ** failure mode:** その tall viewport できる trigger scroll loader during 暫定日本語案: rendering, folding next logical ページ へ 現在の one — so two ページ get 暫定日本語案: インデックス登録 as single URL. “not indexed” ページ 可能性がある actually be インデックス登録 as part of 暫定日本語案: another URL.
• 暫定日本語案: No guarantee: per Mueller, Google might load “two or three of these pages … but not everything.” Infinite scroll alone is ない reliable deep-インデックス登録 方法.
• 暫定日本語案: ** fix (architectural):** persistent, unique, absolute per-chunk URLs (e.g. 暫定日本語案: ?page=12), linked とともに crawlable <a href>, とともに History API 暫定日本語案: (pushState/replaceState) updating address bar as 各 chunk becomes 主要.
• 暫定日本語案: Trigger mechanism: IntersectionObserver / native lazy-load, ない raw scroll 暫定日本語案: listener.
• 暫定日本語案: Legacy note: rel=next/rel=prev dropped by Google in 2019; Bing still supports 暫定日本語案: it, so 保つ it 向けに cross-engine benefit.
• 暫定日本語案: Ecommerce: PLPs are highest-stakes ケース; back them とともに sitemaps と 暫定日本語案: マーチャント Center フィード. Verify in URL Inspection ツール’s rendered HTML.
• 暫定日本語案: Emergency fix on live merge bug: block infinite-scroll JS file so it できる’t 暫定日本語案: fire during rendering while あなた rebuild.
• 暫定日本語案: Navigation state: pushState 向けに real navigation 手順, replaceState 向けに 暫定日本語案: in-place corrections, と popstate handler その reconstructs chunk’s コンテンツ 暫定日本語案: — ない just its scroll position — on back/forward.
• 暫定日本語案: Loading/error/end states: distinct initial-load, next-chunk-loading, empty, 暫定日本語案: error/retry, と end-of-results states; broken loader is reliability 問題 暫定日本語案: 前に it’s SEO one.
• 暫定日本語案: Accessibility と パフォーマンス: infinite scroll has no inherent Core Web Vitals 暫定日本語案: outcome (it’s 何 あなた 構築); keyboard reachability, non-disruptive announcements, 暫定日本語案: と WAI-ARIA フィード pattern are separate design 機能 から インデックス登録 fix.
• 暫定日本語案: Dated observations: treat exact viewport pixel dimensions と 暫定日本語案: merge-bug mechanics as implementation-specific, ない stable spec — verify per URL.

公式ドキュメント

暫定日本語案: 主要-ソース ドキュメント on infinite scroll, pagination, と JS rendering.

暫定日本語案: Google

• 暫定日本語案: Fix lazy-loaded コンテンツ — 含む “Support paginated loading for infinite scroll” section (unique per-chunk URLs, absolute ページ numbers, History API) と URL Inspection テスト 手順. 最後 updated 2025-12-10.
• 暫定日本語案: Pagination, incremental ページ loading, と their impact on Google 検索 — three UX patterns (pagination / load more / infinite scroll), their pros/cons, crawler-interaction note, と rel=next/rel=prev deprecation.
• 暫定日本語案: Infinite scroll 検索-friendly recommendations — original 2014 blog post (historical; rel=next/rel=prev pairing it described is 現在 superseded).
• 暫定日本語案: September 2023 SEO Office Hours Transcript — Mueller’s on—record restatement of unique-URL rule.
• 暫定日本語案: Understand JavaScript SEO basics — broader rendering context infinite scroll sits inside.

暫定日本語案: Bing / Microsoft

• 暫定日本語案: bingbot Series: JavaScript, Dynamic Rendering, と Cloaking. Oh My! — Bing’s general JS-rendering guidance (no infinite-scroll-specific ページ exists; Bing still respects rel=next/rel=prev).

出典からの引用

暫定日本語案: On—record statements から Google と Bing. 各 link is deep link その jumps へ 暫定日本語案: quoted passage on ソース ページ.

暫定日本語案: Google — infinite scroll & paginated-loading rule

• 暫定日本語案: “To implement infinite scroll in an indexable way, make sure your website supports paginated loading of these chunks.” … “Give each chunk its own persistent, unique URL.” 暫定日本語案: — Google 検索 Central, “Fix lazy-loaded content.” 暫定日本語案: Jump へ quote
• 暫定日本語案: “When a new page chunk is loaded in response to the user scrolling, and it becomes the primary visible element for the user, update the displayed URL using the History API.” 暫定日本語案: Jump へ quote
• 暫定日本語案: “The methods mentioned don’t rely on user actions, such as scrolling or clicking, to load content, which is important as Google Search does not interact with your page.” 暫定日本語案: Jump へ quote
• 暫定日本語案: “You can use the URL Inspection Tool in Search Console to see if all content was loaded. Check the rendered HTML to make sure your content is in the rendered HTML by looking for it in URL Inspection Tool.” 暫定日本語案: Jump へ quote

暫定日本語案: Google — pagination doc: crawler behavior & rel=next/prev

• 暫定日本語案: “Google’s crawlers don’t ‘click’ buttons and generally don’t trigger JavaScript functions that require user actions to update the current page contents.” 暫定日本語案: Jump へ quote
• 暫定日本語案: “In the past, Google used <link rel="next" href="..."> and <link rel="prev" href="..."> to identify next page and previous page relationships. Google no longer uses these tags, although these links may still be used by other search engines.” 暫定日本語案: Jump へ quote

暫定日本語案: John Mueller, Google — September 2023 office hours

• 暫定日本語案: “It depends how you implement infinite scrolling. if each piece or virtual page is also accessible and findable through a unique URL, generally it should be fine to have infinite scroll.” 暫定日本語案: Jump へ quote

暫定日本語案: John Mueller, Google — “9000px viewport” tweet (Nov 2017)

• 暫定日本語案: “Googlebot renders with a very tall viewport, which skews some CSS (often images). Try in Chrome dev-tools, eg 9000px high viewport.” 暫定日本語案: — reproduced by 検索エンジン Roundtable. 暫定日本語案: Read coverage

暫定日本語案: Bing — general JS rendering (no infinite-scroll-specific ページ)

• 暫定日本語案: “As we shared last week at SMX East, bingbot is generally able to render JavaScript. However, bingbot does not necessarily support all the same JavaScript frameworks that are supported in the latest version of your favorite modern browser.” 暫定日本語案: — Fabrice Canel & Frédéric Dubut, Microsoft Bing. 暫定日本語案: Jump へ quote

暫定日本語案: Note: John Mueller’s February 2022 office-hours remarks on “two or three of these pages loaded on one page,” と Martin Splitt’s April 2020 “Googlebot doesn’t scroll” conference comments, are relayed via 検索エンジン Journal’s write-ups rather than confirmed against 主要 recordings — treat them as high-confidence ただし re-確認 live ソース 前に quoting verbatim.

Which pagination pattern すべき あなた 使用

暫定日本語案: 機能 top へ bottom.

暫定日本語案: 1. Does コンテンツ past 最初 screen need へ 順位 in 検索?

• 暫定日本語案: No (e.g. internal-だけ フィード, logged-in dashboard) → any pattern is fine; 暫定日本語案: optimize purely 向けに UX.
• 暫定日本語案: Yes → 保つ going.

暫定日本語案: 2. Do あなた already have (または できる あなた 構築) real per-chunk URL 向けに すべての batch?

• 暫定日本語案: No, と あなた できる’t → 使用 classic numbered pagination. すべての ページ is real 暫定日本語案: URL by デフォルト, so it’s lowest-risk pattern 向けに SEO.
• 暫定日本語案: Yes → infinite scroll または “load more” are both fine, continue.

暫定日本語案: 3. どのように large is 設定?

• 暫定日本語案: Very large (thousands of items, deep catalog) → prefer numbered pagination 暫定日本語案: または infinite-scroll-超えて-real-URLs; pure infinite scroll “can’t handle very large numbers of results.” 追加 sitemaps as discovery backstop.
• 暫定日本語案: Moderate → infinite scroll または load more, backed by paginated URLs, is fine.

暫定日本語案: 4. 構築 infinite scroll — is it wired へ real URLs + History API?

• 暫定日本語案: No (scroll イベント だけ, no URLs) → do ない ship. この is setup その gets deep 暫定日本語案: コンテンツ merged/unindexed.
• 暫定日本語案: Yes (?page=N URLs + crawlable anchors + pushState) → ship it, then verify in 暫定日本語案: URL Inspection ツール’s rendered HTML.

暫定日本語案: 5. Already live と deep ページ “isn’t indexed”?

• 暫定日本語案: 確認 URL Inspection ツール’s rendered HTML of previous ページ/post 最初 — 暫定日本語案: “missing” コンテンツ 可能性がある be merged there.
• 暫定日本語案: If it is → emergency fix: block infinite-scroll JS file so it できる’t fire during 暫定日本語案: rendering, then rebuild on paginated URLs.

検索-friendly infinite scroll 確認

• 暫定日本語案: [ ] すべての コンテンツ chunk has its own persistent, unique, absolute URL (e.g. 暫定日本語案: ?page=2, ない ?date=yesterday).
• 暫定日本語案: [ ] 各 URL returns 同じ コンテンツ すべての time it loads (stable, ない 暫定日本語案: session-dependent).
• 暫定日本語案: [ ] Chunks are linked とともに real <a href> links, discoverable なしで running JS.
• 暫定日本語案: [ ] visible URL updates via History API (pushState/replaceState) as 暫定日本語案: 各 chunk becomes 主要 コンテンツ.
• 暫定日本語案: [ ] scroll loader 使用 IntersectionObserver (または native lazy-loading), ない 暫定日本語案: raw scroll イベント listener.
• 暫定日本語案: [ ] Paginated URLs are listed in XML sitemap (と, 向けに ecommerce, backed by 暫定日本語案: マーチャント Center フィード).
• 暫定日本語案: [ ] rel=next/rel=prev optionally present 向けに Bing (harmless 向けに Google, which 暫定日本語案: ignores it).
• 暫定日本語案: [ ] URL Inspection ツール → rendered HTML confirms deep コンテンツ is present と ない 暫定日本語案: merged から adjacent ページ.
• 暫定日本語案: [ ] Locally reproduced とともに tall DevTools viewport (~9000px) へ confirm loader 暫定日本語案: doesn’t 超えて-fire during render.
• 暫定日本語案: [ ] popstate handler reconstructs chunk コンテンツ on back/forward, ない just 暫定日本語案: scroll position.
• 暫定日本語案: [ ] Distinct loading, error/retry, empty, と end-of-results states exist — 暫定日本語案: failed fetch doesn’t silently strand ページ.
• 暫定日本語案: [ ] Keyboard ユーザー できる reach 新しい コンテンツ と ページ footer; 新しい コンテンツ is 暫定日本語案: announced via polite status 地域, ない disruptive alert.

何 breaks infinite scroll 向けに SEO

暫定日本語案: Scroll-イベント-だけ loading とともに no real URLs. 暫定日本語案: classic mistake. コンテンツ lives だけ in DOM 後に scroll fires — Googlebot 決して 暫定日本語案: scrolls, so it’s invisible. There’s nothing へ クロール と nothing へ fall back on.

暫定日本語案: ** “Load more” button その’s pure クリック handler.** 暫定日本語案: Feels safer than auto-scroll, isn’t. Google doesn’t クリック buttons either. It だけ 役立つ 暫定日本語案: if button is (または wraps) real <a href> へ paginated URL.

暫定日本語案: Fragment/hash URLs 向けに pagination (#page=2). 暫定日本語案: Fragments don’t 作成 distinct crawlable URLs. 使用 real クエリ-パラメーター または path-based 暫定日本語案: URLs instead.

暫定日本語案: Relative または unstable URLs (?date=yesterday, session-scoped コンテンツ). 暫定日本語案: If 同じ URL returns 異なる コンテンツ on 異なる loads, it できる’t serve as stable, 暫定日本語案: indexable ページ. 使用 absolute ページ numbers.

暫定日本語案: Ignoring tall-viewport merge bug. 暫定日本語案: Assuming “not indexed” means Google is ignoring ページ. In infinite scroll it 多くの場合 means 暫定日本語案: コンテンツ got folded へ adjacent URL by render-time trigger — 異なる 問題 暫定日本語案: needing 異なる fix.

暫定日本語案: Blocking あなた JS/CSS globally as “fix.” 暫定日本語案: Blocking specific infinite-scroll trigger file is deliberate emergency 測定. 暫定日本語案: Blocking all JS/CSS is ない — it wrecks rendering 全体で whole ページ.

Infinite scroll SEO — cheat sheet

暫定日本語案: ** three UX patterns**

暫定日本語案: ** non-negotiables 向けに infinite scroll**

• 暫定日本語案: Persistent, unique, absolute URL per chunk (?page=12).
• 暫定日本語案: 同じ コンテンツ on すべての load (no ?date=yesterday).
• 暫定日本語案: Crawlable <a href> links 間に chunks.
• 暫定日本語案: History API (pushState/replaceState) へ sync address bar.
• 暫定日本語案: IntersectionObserver, ない raw scroll listener.

暫定日本語案: Fast facts

• 暫定日本語案: Googlebot: doesn’t scroll, doesn’t クリック.
• 暫定日本語案: Render viewport (reported): ~411×12,140px mobile, ~1024×9,307px desktop.
• 暫定日本語案: Merge bug: tall viewport できる fire loader mid-render → two ページ インデックス登録 as one.
• 暫定日本語案: rel=next/rel=prev: Google dropped it in 2019; Bing still 使用 it.
• 暫定日本語案: Verify: URL Inspection ツール → rendered HTML.
• 暫定日本語案: Emergency fix on live merge bug: block infinite-scroll JS file.

何 good と bad implementations look like

暫定日本語案: Bad — scroll-だけ, invisible へ Google

暫定日本語案: category ページ ships 24 商品 in HTML. scroll listener fetches next 暫定日本語案: 24 と appends them. There are no ?page=N URLs anywhere, no anchors, no History API. 暫定日本語案: Googlebot loads ページ, 決して scrolls, と indexes 24 商品. other 300 in 暫定日本語案: catalog are undiscoverable 通じて この ページ.

暫定日本語案: Bad — merge bug in wild

暫定日本語案: publisher’s blog 使用 infinite scroll へ append next post below 現在の one. 暫定日本語案: writer complains their 新しい 記事 “won’t index.” It’s actually インデックス登録 — as part of 暫定日本語案: previous post’s URL, because Google’s tall render viewport triggered loader と 暫定日本語案: folded next 記事 へ 現在の ページ’s render. Fix: paginate properly, と in 暫定日本語案: meantime block infinite-scroll trigger script.

暫定日本語案: Good — infinite scroll 超えて real URLs

暫定日本語案: 同じ category exists at /shoes?page=1, /shoes?page=2, … 各 real URL returning 暫定日本語案: stable コンテンツ, all listed in XML sitemap と linked とともに <a href> at foot of 暫定日本語案: listing. 向けに humans, IntersectionObserver loads next chunk as それら approach bottom 暫定日本語案: と history.pushState() updates address bar へ ?page=2 いつ その batch becomes 暫定日本語案: 主要 コンテンツ. Google reaches すべての ページ directly via links と sitemap; scroll UX 暫定日本語案: is pure enhancement on top.

Implementation と diagnostic snippets

History API pattern (クライアント-side)

暫定日本語案: Load 各 chunk いつ it’s について へ enter view とともに IntersectionObserver, then swap 暫定日本語案: visible URL いつ その chunk becomes 主要. key is その ?page=N URLs are real 暫定日本語案: ページ その exist サーバー-side regardless of この script.

// A sentinel element sits at the bottom of the current chunk.
const sentinel = document.querySelector('#load-more-sentinel');
let nextPage = 2;

const io = new IntersectionObserver(async (entries) => {
  if (!entries[0].isIntersecting) return;
  const res = await fetch(`/shoes?page=${nextPage}&partial=1`);
  const html = await res.text();
  document.querySelector('#product-grid').insertAdjacentHTML('beforeend', html);

  // Update the address bar so refresh/share/link land on this chunk.
  // pushState adds a history entry; replaceState if you don't want back-button steps.
  history.pushState({ page: nextPage }, '', `/shoes?page=${nextPage}`);
  nextPage++;
}, { rootMargin: '600px' }); // start loading before the user hits the very bottom

io.observe(sentinel);

暫定日本語案: と crucially, crawlable fallback still lives in DOM — この is 何 Google follows:

<nav aria-label="Pagination">
  <a href="/shoes?page=2" rel="next">Next</a>
  <!-- rel="next"/"prev" is ignored by Google since 2019 but still used by Bing -->
</nav>

DevTools console: does あなた loader fire なしで real scroll

暫定日本語案: Simulate Google’s tall viewport locally, then 確認 whether extra chunks loaded on their 暫定日本語案: own. In Chrome DevTools, 設定 very tall カスタム device viewport (~1024×9000), reload, と 暫定日本語案: run この in Console へ count どのように many chunks are present とともに no 手動 scrolling:

// Count rendered product cards (adjust the selector to your markup)
console.log('cards rendered without scrolling:', document.querySelectorAll('#product-grid .product-card').length);
// If this is much higher than your per-page count, the loader is over-firing on height alone.

DevTools console: confirm paginated URLs actually exist

暫定日本語案: 前に trusting fallback, verify 各 ?page=N returns real, distinct コンテンツ 暫定日本語案: サーバー-side (ない JS-だけ route):

// Run in the console; a real paginated URL should return HTML containing products.
for (const n of [2, 3, 4]) {
  const html = await (await fetch(`/shoes?page=${n}`)).text();
  console.log(`page ${n}: ${html.includes('product-card') ? 'has products ✅' : 'EMPTY — JS-only? ❌'}`);
}

Bookmarklet: jump straight へ ページ’s rendered-HTML 確認

暫定日本語案: Drag この へ あなた bookmarks bar へ open 現在の URL in 検索 Console’s URL Inspection 暫定日本語案: ツール, どこ あなた then read rendered HTML (ない ソース) へ see どのように far down Google 暫定日本語案: captured コンテンツ:

javascript:(()=>{const u=encodeURIComponent(location.href);open('https://search.google.com/search-console/inspect?resource_id=&id='+u,'_blank');})();

暫定日本語案: You’ll still pick あなた verified プロパティ inside 検索 Console; bookmarklet just 暫定日本語案: saves copy-paste of 現在の URL.

Prove infinite scroll is indexable 後に launch

テスト lazy-loaded 商品 grid なしで conflating ブラウザー states

暫定日本語案: single screenshot から tall ブラウザー window is ない enough. Run 同じ category 暫定日本語案: URL 通じて この matrix と start 各 fresh-navigation ケース とともに empty ページ cache 暫定日本語案: または documented, consistent cache state:

暫定日本語案: Fresh navigation と resizing are 異なる tests. component 可能性がある register its 暫定日本語案: observer, calculate thresholds, または fetch its 最初 batch だけ during initialization; 暫定日本語案: resizing already-running ページ できる therefore pass いつ crawler-style navigation 暫定日本語案: at final dimensions fails, または vice versa. Incremental scrolling is ユーザー-path 暫定日本語案: control, ない substitute 向けに no-interaction runs.

暫定日本語案: 向けに すべての run, record:

• 暫定日本語案: リクエスト URL と final address-bar URL;
• 暫定日本語案: viewport dimensions と whether ページ was loaded または resized at それらの dimensions;
• 暫定日本語案: 商品 cards rendered 後に 各 load;
• 暫定日本語案: unique 商品 URLs in real <a href> attributes;
• 暫定日本語案: duplicate, 不足している, または cross-ページ 商品 URLs;
• 暫定日本語案: network リクエスト と trigger その initiated 各 additional batch;
• 暫定日本語案: whether ページ/chunk boundaries update URL と survive refresh;
• 暫定日本語案: relevant accessibility-tree nodes, names, roles, と link destinations.

暫定日本語案: Reconcile それらの counts against expected catalog または paginated-chunk inventory. 暫定日本語案: Visible card count と unique link count are separate assertions: grid できる paint 48 暫定日本語案: cards while exposing fewer crawlable 商品 links, duplicated destinations, または 暫定日本語案: controls その are absent から accessibility tree. 保つ distinctive 最初 と 暫定日本語案: 最後 SKU 向けに 各 chunk so あなた できる detect tall viewport silently merging ページ 2 暫定日本語案: へ ページ 1.

テスト すべての chunk as standalone URL

暫定日本語案: テスト へ run: リクエスト 最初, middle, と 最後 paginated URLs directly とともに 暫定日本語案: JavaScript disabled. Expected result: 各 returns stable, unique コンテンツ と 暫定日本語案: successful レスポンス なしで requiring scroll. Failure interpretation: URL 暫定日本語案: layer is cosmetic または still depends on クライアント interaction. 監視 window: 暫定日本語案: Immediate 後に deployment. Rollback trigger: Any listed chunk リダイレクト へ 暫定日本語案: 最初 ページ, returns shared shell, または changes コンテンツ 間に リクエスト.

テスト crawler discovery なしで interaction

暫定日本語案: テスト へ run: Inspect rendered DOM 前に scrolling と extract pagination 暫定日本語案: links. Expected result: Sequential chunks are linked 通じて real absolute または 暫定日本語案: root-relative href values. Failure interpretation: crawler has no path beyond 暫定日本語案: 最初 loaded 設定. 監視 window: Immediate. Rollback trigger: next 暫定日本語案: chunk exists だけ behind button handler または scroll イベント.

テスト 向けに tall-viewport merge bug

暫定日本語案: テスト へ run: Render 最初 chunk in very tall Chrome viewport, then 検索 暫定日本語案: DOM 向けに distinctive item から next chunk. Expected result: 最初 暫定日本語案: URL does ない absorb next URL’s 主要 コンテンツ. Failure interpretation: 暫定日本語案: loader fires during rendering even なしで ユーザー interaction. 監視 window: 暫定日本語案: Immediate locally, then recheck URL Inspection 後に Google recrawls. Rollback 暫定日本語案: trigger: Two logical chunks 表示される as one document または address bar does ない track 暫定日本語案: 主要 visible chunk.

テスト yourself: Infinite Scroll SEO

暫定日本語案: Five quick questions on making infinite scroll indexable. Pick answer 向けに 各, then 確認.

時間を使う価値のあるリソース

暫定日本語案: My related writing

• 暫定日本語案: JavaScript SEO 問題 & Best Practices — my full write-up, including “Infinite scroll issues” section (two ページ インデックス登録 as one) と “What Googlebot sees” viewport figures.
• 暫定日本語案: Beginner’s Guide へ Technical SEO — どこ rendering と crawlability fit in bigger picture.

暫定日本語案: My speaking

• 暫定日本語案: どのように 検索 機能 (SlideShare) — my walkthrough of クロール, rendering, インデックス登録, と ランキング, which is backdrop へ すべての infinite-scroll decision. (My standing disclaimer applies: “This is my understanding of systems… not going to be 100% complete or accurate.”)

暫定日本語案: から around industry

• 暫定日本語案: Google 検索 Central, Fix lazy-loaded コンテンツ — 現在の, authoritative “Support paginated loading for infinite scroll” guidance.
• 暫定日本語案: Google 検索 Central, Pagination, incremental ページ loading, と their impact on Google 検索 — three UX patterns と rel=next/rel=prev deprecation.
• 暫定日本語案: Matt G. Southern, どのように Google Crawls ページ とともに Infinite Scrolling (検索エンジン Journal) — Mueller “two or three pages loaded on one page” explanation of merge risk.
• 暫定日本語案: Matt G. Southern, Google’s Martin Splitt Explains なぜ Infinite Scroll Causes SEO 問題 (検索エンジン Journal) — “Googlebot doesn’t scroll,” IntersectionObserver vs. scroll, と “test your implementations.”
• 暫定日本語案: Barry Schwartz, GoogleBot Crawls & Renders Tall, とともに 9000px High Viewport? (検索エンジン Roundtable) — origin of tall-viewport explanation.
• 暫定日本語案: Matthew Edgar, SEO Friendly Infinite Scroll — “component pages” framing (chunks その 機能 independently, even とともに JS off).
• 暫定日本語案: Go Fish Digital, どのように へ Implement Infinite Scroll 向けに SEO — implementation-oriented walkthrough.
• 暫定日本語案: Lumar, State of Pagination in eCommerce — top-UK-fashion-retailer indexability analysis その rated infinite scroll worst-performing pattern.

変更履歴