Breadcrumb là gì? Cách tạo Breadcrumb cho website

Bạn có biết rằng Breadcrumbs có rất nhiều lợi ích cho người dùng và cả những ai đang triển khai chiến dịch SEO trên website?

Tuy nhiên, có 1 điều thật kỳ lạ, đó là rất ít marketer & các nhà phát triển trang web chú ý tới vấn đề nhỏ này, hoặc cũng có những bạn newbie chưa biết Breadcrumbs là gì? Thế nên trong bài viết này Compa Marketing sẽ cùng bạn đào sâu tìm hiểu & phân tích về nó và những tác dụng thiết thực mà nó mang lại nhé!

Lưu ý nhỏ: Hiện nay chưa có nghiên cứu chính xác nào cho thấy tác động rõ rệt của Breadcrumbs tới thứ hạng của từ khóa trên bảng xếp hạng tìm kiếm của Google. Thế nhưng bằng 1 cách gián tiếp, loại thanh điều hướng này lại có tác động tích cực tới các chỉ số trải nghiệm người dùng & máy tìm kiếm.

Breadcrumbs là gì?

breadscumb là gì

Hiểu một cách đơn giản, Breadcrumbs hay có thể tạm gọi nó với thuật ngữ Breadcrumbs trail là nhóm các liên kết hiển thị trên giao diện website của bạn, chúng được sắp xếp vị trí ở gần nhau & phân cấp với một loại logic cụ thể.

Nếu bạn để ý, Breadcrumbs thường nằm ở phần đầu của 1 page/bài viết trên web, các liên kết này được sắp xếp dàn trải thành hàng ngang từ trái qua phải, phân cách nhau bằng các ký tự đặc biệt (thường thấy là dấu mũi tên “>>” hoặc dấu gạch chéo “/”…) những đường dẫn này cho phép bạn bấm vào & chuyển sang 1 trang khác (thường là danh mục & trang chủ).

Không chỉ trên giao diện website, nếu bạn khai báo cấu trúc dữ liệu chính xác, Breadcrumbs còn được Google hiển thị trực tiếp trên bảng xếp hạng tìm kiếm.

Tên gọi Breadcrumbs dịch ra tiếng Việt có nghĩa là những mẩu bánh mì vụn? Ơ thế sao người ta không gọi nói là bánh quy, bánh bèo hay bánh giò cho gần gũi?

Nguyên nhân nó có tên đặc biệt thú vị như vậy vì được bắt nguồn từ câu chuyện của Hansel và Gretel, là 2 đứa trẻ đi vào rừng và cố gắng rải những mẩu bánh mì vụn làm dấu để không bị lạc khi quay về nhà.

Những mẩu bánh mì này cuối cùng đã trở thành mô hình cho các mẩu bánh mì chúng ta thấy trên các trang web những ngày nay.

Ví dụ đường dẫn tới bài viết bạn đang đọc: Trang chủ > Blog > Thuật ngữ SEO > Breadcrumbs. Con đường “bánh mì” này ngay lập tức cho bạn thấy bạn đang ở đâu. Mỗi bước của con đường đó đều có thể nhấp được, tất cả đều quay trở lại trang chủ & chuyên mục trước đó.

Phân loại BreadCrumbs

Có 3 loại breadcrumb chính:

1. Breadcrumb theo vị trí

Hay location-based breadcrumb: cho người dùng biết họ đang ở đâu trong hệ thống phân cấp của website.

Loại breadcrumb này dùng tốt nhất cho những website mà nội dung được chia nhiều tầng (>=2).

ví dụ về breadcumb

2. Breadcrumb theo thuộc tính.

Attribute-based breadcrumb thể hiện thuộc tính của một page trong website.

ví dụ về breadcumb

Loại breadcrumb này đặc biệt phổ biến trong các trang web thương mại điện tử. Ví dụ, bạn muốn tìm kiếm sản phẩm serum chăm sóc da, website đó có thể phân loại serum theo các thuộc tính đặc trưng của nó, chẳng hạn như theo texture serum, công dụng chính, thương hiệu,…

