Breadcrumbs hay Breadcrumbs trail là một loại thẻ điều hướng với nhiều đường link phân cấp khác nhau thường được đặt ở đầu trang. Dễ hiểu hơn, Breadcrumbs là một đường dẫn Anchor text được phân cấp thường nằm ở đầu trang. Vậy công dụng của Breadcrumbs là gì? Cùng Mắt Bão tìm hiểu nhé!
Breadcrumbs giúp người dùng biết được họ đang ở đâu trên website. Breadcrumbs cũng cho biết mức độ phân cấp của nội dung đang xem. Ngoài vị trí thường gặp ở đầu trang, Breadcrumbs có thể nằm dưới banner chính, thanh menu hoặc top headers.
Cấu trúc điển hình của Breadcrumbs có thể được viết theo dạng như sau:
- Trang chủ [Home] > Chuyên Mục chính > Trang con > Bài post>…
- Trang chủ [Home] > Trang đã xem thứ nhất > Trang đã xem thứ hai > …
Các loại Breadcrumbs điển hình
Hiện nay, trên website xuất hiện rất nhiều loại Breadcrumbs khác nhau. Dưới đây là một số loại điển hình nhất:
- Attribute Breadcrumbs
- Location Breadcrumbs
- Path Breadcrumbs
Attribute Breadcrumbs là gì?
Attribute Breadcrumbs [Attribute Based Breadcrumbs] là một loại Breadcrumbs theo thuộc tính. Nó được tạo ra với nhiệm vụ là để thể hiện các thuộc tính của trang chủ, trang con trong website, tương tự như danh mục sản phẩm.
Attribute breadcrumbs được sử dụng nhiều trong website thương mại điện tử. Lý do là vì các trang web dạng này thường sở hữu lượng sản phẩn khổng lồ và có nhiều tiêu chí cần phân loại. Ví dụ, với mặt hàng là kem dưỡng da, admin website có thể phân loại sản phẩm theo các yếu tố khác nhau như mức giá, hãng sản xuất, quốc gia sản xuất,… và hiển thị kết quả thông qua Attribute Breadcrumbs.
Location Breadcrumbs là gì?
Location Breadcrumbs [Location Based Breadcrumbs] là một loại Breadcrumbs theo vị trí. Nó sẽ hiển thị để giúp người truy cập biết được vị trí hiện tại của họ trên trang web. Đây là một trong những loại Breadcrumbs phổ biến và được sử dụng nhiều nhất hiện nay.
Path Breadcrumbs là gì?
Path Breadcrumbs là loại Breadcrumbs theo đường đẫn, được sử dụng để hiển thị cho người dùng các chuyên mục hoặc đường dẫn mà họ đã xem qua. Path Breadcrumbs [Path Based Breadcrumbs] hiện nay vẫn chưa được sử dụng rộng rãi bởi tính năng mà nó cung cấp cho người dùng cũng tương tự như nút “Back” trên thanh công cụ. Hơn nữa, với Path Breadcrumbs, người truy cập khó có thể nhận biết được chính xác vị trí của mình trong cấu trúc website.
Ưu điểm khi sử dụng Breadcrumbs là gì?
Như đã nhắc đến ở phần đầu tiên của bài viết, Breadcrumbs đóng vai trò rất quan trọng đối với SEO và sự phát triển của website. Cụ thể, sử dụng Breadcrumbs sẽ giúp bạn:
Nâng cao trải nghiệm người dùng
Breadcrumbs hoạt động giống như một bản đồ chỉ đường đơn giản, giúp người dùng dễ dàng biết được vị trí của họ trên website. Ngoài ra, người truy cập có thể dễ dàng quay lại danh mục trước đó, di chuyển qua trang khác hoặc tìm kiếm những nội dung liên quan thông qua thanh Breadcrumbs một cách nhanh chóng, thuận tiện. Điều này giúp làm tăng trải nghiệm tìm kiếm của người dùng và khiến họ muốn lưu lại website lâu hơn.
Tăng thứ hạng SEO
Breadcrumbs giúp Google nhanh chóng hiểu rõ cấu trúc của website. Do đó, để ghi điểm với công cụ tìm kiếm thì bạn nên tạo Breadcrumbs cho website của mình.
Ngoài ra, Google cũng sẽ dùng Breadcrumbs để hiện thị trong kết quả tìm kiếm. Điều này khiến cho trang web của bạn trông hấp dẫn và thu hút hơn đối với người dùng, từ đó tăng tỷ lệ nhấp chuột và dẫn đến tăng thứ hạng trên trang tìm kiếm.
Giảm Exit Rate và Bounce Rate
Exit Rate và Bounce Rate là gì? Exit Rate là tỷ lệ thoát trang và tỷ lệ bỏ trang là Bounce Rate. Khi truy cập vào website, đa số mọi người đều không thích click để quay về trang chủ. Thay vào đó, người dùng thường có xu hướng tìm kiếm và click vào những điều thú vị, hấp dẫn ngay tại trang mà họ đang có mặt. Do đó, để giữ chân người đọc lâu hơn, bất cứ vị trí nào trên website bạn cũng cần phải biết điều hướng đúng cách.
Và Breadcrumbs chính là một phương thức hữu hiệu giúp người truy cập điều hướng, chuyển đổi danh mục dễ dàng chỉ với vài thao tác đơn giản, từ đó làm giảm tỷ lệ thoát trang [Exit Rate], bỏ trang [Bounce Rate] đáng kể.
Tại sao nên sử dụng Breadcrumbs?
Ngoài các lợi ích tuyệt vời kể trên, bạn nên sử dụng Breadcrumbs cho website vì những lý do sau đây:
- Breadcrumbs giúp website có cấu trúc mạch lạc, dễ dàng tìm kiếm hơn.
- Điều hướng khách truy cập tốt hơn.
- Giúp Google dễ dàng nhận thấy sự liên quan về các nội dung trên website.
Tối ưu Breadcrumbs cho website
Breadcrumbs có vai trò rất lớn cho sự tăng trưởng của website. Tuy nhiên nếu không biết cách sử dụng thì bạn sẽ không thể nào đạt được hiệu quả như mong đợi.
Dưới đây là một số lưu ý bạn cần phải thuộc nằm lòng để tối ưu hóa Breadcrumbs cho website:
Breadcrumbs phải hướng đến người dùng
Khi tạo Breadcrumbs, bạn cần phải đặt lợi ích người dùng lên hàng đầu. Nếu nó có tốt cho SEO thì đó chỉ là lợi ích thêm vào sau đó. Tuyệt đối không nên lạm dụng Breadcrumbs và nhồi nhét từ khóa quá đà. Điều này sẽ gây ảnh hưởng trực tiếp đến trải nghiệm người dùng và gây ra nhiều hệ lụy không nhỏ cho website của bạn như: tăng tỷ lệ thoát trang, giảm lượt click, giảm lượng truy cập,…
Vị trí của Breadcrumbs ở đâu?
Thường thì Breadcrumbs nên được đặt ở ngay phía đầu trang, ở trên page title và dưới top navigation bar [nếu có] vì đây là vị trí mà người truy cập dễ dàng nhìn thấy và sẽ click vào ngay khi cần.
Thiết kế Breadcrumbs là làm gì?
Breadcrumbs cần được thiết kế với kích thước hợp lý, phù hợp với tổng thể website. Ngoài ra, Breadcrumbs không nên chiếm nhiều diện tích hoặc quá nổi bật vì sẽ lấy đi sự chú ý của người xem đối với top menu và page title.
Ngoài ra, không nên link Breadcrumbs đến chính nó. Ở vị trí trang hiện tại, bạn có thể ghi đề mục vài in đậm để người dùng nhận biết.
Quan hệ giữa main navigation/top menu và Breadcrumbs là gì?
Sử dụng Breadcrumbs, vẫn phải cần main navigation/top menu. Breadcrumbs thực chất chỉ là một hệ thống navigation phụ, giúp người dùng biết được vị trí mình đứng. Còn navigation/top menu sẽ cho phép người dùng điều hướng tốt hơn. Do đó, Breadcrumbs sẽ không thể thay thế hoàn toàn cho main navigation/top menu. Tuy đã tạo Breadcrumbs nhưng bạn vẫn cần chú ý đến việc xây dựng main navigation thu hút và đầy đủ.
Hướng dẫn tạo Breadcrumbs cho WordPress
Nếu bạn chưa biết về WordPress, thì đây là lúc thích hợp để tìm hiểu về nó qua bài viết: “WordPress là gì?“
WordPress là hệ thống mã nguồn mở [Open Source Software] dùng để xuất bản Blog hoặc Website viết bằng ngôn ngữ lập trình PHP và cơ sở dữ liệu MySQL.
Đối với những website WordPress, thường có 2 cách để tạo Breadcrumbs:
- Một là sử dụng plugin WordPress Breadcrumb NavXT
- Hai là dùng Yoast SEO – Plugin tối ưu SEO tốt nhất cho website WordPress.
WordPress Breadcrumb NavXT là gì?
Breadcrumb NavXT là wordpress plugin tạo thanh định hướng phổ biến nhất cho website. Cách thức để cài đặt NavXT rất dễ dàng. Đầu tiên, hãy tìm kiếm từ khóa NavXT trong kho plugin của WordPress. Sau khi có kết quả, bạn chỉ cần tải về, bấm nút cài đặt và kích hoạt nó.
NavXT sẽ thêm Breadcrumbs dưới dạng widget. Để sử dụng, bạn chọn tab Appearances -> Widgets. Khi muốn thêm Breadcrumbs cho một trang web bất kỳ, bạn chỉ cần vào trang đó và thả widget NavTX là được.
Còn nếu bạn cần tạo Breadcrumbs trực tiếp trên theme, hãy gõ thêm đoạn snippet code sau vào file header.php:
Khi đã hoàn thành, bạn có thể dùng NavXT plugin để hiển thị Breadcrumbs theo ý mình. Để cấu hình chi tiết, hãy đến page setting của plugin để cài đặt và thay đổi một số thuộc tính của Breadcrumbs nếu cần.
Sử dụng Yoast SEO để thêm Breadcrumbs
Yoast SEO là gì?
Cùng sơ lược về khái niệm “Yoast SEO là gì” nhé!
Yoast SEO là một trong plugin WordPress quan trọng và phổ biến nhất hiện nay giúp tối ưu công việc SEO cho website. Được xây dựng và phát triển bởi Team Yoast từ năm 2010 đến nay, SEO by Yoast gần như là một trong những plugin cơ bản nhất góp mặt trong hầu hết tất cả các website wordpress hiện nay.
Ngoài Breadcrumbs, Yoast SEO còn cung cấp nhiều tính năng hữu ích khác cho SEO. Bạn có thể tìm hiểu rõ hơn về cách sử dụng Yoast SEO trong bài viết: Yoast SEO là gì? Hướng dẫn sử dụng Plugin Yoast SEO
Hướng dẫn cài đặt Breadcrumbs bằng Yoast SEO
Cách cài đặt plugin Yoast SEO cũng tương tự như NavXT. Bạn chỉ cần tìm kiếm, tải về, cài đặt và kích hoạt Yoast SEO plugin là được.
Sau khi hoàn thành, để tạo Breadcrumbs cho child theme WordPress, hãy thêm snippet code vào file single.php, page.php, hoặc header.php như bên dưới: