Above the Fold là gì? Thực tiễn tốt nhất và ví dụ

‘Above the Fold’ có nghĩa là gì?

Above the fold (ATF) là phần trang web bạn có thể xem mà không cần cuộn xuống.

Phần fold là cạnh dưới của khung nhìn ban đầu này. Mọi nội dung bên dưới đường ranh đó đều cần bạn cuộn xuống và được xem là “below the fold.”

Vị trí chính xác của fold thay đổi tùy theo thiết bị và cài đặt trình duyệt. Kích thước cửa sổ xem (còn gọi là viewport) ảnh hưởng đến vị trí xuất hiện của fold.

Lưu ý

Thuật ngữ “above the fold” bắt nguồn từ ngành xuất bản báo chí. Báo được gấp đôi khi bày bán tại quầy, vì vậy những nội dung bắt mắt nhất được đặt phía trên nếp gấp thực tế.

Vì sao Above the Fold quan trọng?

Above the fold quan trọng vì ảnh hưởng đến những gì khách truy cập nhìn thấy đầu tiên, giúp thu hút sự chú ý và khuyến khích họ ở lại trang web.

Phần này định hình ấn tượng đầu tiên. Người dùng thường mong đợi các tính năng quan trọng (ví dụ: liên kết đăng ký) xuất hiện trong khu vực hiển thị nổi bật này.

Nếu không tìm thấy thứ mình cần ngay lập tức, họ có thể rời khỏi trang.

Hành vi này có thể ảnh hưởng tiêu cực đến hiệu quả kinh doanh và SEO vì công cụ tìm kiếm luôn nỗ lực cung cấp kết quả thu hút người dùng.

Nhiều công cụ tìm kiếm cũng xem nội dung gần đầu trang là quan trọng hơn. Điều đó có nghĩa là nội dung ATF có thể tác động lớn hơn đến thứ hạng so với nội dung below the fold.

Vì vậy, SEO above the fold nên là ưu tiên hàng đầu.

Thực tiễn tốt nhất cho Above the Fold

Nội dung above the fold rất cần thiết để thu hút sự chú ý của khách truy cập. Nội dung này cải thiện trải nghiệm người dùng (UX) và có thể giúp tăng doanh thu.

Đọc tiếp để tìm hiểu thêm về các thực tiễn tốt nhất trong thiết kế ATF và chiến lược SEO above the fold, giúp trang của bạn đạt thứ hạng cao hơn trên công cụ tìm kiếm.

Sử dụng thiết kế website responsive

Thiết kế website responsive thích ứng với kích thước và hình dạng viewport của người dùng. Thiết kế này đảm bảo hình ảnh, văn bản và các thành phần khác vừa vặn.

Cách tiếp cận này tối ưu cả nội dung above the fold lẫn below the fold trên mọi thiết bị, từ màn hình máy tính để bàn cỡ lớn đến màn hình smartphone nhỏ.

Dưới đây là ví dụ về thiết kế responsive trên blog Semrush:

Để biết cách triển khai bố cục responsive, hãy tham khảo hướng dẫn trợ giúp của Google.

Sau đó, thường xuyên thực hiện technical audit để kiểm tra các vấn đề về hiệu suất trên website.

Công cụ SEO Audit thực hiện hơn 140 bước kiểm tra để xác nhận hiệu suất trên thiết bị máy tính để bàn và mobile.

Bạn có thể lên lịch audit hằng ngày hoặc hằng tuần, hoặc chạy lại crawl thủ công.

Tối ưu Header của Website

Header của website nằm ở đầu trang web và thường xuất hiện trên mọi trang, giúp các yếu tố quan trọng luôn ở cùng một vị trí.

Sự nhất quán này giúp người dùng điều hướng website của bạn.

Header thường có logo thương hiệu, liên kết đến trang chủ.

Header cũng thường có menu điều hướng chính, bao gồm liên kết đến các mục chính trên website.

Nhiều nhà thiết kế web tiết kiệm không gian bằng cách sử dụng hamburger menu (đặc biệt trên mobile). Tuy nhiên, cách này khiến người dùng phải nhấp thêm một lần để đến các trang quan trọng.

