Shopify collection 商品很多時,可以使用傳統分頁、載入更多或無限捲動。顧客看到下一批商品,不代表搜尋引擎一定能發現。Google 官方說明 crawler 通常沿 <a href> 前進,不會可靠地點按按鈕或觸發需要使用者操作的 JavaScript。
因此 UI 可選適合顧客的模式,底層仍要提供可獨立取得的 page URL 和連結。
每一頁有穩定網址
例如 ?page=2、?page=3,回傳該頁商品並可直接開啟、重整和分享。不要只用 #page-2,fragment 不適合作為分頁資源。超過最後頁、負數與非數字參數要有一致狀態,不生成無限空頁。
商品排序與每頁數量改變時,測試是否造成重複或漏項。資料持續更新的 collection 可接受商品移動,但核心商品應另由分類和 sitemap 發現。
分頁通常使用自我 canonical
Google 的分頁指南建議不要把所有分頁 canonical 到第一頁,每個 page URL 指向自己。否則後段商品和內容的發現訊號可能被弱化。第一頁的 canonical 使用乾淨 collection URL,依 Shopify 實際輸出檢查。
Canonical 是提示,頁面內容、內鏈和 sitemap 也要一致。不同排序或純 UI 參數通常不需索引,另以 canonical、noindex 或 crawl 策略治理。
使用真正的順序連結
每頁至少用 <a href> 連下一頁,前頁連結也便於顧客返回。按鈕可以被 CSS 設計成符合介面,但 DOM 仍要有 href。Google 已不使用 rel=next/prev 作為索引訊號,其他系統可能仍讀取;有沒有這兩個 rel 不能取代 crawlable links。
大型序列不必在每頁顯示數百個頁碼。保留相鄰頁、第一頁與合理跳頁,並讓 collection 商品本身有正常連結。
Load more 與 infinite scroll 提供 URL 退路
JavaScript 點擊載入更多時,從可抓取 page endpoint 取得下一批,並可用 History API 更新或保存位置。停用 JavaScript 後,使用者和 crawler 仍能沿分頁連結看到商品。Server rendered 初始 HTML 不應只留下空容器。
返回商品列表時恢復已載入內容和 scroll position,避免顧客每次從第一頁重來。這是 UX 問題,也會影響商品發現與轉換。
分頁和篩選參數分開治理
?page=2&color=black&sort=price 可能形成大量組合。先決定哪些 filter landing 有搜尋價值,其餘排序、顯示和低價值組合限制索引或 crawl。篩選設計可參考 Shopify 商品篩選 UX。
參數順序正規化,空 filter 和預設排序回到乾淨 URL。不要同時產生 color=black&page=2 與 page=2&color=black 兩套可索引網址。
Sitemap 和 feed 協助商品發現
Sitemap 放 canonical 商品與主要 collection,不需把每個分頁 URL 全塞入。Google Merchant Center feed 可協助發現商品,但不能修復前台孤立頁和錯誤 canonical。新商品上架後抽樣看是否能從 collection link 抵達。
商品只存在第 40 頁時,也應透過相關分類、品牌或內容取得其他合理連結。架構原則可沿用 Shopify SEO 架構。
驗收 HTML、狀態與效能
用瀏覽器停用 JavaScript、查看原始 HTML 和 crawler 檢查下一頁 href。測第一、中間、最後、越界頁的 status、canonical、robots、title、商品重複和返回行為。手機慢網路測 loading、error、retry 和 focus。
監看深層商品的 crawl、索引與 organic landing,不只看第一頁流量。Theme、Search App 或 collection 設定更新後重跑固定 collection,避免無限捲動視覺正常,搜尋連結已經消失。