Trong ba năm qua, hơn 58% trang web toàn cầu đã áp dụng thiết kế cuộn vô tận (Infinite Scroll) (Dữ liệu từ PageTraffic 2023)
Dữ liệu chính thức từ Google cho thấy tỷ lệ thất bại trong việc lập chỉ mục nội dung tải động lên tới 73% (Báo cáo Webmaster của Google 2022), trong khi trên các trang có cuộn vô tận thuần túy, chỉ có 12% “nội dung màn hình thứ hai” được lập chỉ mục (Dữ liệu thử nghiệm từ Ahrefs 2023).
Nghiêm trọng hơn, theo dõi từ SEMrush cho thấy tỷ lệ thoát trang của các trang cuộn vô tận cao hơn 41% so với các trang phân trang truyền thống, thời gian người dùng dành trên trang cũng giảm đi 19 giây.
Googlebot vẫn phụ thuộc vào quy tắc phân tích HTML ra đời từ năm 1998, bài viết này sẽ tiết lộ cách cân bằng kỹ thuật, phá vỡ “lời nguyền không thể vừa trải nghiệm tốt vừa đạt SEO”.
Table of Contens
ToggleTại sao trang cuộn vô tận dễ bị Google bỏ qua?
Đừng để các thuật ngữ kỹ thuật làm bạn bối rối, vấn đề cơ bản chỉ có ba điểm: Googlebot giống như một người đọc phản ứng chậm, còn trang cuộn vô tận giống như một cuốn sách không có số trang, bạn không thể tìm thấy nội dung ở các trang tiếp theo.
Googlebot xử lý nội dung động quá chậm
Hãy tưởng tượng bạn gửi tin nhắn cho một người bạn và họ luôn nhận được tin nhắn sau 3 giây.
Khi Googlebot tải trang, nếu nội dung được tải bằng JavaScript (như trang cuộn vô tận), Googlebot có thể sẽ đóng trang trước khi nội dung tải xong.
Dữ liệu thực tế cho thấy 38% trường hợp, Googlebot sẽ bỏ cuộc vì trang tải quá lâu (giống như người dùng không kiên nhẫn và đóng trang trước khi tải xong).
Không có URL riêng = Nội dung bị “mờ”
Trang phân trang truyền thống có URL riêng cho mỗi trang (ví dụ page=1, page=2), trong khi các trang cuộn vô tận lại gộp tất cả nội dung vào cùng một URL.
Điều này giống như bạn in tất cả 100 trang của một cuốn sách vào một tờ giấy, Google không thể biết rằng còn có nội dung phía sau.
Thực nghiệm đã chứng minh rằng không có URL riêng, khả năng được lập chỉ mục giảm xuống 54% (dữ liệu từ Ahrefs).
Nội dung ngoài màn hình đầu tiên bị xem là “sơ cấp”
Google có một quy tắc ngầm: Ưu tiên nội dung mà người dùng có thể thấy mà không cần cuộn trang.
Nếu nội dung trên màn hình đầu tiên không đủ mạnh, hoặc người dùng phải cuộn quá lâu mới đến được phần quan trọng, Google sẽ cho rằng trang này có chất lượng thấp.
Ví dụ, trên một trang danh sách sản phẩm của cửa hàng điện tử, 10 sản phẩm đầu tiên có thể được lập chỉ mục, nhưng 50 sản phẩm sau được tải bằng cuộn vô tận sẽ gần như không được Google nhận diện.
Thời gian tải chậm làm giảm điểm
Trang cuộn vô tận thường chứa nhiều hình ảnh và video, khiến thời gian tải chậm.
Google đã nói rõ rằng nếu trang mất hơn 3 giây để tải, điểm SEO sẽ bị giảm, trong khi thời gian tải trung bình của trang cuộn vô tận là 4.2 giây (dữ liệu từ SEMrush).
Điều này giống như việc khi kỳ thi kết thúc, mọi người đã nộp bài hết rồi, nhưng bạn vẫn đang viết tên mình.
3 hướng tối ưu kỹ thuật
Nhiều người khi phát hiện ra rằng trang cuộn vô tận ảnh hưởng đến SEO, phản ứng đầu tiên là quay lại với phân trang cũ.
Nhưng thực tế, chỉ cần chỉnh sửa một số kỹ thuật là bạn có thể làm hài lòng cả Googlebot và người dùng.
1. Load lai kết hợp: Tạo “cửa sau” cho Googlebot
👉 Quy tắc hành động: Màn hình đầu tiên tĩnh, các màn hình tiếp theo tải động
- Hiển thị nội dung của màn hình đầu tiên bằng HTML truyền thống (ví dụ: hiển thị 10 sản phẩm đầu tiên), giúp Googlebot dễ dàng thu thập dữ liệu
- Từ màn hình thứ hai trở đi, sử dụng JavaScript để tải thêm nội dung (ví dụ: tiếp tục tải từ sản phẩm thứ 11 đến sản phẩm thứ 30)
- Mẹo quan trọng: Giấu một liên kết phân trang ở cuối trang bằng cách dùng CSS (ví dụ: ), để Googlebot có thể tìm thấy liên kết của các nội dung tiếp theo
- Ví dụ thực tế: Một trang thương mại điện tử sử dụng phương pháp này đã tăng số lượng sản phẩm được lập chỉ mục từ 80 trang lên 500 trang, trong khi người dùng không nhận ra có phân trang.
2. Giả lập lịch sử duyệt web: Tạo URL mới mỗi khi cuộn
👉 Quy tắc hành động: Cuộn đến đâu, URL thay đổi đến đó
- Sử dụng History API của trình duyệt, khi người dùng cuộn đến màn hình thứ 3, thay đổi URL thành
xxx.com/#page=3
- Chỉ có một trang mà người dùng thấy, nhưng Google sẽ xem mỗi URL với dấu # là một trang độc lập và lập chỉ mục chúng
- Lưu ý: Cần phải cấu hình máy chủ để trả về nội dung tương ứng với các URL phân trang giả này, nếu không Google sẽ coi đây là lỗi “soft 404”
- Công cụ khuyến nghị: Sử dụng Next.js hoặc Nuxt.js với chức năng SSG để tự động tạo phân trang tĩnh
3. Load theo cấp độ: Đã nuôi dưỡng Googlebot trước, sau đó mới phục vụ người dùng
👉 Quy tắc hành động: Văn bản trước, hình ảnh và video sau
- Chỉ tải văn bản trước (ví dụ: tên sản phẩm, giá, mô tả)
- Hình ảnh và video sử dụng tính năng lazy loading (
loading="lazy"
), tải khi người dùng cuộn gần đến - Hiệu quả thực tế: Một trang tin tức đã giảm thời gian tải từ 4.3 giây xuống còn 1.9 giây, trong khi hình ảnh vẫn hiển thị bình thường
- Tiến xa hơn: Sử dụng
trong HTML để khai báo từ trước các từ khóa của nội dung sẽ tải sau
Hướng dẫn tránh lỗi
- Không sử dụng
display:none
để ẩn các liên kết phân trang, Google sẽ cho là bạn gian lận! Hãy dùng thuộc tínhhidden
hoặcaria-hidden="true"
- Mỗi màn hình ít nhất phải chứa 2-3 từ khóa chính xác để tránh bị Google đánh giá là nội dung trùng lặp
- Sử dụng công cụ Mobile-Friendly Test của Google để kiểm tra xem phân trang giả có thể thu thập trên thiết bị di động không
5 chỉ số SEO quan trọng cần theo dõi
Điều đáng sợ nhất khi sử dụng Infinite Scroll là “sự tự mãn” – bạn nghĩ rằng người dùng có trải nghiệm tốt, nhưng thực ra Google chẳng thấy được nội dung phía sau.
Giống như việc bạn mở một cửa hàng lớn, khách hàng ở quầy xem sản phẩm rất vui vẻ, nhưng chẳng ai biết trong kho còn hàng hóa gì. Để tránh thảm kịch này, hãy chú ý theo dõi 5 chỉ số sau:
1. Tỷ lệ bao phủ của công cụ thu thập dữ liệu (Crawl Budget)
- Trong báo cáo “Chỉ mục” của Google Search Console, xem số lượng trang “đã được lập chỉ mục”. Nếu có 100 trang nhưng chỉ thu thập được 20 trang, điều đó có nghĩa là công cụ thu thập dữ liệu chưa quét hết các trang sau.
- Cảnh báo nguy hiểm: Tỷ lệ bao phủ dưới 30% và tiếp tục giảm, hãy kiểm tra tốc độ tải trang hoặc thẻ phân trang (pagination).
2. Phân phối độ sâu nội dung
- Sử dụng Screaming Frog để thu thập tất cả liên kết trên trang web và kiểm tra xem liệu các nội dung sau màn hình thứ 3 có được liên kết nội bộ không.
- Ví dụ: Một diễn đàn phát hiện rằng các bài viết sau trang 10 không được lập chỉ mục, sau đó họ thêm liên kết “Chủ đề liên quan” ở cuối mỗi trang, kết quả là số lượng được lập chỉ mục tăng gấp 3 lần.
3. Thời gian hiển thị nội dung lần đầu (FCP)
- Nếu FCP trong Web Vitals vượt quá 2 giây, công cụ thu thập dữ liệu có thể bỏ qua việc tải các nội dung còn lại.
- Biện pháp khẩn cấp: Nén nội dung văn bản trên màn hình đầu tiên xuống dưới 15KB (tương đương với một bài tweet dài).
4. Tỷ lệ tồn tại của thẻ phân trang
- Kiểm tra xem các thẻ
rel="next"
vàrel="prev"
có đầy đủ không, sử dụng Ahrefs Site Audit để quét. - Bài học rút ra: Một trang thương mại điện tử đã bỏ quên một thẻ
rel="next"
, dẫn đến 3,000 trang sản phẩm không được lập chỉ mục.
5. Tỷ lệ thành công trong việc hiển thị trên thiết bị di động
- Trong công cụ Mobile-Friendly Test của Google, nếu “Nội dung cuộn được” hiển thị cảnh báo đỏ, điều đó có nghĩa là cuộn vô tận không tải được trên thiết bị di động.
- Mẹo kiểm tra thực tế: Mô phỏng tốc độ mạng 3G, buộc trang tải trong điều kiện mạng chậm và kiểm tra xem nội dung ở màn hình thứ 4 có hiển thị bình thường không.
Chiến lược SEO của các trang web hàng đầu với cuộn vô tận
Đừng nghĩ rằng các trang web lớn chỉ sử dụng công nghệ cao cấp, chiến lược của họ đôi khi đơn giản đến mức bạn phải tự hỏi “Cái này cũng làm được sao?” — nhưng nó thực sự hiệu quả.
Dưới đây là những chiến lược học hỏi từ các trang web lớn như ASOS, BBC, Twitter — không cần thay đổi phân trang, vẫn có thể để Google lập chỉ mục bình thường.
1. “Phân trang ma quái” của ASOS (Chiến lược kinh điển trong thương mại điện tử)
👉 Trông có vẻ như cuộn vô tận, nhưng thực tế lại ẩn chứa phân trang.
- Phía người dùng: Khi cuộn xuống, sản phẩm tiếp tục được tải mà không gặp gián đoạn.
- Phía Google: Mỗi khi cuộn thêm 20 sản phẩm, một liên kết ẩn
/products?page=2
sẽ được tạo ra và thông qua<link rel="next">
để thông báo cho công cụ thu thập dữ liệu. - Chi tiết kỹ thuật: Sử dụng
Intersection Observer API
để theo dõi vị trí cuộn, khi đến điểm giới hạn sẽ kích hoạt phân trang. - Hiệu quả: Số lượng trang sản phẩm được lập chỉ mục từ 300 trang tăng lên 8,200 trang, và tỷ lệ chuyển đổi trên di động tăng 17%.
2. “Điều hướng câu cá” của BBC (Chiến lược tiêu chuẩn trong ngành truyền thông)
👉 Khi cuộn vô tận đến cuối, một nút phân trang xuất hiện.
- Phía người dùng: Ban đầu bạn được cuộn qua 30 bài báo, và khi cuộn xuống cuối trang sẽ xuất hiện nút “Trang tiếp theo”.
- Phía Google: href của nút dẫn đến
/news?p=2
và sử dụngrel="canonical"
để xác định URL chính. - Chiến thuật: Nút phân trang có màu gradient và hoạt ảnh mũi tên, khuyến khích người dùng nhấp vào thay vì cuộn vô tận.
- Kết quả: Tỷ lệ chỉ mục của các trang sau trang đầu từ 11% tăng lên 68%, và người dùng trung bình đọc thêm 2.3 bài báo.
3. “Tải từng phần” của Twitter (Sách giáo khoa cho nền tảng mạng xã hội)
👉 Trông giống như cuộn vô tận, nhưng thực tế là tải 50 bài mỗi trang.
- Phía người dùng: Cuộn tweet mượt mà không có độ giật, gần như không nhận thấy sự phân trang
- Phía Google: Mỗi 50 tweet sẽ tạo ra một URL độc lập kiểu
/home?section=2
, và máy chủ sẽ tải trước JSON của 50 tweet tiếp theo - Mã nguồn chính: Dùng
window.history.replaceState
để cập nhật thanh địa chỉ mà không làm gián đoạn trải nghiệm người dùng - Dữ liệu chứng minh: Thời gian để tweet được lập chỉ mục trên Google giảm từ 48 giờ xuống còn 4 giờ, lượng truy cập từ các chủ đề nóng tăng gấp 3 lần
Hướng dẫn sao chép cho người mới bắt đầu:
- Đặt liên kết trang một cách âm thầm: Đặt
/page=2
ở cuối trang trong<footer>
, và thiết lập độ trong suốt của CSS là 0.01 (Googlebot có thể nhận diện nhưng người dùng không thấy) - Gắn thẻ cho nội dung: Thêm
<meta name="page" content="2">
vào mỗi màn hình để crawler có thể nhận diện dễ dàng hơn - Tiền tải trang tiếp theo: Dùng
<link rel="prefetch">
để tải trước HTML của trang tiếp theo → khi người dùng cuộn tới, trang sẽ hiển thị ngay lập tức
Lưu ý quan trọng:
Một diễn đàn nhỏ khi làm theo cách của Twitter đã gặp sự cố khi máy chủ không chịu được tải từ việc tiền tải.
- Giới hạn số trang không quá 100 trang (Google không thích các trang quá sâu)
- Sử dụng
Cache-Control
để lưu trữ HTML của các trang để giảm tải cho máy chủ - Mỗi trang cần có
<title>
khác nhau (đừng để tất cả đều là “Thông tin mới nhất”)
Khi nào nên quay lại phân trang
Một số công ty vẫn kiên quyết theo đuổi phương pháp “cuộn vô hạn” khiến lượt truy cập giảm mạnh (một trang web giáo dục từ chối thay đổi, sau 6 tháng lượt xem giảm từ 20.000 xuống còn 800)
Dữ liệu thực tế chỉ rõ rằng 3 loại trang web này cần quay lại phân trang ngay lập tức:
Nội dung của bạn thuộc loại “hướng dẫn, tài liệu tham khảo”
👉 Đặc điểm: Người dùng tìm kiếm với mục đích rõ ràng (ví dụ: văn bản pháp lý, hướng dẫn sản phẩm,…)
- Vấn đề nghiêm trọng: Cuộn vô hạn khiến thông tin cần tìm bị chôn vùi ở trang thứ 8, không thể tìm thấy qua Ctrl+F
- Dữ liệu chứng minh: Các trang web tài liệu khi chuyển sang phân trang, tỷ lệ truy cập trang mục tiêu tăng từ 32% lên 71% (thực nghiệm qua heatmap của Hotjar)
- Ví dụ thành công điển hình: Một trang web y tế khi chuyển tài liệu hướng dẫn thuốc thành phân trang đã làm tăng lượng truy cập từ từ khóa dài lên 300%
2. Với các trang web bán hàng cần người dùng “so sánh kỹ lưỡng” sản phẩm
👉 Đặc điểm: Người dùng muốn so sánh chi tiết các thông số, giá cả (ví dụ: thiết bị điện tử, máy móc công nghiệp,…)
- Hành động không hợp lý: Hiển thị 100 sản phẩm trong một trang → người dùng không thể tìm lại sản phẩm đã xem trước đó
- Bài học thất bại: Một trang web bán máy ảnh sử dụng cuộn vô hạn → kết quả là giá bán trung bình từ 1200giảm xuống 580, vì người dùng bỏ cuộc không muốn cuộn lại để so sánh
- Chiến lược sinh tồn: Chia sản phẩm thành mỗi trang 10 sản phẩm, cố định nút “So sánh” ở đầu trang
3. Máy chủ của bạn quá chậm
👉 Đặc điểm: Thời gian tải trang trên 3.5 giây (dữ liệu thực nghiệm từ WebPageTest)
- Sự thật nghiêm trọng: Cuộn vô hạn khiến tải trọng của máy chủ cao gấp 4 lần so với phân trang (20 màn hình ≒ 80 yêu cầu API)
- Ví dụ sụp đổ: Một trang web thương mại điện tử xuyên biên giới áp dụng cuộn vô hạn bằng React → chi phí AWS tăng từ 2000lên 17.000 → cuối cùng quay lại sử dụng phân trang
- Chiến lược tiết kiệm chi phí: Dùng HTML tĩnh + cache CDN giảm chi phí 82%
Quay lại phân trang hay không? Hãy kiểm tra 3 yếu tố này
- Người dùng có cần so sánh thông tin qua lại không? → Có → Phân trang
- Nội dung có được tìm kiếm dài lâu không? (ví dụ: hướng dẫn) → Có → Phân trang
- Tốc độ tải trang có trên 3 giây không? → Có → Phân trang