Dưới đây là những yếu tố khác bạn nên cân nhắc đưa vào header:

• Banner: Dùng banner website để quảng bá những điểm bán hàng độc đáo (ví dụ: miễn phí vận chuyển)
• Liên kết đăng nhập hoặc đăng ký: Khuyến khích khách truy cập tạo tài khoản hoặc đăng nhập để bạn có thể hiểu rõ hơn về hành vi khách hàng
• Cờ khu vực hoặc ngôn ngữ: Cho phép người dùng chuyển đổi khu vực trên các website đa khu vực hoặc đa ngôn ngữ
• Chức năng tìm kiếm: Thêm thanh tìm kiếm hoặc biểu tượng tìm kiếm để khách truy cập nhanh chóng tìm thấy nội dung họ cần
• Biểu tượng giỏ hàng: Giúp người dùng bắt đầu quy trình thanh toán dễ dàng hơn từ bất kỳ trang nào

Thêm nhiều yếu tố có thể tăng tính năng. Tuy nhiên, header lộn xộn sẽ chiếm không gian quý giá ở phần đầu trang và có thể khiến người dùng bối rối.

Nhà thiết kế cần tìm được sự cân bằng.

Thêm Heading độc nhất

Mỗi trang nên có một heading độc đáo, mang tính mô tả ở phần đầu trang. Heading này nhanh chóng cho người dùng biết mục đích của trang.

Trên các trang tin tức phổ biến, những tiêu đề nổi bật cho khách truy cập biết chính xác nội dung họ sắp xem.

Heading độc đáo cũng hỗ trợ SEO ở phần đầu trang.

Khi được hỏi về ảnh hưởng của ATF đến thứ hạng, John Mueller của Google cho biết, “The important part for us is really that there is some amount of unique content in the above-the-fold area.

“If you have a banner on top and a generic hero image on top, that’s totally fine. But some of the above-the-fold content should be unique for that page. And that could be something like a heading.”

Để tối ưu on-page SEO, hãy đặt heading trong H1 tags (heading HTML cấp cao nhất). Đồng thời, hãy đảm bảo heading có primary keyword.

Ví dụ:

Để xem lại các heading hiện tại, hãy dùng On Page SEO Tool.

Nhập các trang và keyword mục tiêu của bạn. Sau đó, công cụ sẽ cho biết heading nào cần tối ưu.

Mở các ý tưởng cho bất kỳ trang nào để xem H1 có chứa keyword chính hay không và liệu keyword có bị lặp quá nhiều (đây có thể là một dạng keyword stuffing).

Bạn cũng sẽ thấy các đề xuất liên quan đến:

• Title tags: Tiêu đề trang có thể xuất hiện trong kết quả tìm kiếm
• Meta descriptions: Nội dung mô tả có thể xuất hiện trong kết quả tìm kiếm
• Semantic Keywords: Các thuật ngữ có liên quan về mặt khái niệm

Và nhiều nội dung khác.

Đi thẳng vào vấn đề

Người dùng muốn nhanh chóng tìm thấy điều họ cần—lý tưởng nhất là ở phần đầu trang.

Đi thẳng vào vấn đề còn được gọi là cải thiện time to value, điều này có lợi cho SEO và UX.

Trước khi tạo một trang, hãy tự hỏi những câu sau:

• Khi ai đó truy cập trang này, họ muốn làm gì?
• Làm thế nào để tôi giúp họ thực hiện điều đó nhanh nhất có thể?

Hãy xem các trang danh mục trên những website bán lẻ. Người mua có thể thấy ngay các lựa chọn sản phẩm và hình ảnh.

Khi phần lớn hình ảnh sản phẩm nằm dưới nếp gấp, khách truy cập phải cuộn trang để xem những mặt hàng họ muốn tìm, làm giảm mức độ tương tác tức thì.

Mẫu blog của Semrush cũng được tối ưu để nhanh chóng mang lại giá trị.

Thời gian đọc ước tính và mục lục xuất hiện ở đầu trang. Người đọc có thể bắt đầu đọc bài viết mà không cần cuộn qua những hình ảnh không cần thiết.

