Above the fold là gì, giải thích từ nguồn gốc tên gọi
Thuật ngữ “above the fold” (phần hiển thị trên màn hình trước khi cuộn) bắt nguồn từ nghề báo in. Tờ báo gấp đôi lại trước khi bày ở sạp, phần “above the fold” là nửa trên, phần người đi qua nhìn thấy đầu tiên mà không cần mở ra. Tin quan trọng luôn được đặt ở đó để thu hút người mua.
Trên website, ý nghĩa tương tự: above the fold là toàn bộ nội dung người dùng nhìn thấy ngay khi trang vừa tải xong, chưa cuộn chuột hay vuốt màn hình xuống. Đường ranh giới đó không cố định, nó thay đổi theo kích thước màn hình của từng người.
Còn phần bên dưới, tức những gì phải cuộn xuống mới thấy, gọi là “below the fold”. Hai vùng này quan trọng vì chúng ảnh hưởng trực tiếp tới cách người dùng khám phá trang và cách công cụ tìm kiếm đánh giá nội dung ưu tiên.
Kích thước vùng above the fold phụ thuộc vào thiết bị nào
Đây là câu hỏi hay làm người mới bối rối. Không có một con số cố định cho above the fold vì màn hình của mỗi người khác nhau hoàn toàn.
Trên máy tính để bàn, chiều cao màn hình phổ biến hiện nay từ 768 px đến 1080 px. Trừ đi chiều cao của thanh điều hướng trình duyệt, vùng above the fold thực tế thường rơi vào khoảng 600 px đến 900 px. Trên laptop 13 inch, con số này có thể chỉ còn 580 px.
Trên điện thoại lại khác. Màn hình cao nhưng hẹp, người dùng cầm dọc và cuộn rất nhanh, nên above the fold trên mobile thực tế khá ngắn theo chiều dọc, khoảng 560 px đến 700 px tùy model. Quan trọng hơn, người dùng điện thoại có thói quen cuộn ngay sau khi tải xong, không quan sát kỹ như trên máy tính.
Vì vậy khi thiết kế, không nên cố nhét thật nhiều thứ vào một chiều cao cố định. Thay vào đó, hãy xác định một hoặc hai thông điệp quan trọng nhất và đảm bảo chúng xuất hiện ở vùng đó trên cả hai loại thiết bị.
Nên đặt gì trong vùng above the fold
Câu trả lời phụ thuộc vào mục đích của trang, nhưng có một số thứ gần như lúc nào cũng nên có mặt ở đây.
Thứ nhất là thông điệp chính: trang này nói về gì, bạn đang ở đâu, dịch vụ hoặc sản phẩm này dành cho ai. Người dùng không đọc tường tận, họ quét mắt qua trong vài giây. Nếu phần đầu không cho họ biết “đây có phải thứ mình cần không”, họ quay lại Google ngay.
Thứ hai là một nút kêu gọi hành động, tức CTA (call to action), nếu trang có mục tiêu chuyển đổi. Không phải trang nào cũng cần CTA ngay đầu, nhưng nếu bạn muốn người dùng liên hệ, đặt lịch hoặc xem thêm, đặt nút đó ở vùng nhìn thấy ngay sẽ hiệu quả hơn rất nhiều so với để tận cuối trang.
Thứ ba, tùy trang: có thể là ảnh đại diện sản phẩm, headline chứa từ khóa người dùng vừa tìm, hoặc dòng xác nhận ngắn gọn về uy tín (số năm kinh nghiệm, số khách đã phục vụ, giải thưởng). Những thứ này giúp người dùng tin rằng họ đang ở đúng chỗ.
Điều không nên đặt ở above the fold: quảng cáo lớn che khuất nội dung chính, ảnh nền nặng làm trang chậm tải, hoặc thanh điều hướng chiếm quá nhiều chiều cao khiến nội dung thật bị đẩy xuống dưới đường gấp.
Above the fold và hero section khác nhau ở điểm nào
Hai khái niệm này hay bị dùng lẫn, kể cả trong các bài viết tiếng Anh. Thực ra chúng chỉ về hai thứ khác nhau, dù thường xuất hiện cùng chỗ trên trang.
| Tiêu chí | Above the fold | Hero section |
|---|---|---|
| Bản chất | Vùng không gian trên màn hình, thay đổi theo thiết bị | Một khối thiết kế cụ thể, được dựng có chủ ý |
| Cố định không | Không, phụ thuộc kích thước màn hình người dùng | Có, được quyết định khi thiết kế layout trang |
| Có thể không tồn tại không | Luôn tồn tại trên mọi trang | Không phải trang nào cũng có hero section |
| Quan hệ | Above the fold là “vùng nhìn thấy đầu tiên” | Hero section thường được thiết kế để lấp đầy above the fold |
Cách nhớ đơn giản: above the fold là vùng không gian (do thiết bị quyết định), còn hero section là khối thiết kế (do người làm web quyết định). Hero section thường được tạo ra với mục đích chiếm lĩnh vùng above the fold, nhưng không phải lúc nào cũng vừa khít.
Một trang tin tức có nhiều bài liệt kê liên tiếp không có hero section, nhưng vẫn có above the fold là phần người dùng nhìn thấy đầu tiên. Ngược lại, trang landing page bán hàng thường có hero section thiết kế to, chiếm full màn hình, và hero đó nằm gọn trong above the fold.
Làm sao kiểm tra vùng above the fold của trang mình
Cách nhanh nhất là mở trang trên trình duyệt rồi chú ý xem nội dung gì đang hiển thị trước khi bạn cuộn. Đó là above the fold của trang đó trên máy bạn.
Để kiểm tra trên nhiều kích thước màn hình, dùng DevTools của Chrome (nhấn F12 rồi chọn biểu tượng điện thoại ở góc trên trái). Bạn chọn được kích thước màn hình cụ thể, từ iPhone nhỏ tới màn hình 4K, và quan sát trực tiếp phần nào nằm trong tầm nhìn đầu tiên.
Google Search Console cũng có thể cho bạn biết tỷ lệ người dùng truy cập bằng thiết bị nào, từ đó ưu tiên tối ưu above the fold cho đúng loại màn hình phổ biến nhất với tệp khách của bạn.
Một cách khác: công cụ Hotjar (phần mềm đo hành vi người dùng) hoặc Microsoft Clarity (miễn phí) có tính năng heatmap cho thấy người dùng nhìn và bấm vào đâu nhiều nhất. Nếu dữ liệu cho thấy phần lớn click tập trung phía trên, bạn đang làm đúng. Nếu người ta bỏ qua hẳn phần đầu và cuộn thẳng xuống giữa, above the fold của bạn có thể chưa đủ hấp dẫn.
Above the fold ảnh hưởng tới SEO như thế nào
Google đã từng có thuật toán riêng tên “Page Layout Algorithm” (phát hành năm 2012) nhắm vào các trang có quá nhiều quảng cáo ở above the fold, khiến nội dung thật bị đẩy xuống dưới. Trang nào để người dùng phải cuộn quá nhiều mới gặp được nội dung chính thường bị đánh giá thấp hơn.
Quan trọng hơn, above the fold ảnh hưởng gián tiếp tới SEO qua chỉ số hành vi người dùng. Nếu người dùng vào trang rồi thoát ngay trong vài giây, Google học được tín hiệu đó và hiểu trang này không thỏa mãn được truy vấn tìm kiếm. Ngược lại, nếu phần đầu đủ thuyết phục để người ta ở lại và cuộn xuống, đó là tín hiệu tích cực.
Một điều cần chú ý: tốc độ tải ảnh trong vùng above the fold là phần tính vào chỉ số LCP (Largest Contentful Paint), một trong ba Core Web Vitals mà Google dùng để đánh giá tốc độ trang. Ảnh nền nặng hay video autoplay ở hero section sẽ kéo điểm LCP xuống, ảnh hưởng trực tiếp tới xếp hạng tìm kiếm.
Câu hỏi thường gặp
Above the fold có kích thước cụ thể là bao nhiêu pixel không?
Không có con số cố định. Vùng này thay đổi theo từng màn hình và trình duyệt. Trên máy tính thường rơi vào 600 đến 900 px chiều cao, trên điện thoại khoảng 560 đến 700 px. Khi thiết kế, nên kiểm tra trực tiếp trên nhiều kích thước thiết bị thay vì chỉ nhắm một con số cụ thể.
Trang không có hero section thì có above the fold không?
Vẫn có. Above the fold là vùng không gian trên màn hình, luôn tồn tại dù trang bố cục theo kiểu nào. Một trang blog không có hero vẫn có above the fold là tiêu đề bài, ảnh đại diện và vài dòng đầu của bài viết.
Nên cho phép quảng cáo trong vùng above the fold không?
Được, nhưng không để quảng cáo lấn át nội dung chính. Google từng phạt các trang để quảng cáo chiếm quá nhiều không gian phía trên, đẩy nội dung thật xuống quá sâu. Nguyên tắc: người dùng nhìn vào phải thấy nội dung họ tìm kiếm trước, quảng cáo chỉ là thứ phụ.
Above the fold có quan trọng với trang blog không, hay chỉ áp dụng cho landing page?
Quan trọng với cả hai, nhưng khác nhau về cách tối ưu. Với landing page, above the fold cần thuyết phục người dùng hành động ngay. Với bài blog, vùng này cần đủ rõ để người đọc biết bài sẽ trả lời đúng câu hỏi của họ, từ đó quyết định đọc tiếp hay không.
Nếu bạn đang cần tư vấn về bố cục và trải nghiệm người dùng cho website của mình, xem thêm dịch vụ thiết kế UI/UX của Web22.