3. Breadcrumb theo đường dẫn

Breadcrumb theo đường dẫn (path-based) chỉ ra các bước, hoặc đường dẫn mà người dùng đã đi qua để truy cập đến một trang cụ thể.

ví dụ về breadcumb

Trong ba loại breadcrumb thì breadcrumb theo đường dẫn ít phổ biến nhất hơn cả, do bản chất chức năng này tương tự nút “Back”, và không cho người dùng biết vị trí tương đối với cả cấu trúc site.

Tại sao nên sử dụng BreadCrumbs cho website?

  • Cấu trúc mạch lạc
  • Điều hướng khách truy cập
  • Cho máy tìm kiếm thấy sự liên quan về nội dung
  • Trải nghiệm tốt hơn: tỷ lệ thoát, đảo trang

Cách tạo BreadCrumb

Trong bài này, Tài sẽ chỉ 2 cách để thêm breadcrumb vào WordPress. Cách đầu tiên là sử dụng NavXT plugin, cách thứ 2 là dùng plugin Yoast SEO.

1. Sử dụng plugin WordPress Breadcrumb NavXT

NavXT plugin có cài dễ dàng thông qua repository trong WordPress. Bạn chỉ cần tìm từ khóa Breadcrumb NavXT, bạn sẽ thấy nó hiện lên. Tải, cài đặt và kích hoạt nó.

Plugin NavXT thêm breadcrumb thông qua widget. Để sử dụng, bạn hãy chuyển tới tab Appearances, mở Widgets. Chỉ cần thả widget NavXT widget vào trang web nơi bạn muốn breadcrumb WordPress hiện lên là được.

Nếu bạn cần thêm breadcrumb trực tiếp vào theme, bạn sẽ cần thêm đoạn code snippet sau vào file header.php:

<div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”https://schema.org/”>
<?php
if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
</div>

Sau khi hoàn tất, bạn có thể sử dụng plugin này để hiển thị breadcrumb ở chỗ cần thiết. Để cấu hình chi tiết tiết, di chuyển vào page setting của plugin.

cách tạo breadcumb

2. Sử dụng Yoast SEO để thêm Breadcrumb vào website WordPress

Cài plugin Yoast SEO cũng tương tự như plugin khác. Tải và cài đặt Yoast SEO plugin, sau đó kích hoạt plugin là được.

Sau khi cài đặt, thêm snippet code vào trong child theme WordPress của bạn. Code Snippet bên dưới có thể thêm vào bất kỳ template nào đang sử dụng. Tuy nhiên, Tài khuyên đặt nó vào single.php, page.php, hay header.php.

3 nơi này đảm bảo breadcrumbs hiện lên mỗi bài viết, trang web, và trên toàn website. Đây là đoạn code:

<?php
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb( ‘<p id=”breadcrumbs”>’,'</p>’ );
}
?>

Sau khi bạn thêm code vào, kích hoạt breadcrumbs bằng Yoast SEO -> Search Appearance -> Breadcrumbs

cách tạo breadcumb

Kết Luận

Breadcrumb là 1 dạng menu tập hợp những liên kết giúp người dùng xác định vị trí tương đối của mình trong cấu trúc site khi truy cập vào website của bạn. Breadcrumb tạo cho khách truy cập một trải nghiệm người dùng thân thiện hơn và khi hiện trên kết quả tìm kiếm có thể làm tăng click through rate cho kết quả tìm kiếm của bạn trên SERPs.

Breadcrumb không khó sử dụng, tuy nhiên để dùng breadcrumb bạn cần lưu ý như làm sao để breadcrumb của bạn thực sự hữu ích cho người dùng, đồng thời thiết kế của breadcrumb cũng cần hài hòa với tổng quan của website.

Qua hướng dẫn của Tài, bạn đã có thể tự tạo breadcumb cho mình chưa? Trong quá trình thực hành, nếu có bất kì câu hỏi nào, bạn hãy cho Tài biết ở phần bình luận nhé! Tài sẽ giúp bạn giải quyết vấn đề của mình nhanh nhất có thể.

Have a nice day!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.