Tác giả sử dụng một kỹ thuật SEO copywriting gọi là BLUF (bottom line up front). Cách tiếp cận này cung cấp ngay thông tin thiết yếu, tránh phần mở đầu dài dòng, sáo rỗng.

Cân bằng quảng cáo với nội dung nguyên bản

Bạn có thể muốn hiển thị quảng cáo ở phần đầu trang để tăng khả năng hiển thị và lượt nhấp.

Tuy nhiên, quá nhiều quảng cáo có thể khiến người dùng rời đi. Quảng cáo lớn hoặc quá dày đặc có thể cản trở khách truy cập nhanh chóng tìm thấy điều họ cần, khiến họ rời khỏi trang hoặc tìm ở nơi khác.

Quảng cáo mất cân đối cũng có thể gây hại cho SEO ở phần đầu trang, đặc biệt trên các thiết bị nhỏ hơn như điện thoại.

Công cụ tìm kiếm có thể phạt các website chiếm quá nhiều diện tích màn hình phía trên bằng quảng cáo.

Năm 2012, Google phát hành một bản cập nhật lớn cho thuật toán bố cục trang khiến thứ hạng của các website có quá nhiều quảng cáo ATF giảm.

Thông báo nêu rõ: “If the part of the website you see first doesn’t have much visible content … that’s not a very good user experience. Such sites may not rank as highly going forward.”

Các công cụ tìm kiếm hàng đầu khuyến nghị tuân theo Better Ads Standards. Các nguyên tắc này khuyến cáo tránh những trải nghiệm gây khó chịu như:

• Quảng cáo bật lên
• Quảng cáo cố định kích thước lớn
• Mật độ quảng cáo trên 30%

Bạn vẫn có thể đặt quảng cáo trên mobile ở phần đầu trang, nhưng hãy cân bằng bằng nội dung nguyên bản, như sau:

Tăng tốc độ tải

Nội dung ở phần đầu trang cần tải nhanh. Thời gian tải chậm có thể làm tăng Bounce Rate và ảnh hưởng xấu đến thứ hạng SEO.

Một nhóm chỉ số tốc độ có tên Core Web Vitals đặc biệt quan trọng:

• Largest Contentful Paint (LCP): Thời gian để khối văn bản hoặc hình ảnh lớn nhất hiển thị
• First Input Delay (FID): Thời gian chờ đến khi trang phản hồi tương tác đầu tiên của người dùng
• Cumulative Layout Shift (CLS): Mức độ dịch chuyển bố cục trong quá trình tải

Bạn có thể kiểm tra Core Web Vitals trong Google Search Console hoặc trong SEO Checker của Semrush.

Báo cáo Core Web Vitals của Semrush hiển thị các chỉ số chính cùng đề xuất cải thiện.

Dưới đây là một số phương pháp hiệu quả để cải thiện thời gian tải ATF:

• Sắp xếp cấu trúc HTML để nội dung ATF tải trước
• Rút gọn HTML, CSS và JavaScript để giảm dung lượng tệp và tăng tốc độ xử lý
• Nhúng trực tiếp CSS thiết yếu bằng cách đặt các kiểu hiển thị trong màn hình đầu tiên vào phần <head> để cải thiện Rendering ban đầu
• Tối ưu hình ảnh bằng cách thay đổi kích thước, định dạng và nén hình ảnh để giảm thời gian tải mà vẫn giữ chất lượng
• Tải trước tài nguyên bằng cách sử dụng thuộc tính rel="preload" để ưu tiên tải các thành phần trong màn hình đầu tiên.

Mẹo

Tìm hiểu thêm về tốc độ trang trong hướng dẫn toàn diện về tốc độ trang.

Thiết kế bắt mắt

Nội dung trong màn hình đầu tiên cần hoạt động tốt và có giao diện thu hút, vì khách truy cập thường hình thành ấn tượng lâu dài chỉ trong thời gian ngắn.

Hãy áp dụng những mẹo thiết kế ATF hàng đầu sau:

