Breadcrumb là một phần quan trọng của mỗi website. Breadcrumb Navigation không chỉ giúp người dùng định vị được vị trí hiện tại của mình trên trang web, mà còn giúp Google định dạng được cấu trúc của website dễ dàng hơn.
Vậy cụ thể breadcrumb là gì? Có những loại nào và làm sao để sử dụng hiệu quả? Hãy cùng On Digitals tìm hiểu thông qua bài viết sau đây.
Breadcrumb là tập hợp các liên kết giúp người dùng xác định được vị trí của mình trên cấu trúc trang web. Ví dụ, khi truy cập trang web bán giày và nhập trên thanh công cụ là “sneakers”. Breadcrumb sẽ được hiển thị như thế này: Home>> Shoes>> Sneakers.
Breadcrumb Trail (breadcrumb nhất quán) ngay lập tức sẽ hiện ra bạn đang ở trang nào. Ngoài ra, bạn còn có thể nhấp được vào bất cứ trang nào bạn đang mong muốn. Và quay trở lại trang chủ một cách dễ dàng.
Nhưng tại sao công cụ điều hướng vị trí này lại có tên Breadcrumb? Thuật ngữ Breadcrumb được lấy cảm hứng từ câu chuyện được sáng tác bởi anh em nhà Grimm “Hansel và Gretel”. Khi Hansel và Gretel ở trong rừng, họ đã rải những vụn bánh mỳ (breadcrumb) dọc đường để tìm về nhà. Đó là lý do tên Breadcrumb được ra đời.
Breadcrumb gồm nhiều loại khác nhau. Tuy nhiên, có một số loại phổ biến, thường gặp nhất, bao gồm:
Đây là loại Breadcrumb bạn thường thấy ở các trang web. Nó sẽ cho người dùng biết được vị trí đang ở đâu trên trang và có bao nhiêu bước để trở lại trang chủ. Ví dụ như: Trang chủ>> Trang 1>> Trang 2.
Breadcrumb thường được áp dụng một cách tốt nhất cho các website có nội dung được chia theo nhiều tầng.
Attribute-based Breadcrumbs dựa trên thuộc tính nâng cao Breadcrumb Trail. Loại này thường phổ biến ở các trang web thương mại điện tử để thể hiện những thuộc tính người dùng đã nhấp vào. Giả sử khi truy cập về quần áo, cấu trúc của website sẽ được hiển thị như sau: Home>> Men’s Clothing>> Dress Shirts>> Long Sleeve >> Wrinkle Resistant.
History-based breadcrumb dựa trên sự chính xác lịch sử bạn đã truy cập. Nó tương tự như như lịch sử trình duyệt. Ví dụ, trang được hiển thị khi bạn tìm kiếm sổ tay: Trang chủ>> Sổ tay mini>> Sổ tay da>> Trang hiện tại.
Dưới đây là những tiện ích Breadcrumb mang lại cho trang web. Tìm hiểu ngay cùng On Digitals.
Không những người dùng mà ngay cả Google cũng rất ưu ái Breadcrumb. Như đã đề cập ở trên, nó giúp Google định dạng cấu trúc của trang. Ngoài ra, Google cũng đánh giá, xếp hạng cao các trang sử dụng Breadcrumb. Đồng nghĩa với việc ảnh hưởng tích cực đến xếp hạng của trang web trên kết quả tìm kiếm.
Cảm giác khi nhấp vào trang không liên quan đến thông tin cần tìm kiếm là điều mà người dùng nào cũng không thích. Và có thể khiến họ khó tìm được thông tin. Vì thế, việc sử dụng thanh Breadcrumbs giúp người dùng dễ dàng chuyển hướng đến nội dung họ mong muốn trên thư mục. Điều này cũng hỗ trợ tiết kiệm thời gian, cũng như không cần nhấn nút quay lại.
Hầu hết không có ai truy cập thứ họ tìm thông qua trang chủ, mà họ thường truy cập các trang web có thứ hạng cao trên Google. Sử dụng Breadcrumb giúp giữ người dùng ở lại trang lâu hơn. Bởi các liên kết của breadcrumb chuyển hướng người dùng đến các trang có nội dung tương tự và cung cấp thông tin liên quan.
Để triển khai Breadcrumb cho website gồm nhiều cách khác nhau. Đầu tiên, nếu sử dụng WordPress, có một số plugin hay Yoast SEO để thêm thanh breadcrumb. Bên cạnh đó, nếu bạn dùng CMS thì thao tác sẽ có phần khác biệt, chỉ cần nhập mã code.
Cuối cùng, nếu muốn xuất hiện ở kết quả tìm kiếm Google, bạn nên sử dụng breadcrumb để phân loại thông tin trong kết quả tìm kiếm. Công đoạn này sẽ giúp Google dễ đánh giá và hiểu rõ nội dung của website.
Yoast SEO cung cấp người dùng thêm thanh breadcrumb dễ dàng và chứa mọi tính năng cần thiết để phục vụ cho trang web của bạn. Trong trường hợp bình thường, chỉ cần bật breadcrumb và thiết lập theo cách bạn muốn. Tuy nhiên, trường hợp breadcrumb chưa hỗ trợ được hãy nhập mã code sau:
<?php if ( function_exists(‘yoast_breadcrumb’) ) { yoast_breadcrumb( ‘</p><p id=”breadcrumbs”>’,'</p><p>’ ); } ?> |
Mã code này được đặt trong các tệp như: single.php, page.php và nó nằm ngay phía trên tiêu đề của trang. Một số khác lại nằm ở cuối tệp header.php. Và bạn không nên thêm nó vào function.php bởi có thể gây ra một số sự cố.
Sau khi thêm mã code, hãy di chuyển đến cài đặt của Yoast SEO và bật công cụ breadcrumb. Ngoài ra, bạn có thể chọn, điều chỉnh cấu trúc phù hợp để sử dụng.
Trường hợp bạn sử dụng trình chỉnh sửa khối (WordPress block) và không muốn dùng đến mã code. Bạn chỉ cần sử dụng khối breadcrumb Yoast SEO để thêm breadcrumb vào các bài đăng và trang riêng lẻ.
Việc thêm breadcrumbs khá dễ dàng, bạn chỉ cần nhấn vào biểu tượng “+” để thêm một khối. Sau đó, tìm khối Yoast SEO breadcrumbs bằng cách nhập tên vào thanh tìm kiếm hoặc kéo xuống phần Yoast.
Breadcrumbs cung cấp cho người dùng, khách hàng dễ nắm bắt để truy cập điều hướng trang web của bạn. Và họ ngay lập tức hiểu cách cấu trúc trang web của bạn hoạt động. Song song đó, nó còn hỗ trợ trang web nổi bật trên trang web tìm kiếm.
Nếu bạn đang có nhu cầu xây dựng và SEO trang web của mình, đừng ngần ngại liên hệ On Digitals để được hỗ trợ tận tình và nhanh chóng.