Breadcrumb đóng một vai trò vô cùng quan trọng trong thiết kế website. Nếu thiếu đi phần này, người dùng sẽ gặp khó khăn trong việc xác định vị trí của họ trên trang web cũng như di chuyển giữa các trang. Để hiểu rõ hơn về khái niệm Breadcrumb và cách sử dụng nó, hãy cùng Praz khám phá thông qua bài viết dưới đây.
Mục Lục
I. Breadcrumb là gì?
Breadcrumb là một thanh điều hướng giúp người dùng xác định vị trí hiện tại của mình trên website. Thuật ngữ này bắt nguồn từ câu chuyện cổ tích “Hansel và Gretel”, trong đó hai đứa trẻ đã rải những mẩu bánh mì vụn dọc đường để tìm đường về nhà.
Trong website, breadcrumb giúp người dùng hiểu rõ họ đang ở đâu và có thể dễ dàng di chuyển đến các trang khác trong website. Điều này đặc biệt hữu ích đối với các website có cấu trúc phức tạp hoặc chứa nhiều nội dung.
2. Breadcrumb có vai trò gì trong SEO?
Breadcrumb tiện dụng với người dùng
- Tiện dụng cho người dùng: Breadcrumb là công cụ giúp người dùng dễ dàng điều hướng trên một trang web, đặc biệt là những trang web có cấu trúc phức tạp và nhiều nội dung. Breadcrumb giúp người dùng xác định vị trí hiện tại của họ trên trang web và dễ dàng quay trở lại các trang cấp cao hơn.
- Giảm số click và thao tác để quay trở lại các trang cấp cao: Breadcrumb giúp người dùng quay trở lại các trang cấp cao hơn một cách nhanh chóng và dễ dàng, mà không cần phải sử dụng nút “Back” hoặc top menu của website.
- Giảm bounce rate: Breadcrumb giúp khuyến khích người dùng khám phá thêm các nội dung khác trên trang web, từ đó giảm tỷ lệ thoát trang.
Breadcrumb có tác dụng đặc biệt với SEO
- Tăng lượng anchor text có gắn keyword: Breadcrumb có thể được sử dụng để tăng lượng anchor text có gắn keyword trên website. Điều này giúp cải thiện khả năng xếp hạng của website trên các công cụ tìm kiếm. Tuy nhiên, cần lưu ý không lạm dụng kỹ thuật này, vì có thể làm giảm trải nghiệm người dùng.
- Tăng khả năng người dùng click vào kết quả tìm kiếm: Trong một vài trường hợp, breadcrumb của website có thể xuất hiện trên kết quả tìm kiếm (SERPs). Điều này giúp tăng khả năng người dùng click vào kết quả tìm kiếm của bạn giữa những kết quả tìm kiếm khác.
III. Các loại Breadcrumb
Breadcrumb là một thanh điều hướng giúp người dùng dễ dàng hiểu được vị trí của họ trên một website. Có ba loại breadcrumb chính:
1. Breadcrumb theo vị trí
Breadcrumb theo vị trí, hay location-based breadcrumb, là loại breadcrumb phổ biến nhất. Loại breadcrumb này cho người dùng biết họ đang ở đâu trong hệ thống phân cấp của website, thông qua các liên kết đến các trang cha của trang hiện tại.
Breadcrumb theo vị trí thường được sử dụng cho các website có cấu trúc phân cấp phức tạp, với nhiều trang con. Loại breadcrumb này giúp người dùng dễ dàng tìm đường trở lại trang cha hoặc các trang con của trang hiện tại.
2. Breadcrumb theo thuộc tính
Breadcrumb theo thuộc tính, hay attribute-based breadcrumb, cho người dùng biết các thuộc tính của một trang. Loại breadcrumb này thường được sử dụng cho các website thương mại điện tử, nơi người dùng có thể tìm kiếm sản phẩm theo nhiều thuộc tính khác nhau, chẳng hạn như loại sản phẩm, thương hiệu, màu sắc,…
Breadcrumb theo thuộc tính giúp người dùng dễ dàng tìm thấy sản phẩm hoặc nội dung mà họ đang tìm kiếm. Loại breadcrumb này cũng có thể được sử dụng để lọc nội dung hoặc kết quả tìm kiếm.
3. Breadcrumb theo đường dẫn
Breadcrumb theo đường dẫn, hay path-based breadcrumb, cho người dùng biết các bước mà họ đã thực hiện để đến trang hiện tại. Loại breadcrumb này thường được sử dụng cho các website có cấu trúc phân cấp đơn giản, với ít trang con. Breadcrumb theo đường dẫn giúp người dùng dễ dàng quay lại các trang trước đó mà họ đã truy cập. Loại breadcrumb này cũng có thể được sử dụng để theo dõi lịch sử duyệt web của người dùng.
Loại breadcrumb nào phù hợp nhất sẽ phụ thuộc vào cấu trúc của website và nhu cầu của người dùng. Đối với các website có cấu trúc phân cấp phức tạp, breadcrumb theo vị trí là lựa chọn tốt nhất. Đối với các website thương mại điện tử, breadcrumb theo thuộc tính là lựa chọn phù hợp. Đối với các website có cấu trúc phân cấp đơn giản, breadcrumb theo đường dẫn là lựa chọn tối ưu.
Sử dụng breadcrumb không khó, nhưng để sử dụng breadcrumb hiệu quả, có một vài nguyên tắc cơ bản cần tuân thủ:
- Breadcrumb là hệ thống điều hướng phụ, không thể thay thế hệ thống điều hướng chính: Một ví dụ điển hình là website mefeedia. Website này trước đây từng sử dụng breadcrumb làm hệ thống điều hướng duy nhất trong các trang video chi tiết. Điều này khiến người dùng gặp khó khăn khi muốn truy cập các phần khác của website ngoài các liên kết trên breadcrumb, vì họ phải quay lại trang danh mục video trước khi đi tiếp.
- Breadcrumb phải mang lại lợi ích cho người dùng: Một lỗi phổ biến khác là sử dụng breadcrumb khi chúng không mang lại lợi ích gì cho website. Ví dụ như trong hình dưới đây, người dùng có ba hệ thống điều hướng: menu chính, breadcrumb và điều hướng bằng tab. Tuy nhiên, menu chính và breadcrumb không thống nhất về mặt nội dung, khiến người dùng khó hiểu và khó điều hướng.
Để xác định xem breadcrumb có mang lại lợi ích cho website hay không, bạn có thể xây dựng sơ đồ trang web hoặc bản đồ hành trình của khách truy cập. Điều này sẽ giúp bạn xác định xem breadcrumb có thể cải thiện khả năng điều hướng của người dùng hay không.
- Tiêu chuẩn tạo breadcrumb
- Breadcrumb thường xuất hiện ở đầu trang, ngay dưới menu chính (nếu có) và trên tiêu đề trang.
- Breadcrumb giảm cấp theo thứ bậc, bắt đầu từ trang chủ và đi theo từng cấp từ cao nhất đến thấp nhất.
- Breadcrumb cần có kích thước phù hợp, không chiếm quá nhiều diện tích và không nên lấn át menu chính và tiêu đề trang.
- Dấu hiệu tách liên kết trong breadcrumb cần thống nhất. Dấu hiệu phổ biến nhất là dấu “>”.
- Thiết kế breadcrumb đẹp mắt và hài hòa với thiết kế tổng thể của website.
Breadcrumb không chỉ là một công cụ điều hướng, mà còn là một yếu tố thiết kế của website. Vì vậy, bạn nên thiết kế breadcrumb đẹp mắt và hài hòa với thiết kế tổng thể của website.
- Những công dụng khác của breadcrumb
- Hỗ trợ các quy trình có nhiều bước: Breadcrumb có thể được sử dụng để chỉ ra các bước liên quan trong một quy trình có nhiều bước. Ví dụ như website Statement Tracker sử dụng breadcrumb để chỉ ra các bước liên quan khi đăng ký tài khoản.
- Đóng vai trò như một thanh điều hướng bổ sung: Breadcrumb có thể được sử dụng như một thanh điều hướng bổ sung, cung cấp cho người dùng các liên kết đến các phần khác của website. Ví dụ như website Flickr sử dụng breadcrumb để chỉ ra các phần giới thiệu trong chuyến tham quan Flickr.
- Sáng tạo với breadcrumb: Breadcrumb có thể được sử dụng một cách sáng tạo để mang lại trải nghiệm tốt hơn cho người dùng. Ví dụ như website Booreiland sử dụng breadcrumb cho menu chính, giúp khách truy cập hiểu nhanh những gì họ đang xem.
Cụ thể hóa một số ví dụ
Dưới đây là một số ví dụ cụ thể về cách sử dụng breadcrumb hiệu quả:
- Website thương mại điện tử: Breadcrumb có thể được sử dụng để giúp người dùng dễ dàng tìm thấy sản phẩm họ đang tìm kiếm. Ví dụ như website Amazon sử dụng breadcrumb để chỉ ra từng bước trong quá trình tìm kiếm sản phẩm.
- Website tin tức: Breadcrumb có thể được sử dụng để giúp người dùng dễ dàng tìm thấy các bài viết liên quan. Ví dụ như website The New York Times sử dụng breadcrumb để chỉ ra các chủ đề liên quan trong một bài viết.
- Website blog: Breadcrumb có thể được sử dụng để giúp người dùng dễ dàng tìm thấy các bài viết khác trong cùng một danh mục. Ví dụ như website Medium sử dụng breadcrumb để chỉ ra các bài viết khác trong cùng một chủ đề.
Breadcrumb là một công cụ điều hướng hữu ích có thể giúp người dùng dễ dàng tìm thấy thông tin họ đang tìm kiếm. Bằng cách tuân thủ các nguyên tắc cơ bản và sáng tạo với cách sử dụng, bạn có thể tạo ra một breadcrumb hiệu quả và mang lại trải nghiệm tốt hơn cho người dùng.