• Giúp văn bản dễ đọc với hệ thống phân cấp rõ ràng
• Chia nhỏ văn bản và giúp người đọc dễ nắm bắt bằng hình ảnh phù hợp
• Thêm video hoặc ảnh động để thu hút sự chú ý
• Sử dụng các biểu tượng dễ nhận biết để tiết kiệm không gian
• Sử dụng khoảng trống (không gian trắng) để giảm sự rối mắt
• Đảm bảo thiết kế phù hợp với bản sắc thương hiệu
• Tuân thủ các nguyên tắc trợ năng

Mẹo

Bạn cần hỗ trợ thiết kế chuyên nghiệp? Khám phá danh sách các agency thiết kế web uy tín.

Phân tích các chỉ số hiệu suất

Các chỉ số hiệu suất cho thấy yếu tố nào trong thiết kế ATF đang phát huy hiệu quả và cần cải thiện ở đâu.

Các chỉ số quan trọng nhất tùy thuộc vào mục tiêu của website, nhưng những chỉ số sau rất hữu ích. Bạn có thể xem tất cả trong Google Analytics hoặc các nền tảng tương tự:

Mẹo

Tìm hiểu cách thiết lập và diễn giải các chỉ số này với hướng dẫn Google Analytics.

Để xem mọi thứ trên một dashboard, hãy kết nối tài khoản Google Analytics và Search Console của bạn với Organic Traffic Insights .

Sau đó, so sánh các chỉ số sau trên những landing page:

• Thứ hạng keyword
• Bounce Rate
• Tỷ lệ hoàn thành mục tiêu

Những thông tin chi tiết này có thể giúp bạn tinh chỉnh nội dung ở phần đầu landing page để đáp ứng tốt hơn nhu cầu của người dùng.

CTA nên đặt ở phần đầu hay bên dưới?

Mỗi landing page nên có ít nhất một lời kêu gọi hành động (CTA) khuyến khích khách truy cập thực hiện một hành động cụ thể (ví dụ: “Add to Cart” hoặc “Sign up Now”).

Một số marketer đặt CTA ở phần đầu để người dùng có thể nhìn thấy và tương tác ngay.

Những người khác cho rằng khách truy cập cần thêm thông tin trước khi hành động. Trong trường hợp đó, đặt CTA thấp hơn trên trang (bên dưới phần đầu) có thể hiệu quả hơn.

Để tìm hiểu cách nào hiệu quả nhất trên các trang của bạn, hãy tiến hành A/B test (hay split test):

1. Quyết định vị trí CTA nào bạn muốn thử nghiệm và tạo một phiên bản thiết kế
2. Hiển thị phiên bản thử nghiệm cho 50% khách truy cập và thiết kế ban đầu cho 50% còn lại
3. Triển khai đầy đủ thiết kế mang lại Conversion Rate cao nhất

Ví dụ về thiết kế website ở phần đầu trang

Các ví dụ về above-the-fold (ATF) này minh họa những phương pháp hay nhất trên nhiều loại website khác nhau. Hãy tham khảo để lấy cảm hứng khi thiết kế bố cục ATF của riêng bạn.

Lush

Ngay khi khách truy cập vào trang chủ Lush, họ sẽ bắt gặp hình ảnh sản phẩm nổi bật, thu hút cho chiến dịch Ngày của Mẹ của thương hiệu.

Các liên kết hiển thị đè lên ảnh nền thay vì nằm trong thanh điều hướng thông thường. Nhờ đó, phần đầu trang web trông gọn gàng và tập trung vào một chương trình khuyến mãi cụ thể. Chức năng tìm kiếm ở đầu trang giúp người mua nhanh chóng tìm thấy thứ họ cần.

Các chỉ báo hình tròn ở bên phải cho biết còn nội dung bên dưới phần đầu trang.

Kombu

Trang sản phẩm của Kombu đơn giản nhưng hiệu quả vì giả định rằng hầu hết khách truy cập đã biết về sản phẩm và sẵn sàng đặt hàng.

Thiết kế ở phần đầu trang làm nổi bật nút “add to cart” trên nền có độ tương phản cao.

