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 và 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 Sài Gòn Kết Nối 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é!
Breadcrumbs 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 và 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 và 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.
Các nguyên tắc cần tuân thủ để sử dụng Breadcrumbs tốt nhất
Breadcrumbs không thể thay thế main navigation/Top menu vì chỉ là hệ thống Navigation phụ. Do đó, người dùng cần back lại trang video category trước khi đi tiếp khi muốn vào các phần khác của website ngoài các link trên Breadcrumbs.
Nếu đã sử dụng Breadcrumbs thì phải mang lại lợi ích cho người dùng. Để xác định xem Breadcrumbs có mang lại lợi ích cho một website hay không, bạn hãy xây dựng một site map hoặc visitor flow để xác định breadcrumbs sẽ cải thiện khả năng của người dùng như thế nào để điều hướng thông tin trong website.
Cần đảm bảo các tiêu chuẩn tạo Breadcrumbs gồm:
- Breadcrumbs thường xuất hiện trên nửa đầu của trang dưới top navigation bar và ở trên page title.
- Breadcrumbs giảm cấp theo thứ bậc từ trang chủ và đi theo từng bước từ cấp cao nhất đến thấp nhất.
- Breadcrumbs cần có kích cỡ hợp lý, không chiếm quá nhiều diện tích, không nên lấy sự chú ý khỏi top menu và title của page.
- Khi tách hyperlink cho breadcrumbs cần có dấu hiệu thống nhất
Cuối cùng, hãy thiết kế Breadcrumbs cho đẹp mắt và hài hòa với thiết kế tổng quan của website.
Phân loại Breadcrumb
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).
2. Breadcrumb theo thuộc tính
Attribute-based breadcrumb thể hiện thuộc tính của một page trong website.
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ể.
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.
Cách Tạo BreadCrumb
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:
[su_note note_color=”#8ff2ff” text_color=”#333333″] <div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”https://schema.org/”><?php
if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
</div>[/su_note]
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.
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. Ba 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:
[su_note note_color=”#8ff2ff” text_color=”#333333″] <?phpif ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb( ‘<p id=”breadcrumbs”>’,'</p>’ );
}
?>[/su_note]
Sau khi bạn thêm code vào, kích hoạt breadcrumbs bằng Yoast SEO -> Search Appearance -> Breadcrumbs.
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.
CÔNG TY TNHH CÔNG NGHỆ SÀI GÒN KẾT NỐI
Cam kết mang chất lượng và sự uy tín. Hãy liên hệ với chúng tôi để được giải đáp mọi thắc mắc, hỗ trợ kinh nghiệm và đưa ra giải pháp từ các chuyên viên kinh nghiệm tại Sài Gòn Kết Nối.
Địa chỉ : 60 An Nhơn, Phường 17, Quận Gò Vấp, TP. Hồ Chí Minh.
Điện thoại : 0979 220 223 – 0326 770 776
Email : saigonketnoi20@gmail.com
Facebook : https://www.facebook.com/saigonketnoi.vn/