Đã từng truy cập rất nhiều website vậy bạn đã biết được breadcrumb là gì? Đây là một thuật ngữ cơ bản được sử dụng phổ biến trong lĩnh vực thiết kế website và SEO. Nhờ có thành phần này mà người dùng có thể được nội dung mình đang xem ở đâu trên website và dễ dàng quay lại vị trí mình muốn. Bài viết này sẽ giải thích rõ hơn về những lợi ích quan trọng của breadcrumb cũng như các phân loại phổ biến nhất.
Breadcrumb là gì?
Hãy cùng tìm hiểu Breadcrumb là gì? Breadcrumb dịch sang tiếng Việt là thanh điều hướng, đây là một thành phần của website và thường được hiển thị ở đầu trang, giúp người dùng biết được họ đang ở đâu trên website thông qua một chuỗi text link.
Breadcrumb là một yếu tố quan trọng trên trang web vì hai lý do chính:
- Ảnh hưởng đến trải nghiệm người dùng: Breadcrumb giúp người dùng dễ sử dụng và dễ điều hướng trên trang web. Người dùng có thể nhanh chóng hiểu được cấu trúc trang web và truy cập nội dung họ mong muốn một cách thuận tiện.
- Ảnh hưởng đến SEO: Google sẽ đánh giá cao các trang web tập trung vào trải nghiệm người dùng và chúng sẽ được ưu tiên xếp hạng cao. Breadcrumb còn giúp Google hiểu được cấu trúc website cũng như phân phối PageRank. Điều này cũng giúp trang web của bạn xếp hạng cao hơn trên bảng kết quả tìm kiếm (SERP).
Khi nào nên dùng breadcrumb?
Không phải website nào cũng cần đến breadcrumb mà yếu tố chỉ mang lại lợi ích cho việc điều hướng người dùng nếu website của bạn phức tạp và có nhiều tầng. Ví dụ: Các trang web thương mại điện tử thường cung cấp các sản phẩm khác nhau và chúng được chia thành thành nhiều danh mục sản phẩm nhỏ thì breadcrumb là thành phần rất cần thiết.
Nhưng nếu website của bạn là đơn cấp và người dùng có thể truy cập vào hầu hết các trang quan trọng chỉ với một lần nhấp chuột thì không nên sử dụng thanh điều hướng. Bởi vì trang web khá đơn giản và người dùng cũng không cần được điều hướng nên việc sử dụng breadcrumb trở nên vô nghĩa và không mang lại giá trị.
Các loại breadcrumb
Breadcrumb được chia thành 3 loại chính, sau đây chúng ta sẽ cùng tìm hiểu kỹ hơn về mỗi loại:
1. Breadcrumb vị trí (Location-based Breadcrumbs)
Loại breadcrumb này hình thành dựa trên thứ tự phân cấp của trang web. Những text link được sắp xếp từ danh mục lớn đến danh mục nhỏ, theo chiều từ trái qua phải. Mục cuối cùng sẽ là trang mà người dùng đang truy cập. Với breadcrumb vị trí thì người dùng sẽ dễ dàng biết được nội dung mình đang xem thuộc danh mục nào trên website.
Ví dụ: Người dùng đang truy cập và xem trang Z, thanh điều hướng sẽ hiển thị như sau: Trang chủ > Danh mục X > Danh mục Y > Trang Z. Nhờ đó, người dùng biết được vị trí của trang hiện tại và có thể dễ dàng quay lại các danh mục trước đó và khám phá những nội dung khác trên trang.
2. Breadcrumb thuộc tính (Attribute-based Breadcrumbs)
Breadcrumb thuộc tính là những text link dựa trên các bộ lọc mà người dùng sử dụng trên trang. Loại breadcrumb này hiển thị thông tin cụ thể và chi tiết về trang hiện tại, chẳng hạn như màu sắc, loại sản phẩm, mức giá hoặc bất kỳ thuộc tính nào khác liên quan đến trang (sản phẩm) đó. Các breadcrumb dạng này thường được sử dụng chủ yếu trên các trang web thương mại điện tử nhiều sản phẩm.
3. Breadcrumb đường đi (Path-based Breadcrumbs)
Breadcrumb dạng này sẽ hiển thị cho người dùng những đường dẫn mà họ đã đi qua để đến một trang cụ thể. Nhưng thay vì liệt kê toàn bộ đường dẫn, như các loại trên thì chúng hiển thị dưới dạng nút quay lại. Thanh điều hướng loại này có thể giúp người dùng quay lại trang trước nhưng họ sẽ không biết được vị trí của mình ở đâu trên website.
Lợi ích của việc sử dụng breadcrumb
Việc sử dụng breadcrumb mang lại nhiều lợi ích to lớn cho trải nghiệm người dùng trên website. Dưới đây là một số lợi ích chính:
Điều hướng người dùng
Breadcrumb cung cấp cho người dùng một thông tin rõ ràng và cụ thể về vị trí của họ trong hệ thống danh mục của trang web. Bằng cách hiển thị các danh mục theo thứ tự từ cấp cao đến cấp thấp, người dùng có thể biết được họ đang ở trang web nào và dễ dàng để quay lại danh mục trước đó.
Xem nội dung dễ dàng
Như đã đề cập thì nhờ có breadcrumb mà người dùng có thể quay lại những danh mục mà họ muốn xem một cách nhanh chóng. Thay vì phải quay lại trang chủ hay tìm kiếm trong menu, họ có thể click ngay vào những text link trong breadcrumb để nhảy trực tiếp đến các một danh mục cụ thể mà họ muốn truy cập. Điều này đặc biệt có lợi đối với với các trang web có lượng nội dung lớn và cấu trúc phức tạp.
Giảm tỷ lệ thoát trang
Thanh điều hướng có thể tạo điều kiện người dùng khám phá thêm các trang liên quan trong cùng một danh mục và từ đó giảm tỷ lệ thoát trang. Ví dụ: Người dùng đang xem một trang thông tin trên website của bạn và bài viết khiến họ cảm thấy rất có ích. Họ muốn được đọc thêm những thông tin khác cùng chủ đề, lúc này breadcrumb sẽ phát huy được công dụng của nó một cách hiệu quả.
Cải thiện hiệu quả SEO
Việc sử dụng thanh điều hướng có thể góp phần cải thiện hiệu quả SEO của trang web. Chúng giúp trình thu thập thông tin của công cụ tìm kiếm hiểu rõ hơn về cấu trúc và liên kết nội bộ của website. Từ đó giúp cải thiện vị trí của trang web trong kết quả tìm kiếm và tăng khả năng hiển thị cho các từ khóa liên quan.
Những lưu ý khi sử dụng breadcrumb
Có một số lưu ý quan trọng mà bạn nên cân nhắc khi sử dụng breadcrumb trên website:
Chỉ sử dụng khi cần thiết
Như đã đề cập trước đó, bạn chỉ nên sử dụng breadcrumb khi bạn cảm thấy nó thực sự tạo ra giá trị hữu ích nào đó cho người dùng. Và với một website đơn cấp không có cấu trúc quá phức tạp thì việc sử dụng breadcrumb là rất vô nghĩa.
Không quá dài hay quá lớn
Breadcrumb nên được thiết kế sao cho dễ nhìn nhưng không quá dài, quá to hay gây mất tập trung. Nếu thiết kế breadcrumb không tốt, nó có thể chiếm quá nhiều không gian làm mất cân bằng cho thiết kế tổng thể hoặc làm giảm không gian cho những nội dung quan trọng khác. Điều này có thể khiến giao diện trang web trở nên kém thân thiện với người dùng và gây ra trải nghiệm không tốt.
Tương thích với di động
Breadcrumb nên được tối ưu để hiển thị chính xác và phù hợp trên mọi thiết bị, bao gồm cả các thiết bị di động với nhiều kích thước màn hình khác nhau. Với thói quen sử dụng điện thoại di động để lướt web của người dùng hiện đại, việc tối ưu giao diện website và các thành phần như breadcrumb trên di động là rất cần thiết.
Không dẫn link về bài viết hiện tại
Mục cuối cùng trong đường dẫn breadcrumb hiển thị vị trí hiện tại của người dùng nên việc thêm liên kết đến trang hiện tại là không hợp lý khi người dùng đã đang ở trên trang. Người dùng không thể tương tác với nó và link đó cũng không phục vụ cho một mục đích nào cả. Trong ví dụ bên dưới, bạn có thể thấy rằng mục cuối cùng trong breadcrumb không được gắn link. Đó là bởi vì người dùng đã ở ngay trên trang.
Thiết kế đơn giản
Thiết kế của thanh điều hướng nên được giữ cho đơn giản và không nên phô trương quá nhiều để không làm người đọc mất tập trung vào nội dung chính của trang. Thông thường, breadcrumb xuất hiện ở góc trên cùng bên trái của trang web với font chữ nhỏ vừa đủ để đọc và cân bằng với thiết kế chung. Các dấu phân cách các mục trên breadcrumb cũng nên đơn giản, ví dụ như dấu / hoặc mũi tên > .
Cách thêm breadcrumb cho website WordPress
Vì WordPress là CMS (hệ thống quản lý nội dung) phổ biến nhất trên thế giới nên trong bài viết này Digital Marketing Agency DMA sẽ hướng dẫn bạn cách tạo breadcrumb trên website với nền tảng này.
Một số chủ đề (theme) trên WordPress sẽ mặc định có breadcrumb mà không cần cài đặt gì thêm nhưng nếu theme của website bạn không có sẵn breadcrumb thì bạn vẫn có thể tạo chúng thông qua plugin tên Yoast SEO.
Trước tiên, bạn vào mục Plugin và chọn Add New.
Sau đó, tìm kiếm từ khoá Yoast SEO trên và nhấp vào Install Now.
Tuy nhiên trước khi sử dụng Yoast SEO để thêm breadcrumb, bạn cần thêm một đoạn mã nhỏ vào phần tệp header.php trong theme của mình. Lưu ý: Nếu bạn chưa có kinh nghiệm hay hiểu biết về phần này, bạn nên nhờ các lập trình viên trợ giúp.
Xem thêm: Dịch vụ Thiết kế Website
Hãy sao chép đoạn mã bên dưới:
<?php
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb( ‘</p><p id=”breadcrumbs”>’,'</p><p>’ );
}
?>
Và truy cập vào mục Appearance và nhấp vào Theme File Editor.
Tiếp theo, bạn tìm phần header.php và dán đoạn mã bên trên vào và chọn Update File và chuyển sang bước tiếp theo.
Bây giờ bạn hãy vào plugin Yoast SEO đã tải xong và chọn Settings.
Kéo xuống để tìm mục Advanced và chọn Breadcrumb.
Một biểu mẫu sẽ hiển thị để bạn thiết lập cấu hình breadcrumb theo cách mà bạn muốn chúng xuất hiện trên website.
Cuối cùng, bạn bật tùy chọn Enable breadcrumbs for your theme bên dưới biểu mẫu là hoàn tất.
Lời kết
Hy vọng với những thông tin mà Digital Marketing Agency DMA đã chia sẻ phía trên đã giúp bạn hiểu rõ được breadcrumb là gì cũng như các lợi ích khi sử dụng chúng trên website. Tuy nhiên, bạn cần lưu ý rằng không phải trang web nào cũng nên sử dụng breadcrumb và cần chú ý một số điều khi sử dụng chúng.