Bố cục tối giản loại bỏ những yếu tố gây xao nhãng và tập trung thúc đẩy chuyển đổi.

Lời nhắc “Scroll” nhỏ ở góc trang khuyến khích người dùng tìm hiểu thêm nếu họ muốn.

Đọc thêm: 17 ví dụ truyền cảm hứng về trang sản phẩm (+ Các phương pháp hay nhất dành cho bạn)

ESPN

Trang chủ ESPN trên máy tính có nhiều quảng cáo nhưng vẫn tuân thủ các tiêu chuẩn quảng cáo được khuyến nghị.

Không có quảng cáo bật lên, quảng cáo video tự phát kèm âm thanh hay quảng cáo lớn cố định.

Thanh “upcoming events” xuất hiện ở đầu hầu hết các trang. Thanh này tự động cập nhật theo môn thể thao đang được xem.

Tính năng này cung cấp thông tin quan trọng ngay từ đầu và giữ người dùng ở lại trang.

Video tự động phát không có âm thanh ở phần đầu trang thu hút sự chú ý và khuyến khích người dùng cuộn xuống, phù hợp với các nguyên tắc quảng cáo tốt hơn.

Smile Direct Club

Trang chủ của Smile Direct Club giải quyết mối quan tâm chính của thị trường mục tiêu bằng cách hiển thị thông tin giá trong banner, tiêu đề và phần mô tả ở phần đầu trang.

Trang này cũng có hình ảnh sản phẩm và logo giải thưởng để tạo dựng niềm tin. Các đánh giá trên Trustpilot củng cố uy tín của thương hiệu.

Hãy chú ý, nút CTA xuất hiện hai lần ở phần đầu trang (“Am I a Candidate?”). Người dùng biết chính xác cần thực hiện bước nào tiếp theo.

Người dùng có thể tìm thêm thông tin qua thanh điều hướng hoặc tính năng trò chuyện trực tiếp ở góc màn hình.

Nordstrom

Các trang danh mục của Nordstrom có nhiều yếu tố điều hướng ở phần đầu trang.

Các tab danh mục phụ của sản phẩm giúp người dùng cảm nhận ngay sự đa dạng.

Trong khi đó, các tùy chọn lọc và sắp xếp giúp người dùng không cảm thấy quá tải.

Cách tiếp cận cân bằng này giúp người mua tin rằng họ có thể tìm được sản phẩm phù hợp mà không cần tìm kiếm quá lâu.

Airbnb

Trang chủ tập trung vào du lịch của Airbnb đặt các công cụ điều hướng thiết yếu ở phần đầu trang. Các biểu tượng giúp người dùng hình dung những lựa chọn chỗ ở.

Bố cục dành nhiều không gian cho một nhóm tin đăng nổi bật với hình ảnh hấp dẫn.

Phần xem trước của mỗi tin đăng làm nổi bật các chi tiết quan trọng như xếp hạng, địa điểm và giá.

Khi người dùng tìm kiếm, các kết quả hàng đầu xuất hiện ở phần đầu trang. Bản đồ cũng hiển thị trên máy tính và mobile vì vị trí rất quan trọng với khách du lịch.

Cải thiện bằng Split Testing

Khi cập nhật nội dung ATF, hãy so sánh các chỉ số chính trước và sau để xác nhận tác động tích cực. Tốt hơn nữa, hãy dùng split testing để so sánh hai thiết kế ở phần đầu trang:

1. Tạo phiên bản mới cho nội dung ATF (gọi là biến thể)
2. Hiển thị phiên bản gốc cho một nửa số người dùng và biến thể cho nửa còn lại
3. Đánh giá các chỉ số chính trong một khoảng thời gian nhất định
4. Triển khai thiết kế có hiệu suất tốt nhất

Ứng dụng SplitSignal cho phép bạn thực hiện các bài kiểm tra này mà không cần biết lập trình hay có chuyên môn về khoa học dữ liệu.

Bạn có thể đo lường tác động đến organic traffic và các chỉ số khác để xác định thiết kế ATF nào hoạt động tốt nhất.