Người Viết : ViKiMi Editor

Tăng trải nghiệm người dùng / UX và tối ưu SEO với thiết kế breadcrumb cho Website !
Có thể nói trực tiếp đến Breadcrumb khi bàn luận về vấn đề tạo nên điều hướng cho Website. Các điều hướng tốt sẽ tạo nên một trải nghiệm tốt trên Website, đồng thời đây cũng là một cách tốt để SEO cho trang Web đạt được kết quả tốt. Vậy có phải các Website đều cần đến Breadcrumb, chắc như vậy rồi vì nó đã xuất hiện ở khắp nơi.
Breadcrumb đem lại trải nghiệm người dùng, tối ưu hoá công cụ tìm kiếm. Nó thực sự đơn giản khi sử dụng dù bạn có biết lập trình hay không. Các cung cấp cho thiết kế một Breadcrumb đã quá nhiều, các Plugin luôn hỗ trợ với phần SEO tạm chấp nhận được.
+ Một cách cổ điển nhất thì Breadcrumb là liên kết điều hướng sẽ xuất hiện trên Website, điển hình tại đầu nội dung bài đăng hoặc các Page. Breadcrumb hướng người dùng đến các truy cập cần thiết một cách nhanh chóng như một lối tắt.
A. Tại sao nó lại trở nên phổ biến và hiệu quả như vậy?
Đó chính vì hiệu quả mà Breadcrumb đem lại. Chúng ta sẽ có 3 loại Breadcrumb có thể phân loại, cả 3 đều giúp tăng trải nghiệm người dùng và SEO. Có thể liệt kê như sau :
+ Hierarchy-based : Giúp người dùng biết vị trí của họ trên cấu trúc Website
+ Attribute-based : Xuất hiện chủ yếu trên các trang thương mại điện tử, cho phép hiển thị các thuộc tính mà người dùng đã tìm kiếm, dẫn họ đến trang sản phẩm hiện tại
+ History-based : Khi người dùng di chuyển qua các trang trên Website, Breadcrumb sẽ giúp họ quay lại các vị trí trên lịch sử di chuyển
Example : Home » Tin Tức » Người giành giải bơi lội toàn quốc
B. Cách tạo một Breadcrumb đơn giản với mã code thông thường
Có vẽ điều này khá cần thiết khi bạn muốn tự mình thực hiện một điều hướng Breadcrumb trên Website và tiếp tục cho kế hoạch SEO cho Web của bạn theo cách mà bạn cho rằng tốt nhất, nhanh nhất.
Đoạn mã dưới đây cho bạn một Breadcrumb đơn giản nhất nhưng có thể xuất hiện ở bất kỳ nơi nào bạn muốn. Cũng là một Code đơn giản nhất có thể giúp kết hợp cho SEO.
function create_your_breadcrumb() {
echo ‘<a href=”’.home_url().‘” rel=”nofollow”>Home</a>’;
/* Hiển thị nếu là một Category hoặc Bài Đăng */
if (is_category() || is_single()){
echo “ » ”;
the_category (‘ • ’);
if (is_single()) {
echo “ » ”;
the_title();
}
/* Ngược lại, Hiển thị nếu là page */
} elseif (is_page()) {
echo “ » ”;
echo the_title();
/* Ngược lại, Hiển thị nếu là search */
} elseif (is_search()) {
echo “ » ”;
echo ‘<em>’;
echo the_search_query();
echo ‘</em>’;
}
}
Chúng ta thấy khá là đơn giản cho các trường hợp xảy ra :
+ Nếu người dùng đang có vị trí tại Category hay bài Đăng thì sẽ hiển thị nhờ các Function the_category() [Lấy về danh sách các Category phù hợp] , Function the_title() [Lấy về Title của bài Đăng]
+ Nếu người dùng đang có vị trí Page thì sẽ hiển thị nhờ Function the_title() [Lấy về Title của Page]
+ Nếu người dùng đang có vị trí search thì sẽ hiển thị nhờ Function the_search_query()
Function create_your_breadcrumb có thể được đặt tại Function.php hoặc tại Header.php tuỳ theo các bạn muốn nó thể hiện trên Website.
Chúng ta sẽ gọi Function create_your_breadcrumb tại các file như page.php, category.php, single.php … Tất nhiên, chúng ta cần phải kết hợp sự hiển thị với CSS để có một Breadcrumb đẹp mắt. Cách gọi như sau :
<div class=”my_custom_breadcrumb”><?php create_your_breadcrumb(); ?></div>
Đoạn mã CSS Chúng ta thêm vào để hiển thị với Breadcrumd, được thêm vào file style.CSS hoặc tại Appearance > Customize > Additional CSS :
div.my_custom_breadcrumb {
padding: 10px 15px 30px 15px;
list-style: none;
background-color: transparent;
border-radius: 0%;
}
div.my_custom_breadcrumb a {
color: blue;
text-decoration: none;
border-bottom: 1px solid transparent;
}