Breadcrumbs là gì? Có tác dụng gì trong SEO website?

Breadcrumbs là gì?

Breadcrumbs là nhóm các liên kết đặt kế tiếp nhau, giúp người đọc và công cụ tìm kiếm hiểu được vị trí của trang hiện tại trong cấu trúc chung của website. Trong tiếng Anh, thuật ngữ đầy đủ là Breadcrumbs Navigation: Thanh điều hướng dạng breadcrumbs

Như trong ảnh, bạn hoàn toàn có thể nhìn hình trên sẽ thấy breadcrumbs của chính trang bài viết tất cả chúng ta đang xem :

• Có 3 tầng: Từ trang chủ tính là tầng đầu tiên (thứ 1), sau đó đến tầng thứ 2 trực tiếp có liên quan đến bài hiện tại (Blog), rồi đến tầng thứ 3 (là trang hiện tại)
• Nếu muốn quay lại trang chủ hay trang Blog (tầng trên), thì chỉ cần nhấp vào link tương ứng

Như vậy, theo cấu trúc này, thì nếu muốn tìm bài viết hiện tại từ Trang chủ, thì hoàn toàn có thể theo tuần tự đúng như trên hình : vào Trang chủ rồi chọn trang Blog, rồi đường link đến bài hiện tại .
Về ngữ nghĩa theo tiếng Anh, từ breadcrumbs nghĩa đen là “ vụn bánh mì ”. Và nó tương quan đến 1 câu truyện cổ Grimms kể về 2 đồng đội Hansel và Gretel, khi bị người mẹ kế bỏ vào rừng sâu đã nghĩ ra cách để ghi lại đường về nhà : rải những mẩu bánh mì .

Theo như cách lý giải như trên, breadcrumbs có ý nghĩa như việc lưu lại giúp lần theo những bước để tìm về trang Home, hoặc từ trang trang chủ tìm đến trang đích .
Nội dung và hình thức của công cụ này là như vậy, nhưng ý nghĩa thực sự của nó là gì ? Tôi sang phần tiếp theo .

Lợi ích của việc sử dụng Breadcrumbs Navigation

Những website cũ trước đây, ở dạng đơn thuần, bạn không thấy nhiều trang dùng breadcrumbs. Nhưng đến nay, hầu hết web hiện tại, nhất là những trang có quy mô lớn, cấu trúc phân loại thành nhiều tầng nội dung, thì việc sử dụng hài hòa và hợp lý thanh điều hướng phụ này sẽ đem lại nhiều công dụng .
Cụ thể như sau :

1. Giúp người đọc hình dung được họ đang ở đâu trong website

Điều này rất đúng với những website lớn. Khi nhìn vào thanh breadcrumbs, người dùng hiểu ngay được trang hiện tại nằm ở đâu trong cấu trúc chung của toàn site .
Và họ cũng hoàn toàn có thể vận động và di chuyển đến những thư mục nội dung phía trên để tìm thông tin mà mình cần .
Ngoài ra, việc Open breadcrumbs đúng vị trí cũng làm cho website nhìn chuyên nghiệp hơn .
Những điều này góp thêm phần vào việc cải tổ thưởng thức người dùng, cũng là 1 trong những cách làm SEO hiệu suất cao .

2. Cung cấp đường link nhanh đến thư mục cấp cao hơn

Bằng việc vào trang thư mục chứa bài viết hiện tại, người đọc sẽ tìm ngay được những trang tương tự như .
Chẳng hạn với thanh điều hướng của bài viết này, nếu bạn muốn xem những bài viết khác tương tự như trong Blog, thì chỉ cần nhấp vào link đó, sẽ tìm được hàng loạt những bài viết trong thư mục .
Hoặc trong trường hợp này trên 1 site về tour du lịch :

Thì từ trang hiện tại về Tour du lịch Hà Giang 3 ngày 2 đêm, bạn hoàn toàn có thể quan và tìm kiếm những tour khác trong thư mục trên đó, ví dụ điển hình như Tour trong nước, tour ở Miền Bắc, hay chỉ những tour ở Hà Giang .
Rõ ràng, việc sắp xếp dẫn hướng như vậy, cùng với những công cụ khác, sẽ giúp người dùng vận động và di chuyển và tìm kiếm được thuận tiện và thuận tiện hơn. Từ đó cải tổ thưởng thức người dùng ( User Experience ) .

3. Giảm tỷ lệ thoát trang (Bounce Rate)

Thông thường, người dùng vào trang nhờ hiệu quả tìm kiếm trên Google. Tại đó, họ nhìn thấy thanh breadcrumbs, trước – trong – hoặc sau khi đọc thông tin trên trang. Nhiều năng lực nếu họ chăm sóc thì sẽ liên tục nhấp vào đường link trong breadcrumbs để tìm đến trang hạng mục ở Lever cao hơn, để tìm những trang có nội dung tựa như trong thư mục .
Trong trường hợp như vậy, breadcrumbs đã khuyến khích đưa người dùng sang 1 trang khác. Điều này giúp giảm tỉ lệ Bounce Rate của toàn site – là Phần Trăm số lượng người vào website và rời đi, mà không nhấn vào xem tiếp thêm nội dung gì nữa .
Đây cũng là 1 trong những tiêu chuẩn SEO rất quan trọng : giảm tỷ suất bỏ trang trung bình của site .

4. Có tác động tích cực đến Google

Breadcrumbs không chỉ có công dụng tích cực với người dùng, mà còn cả với những công cụ tìm kiếm .
Thực tế, Google nhìn nhận cao việc sử dụng thanh điều hướng breadcrumbs này một cách hài hòa và hợp lý. Nghĩa là công cụ này hoàn toàn có thể tác động ảnh hưởng tích cực đến thứ hạng trên tác dụng tìm kiếm ( chính là mục tiêu của SEO ) .
Nếu bạn chú ý, thì khi vận dụng Schema Markup ở phần riêng cho breadcrumbs. Và khi có khai báo tài liệu có cấu trúc này, thì trên tác dụng tìm kiếm Google sẽ hiển thị dưới dạng Rich Snippet .
Trước đây, là sự khác nhau bằng tín hiệu mũi tên sang phải >, thay vì dấu gạch chéo /, và đoạn text đã khai báo trong Schema ( vd : Du lịch Cần Thơ ) thay vì là chuỗi tiếng Việt không dấu ( du-lich-can-tho ). Điều đó biểu lộ rằng Google đã “ chú ý ” tới yếu tố breadcrumbs xuất hiện trên website của bạn .

Kết quả có và không có breadcrumbs trên SERP
Như tôi quan sát vào tháng 10/2019, thì sự khác nhau chỉ còn ở tín hiệu thứ 2 : cụm từ vừa đủ, hay chỉ là chuỗi tiếng Việt không dấu ( gọi là slug ) .

Breadcrumb trên Rich Snippet: URL là tiếng Việt có dấu, hay không dấu

Ngoài ra, chính bản thân trên website của Google cũng có sử dụng breadcrumb với 1 số ít từ khóa tìm kiếm, như hình dưới đây. Tôi nêu thông tin này là để tất cả chúng ta thấy được, và nên tìm cách ” bắt chước ” ông lớn này .

Google cũng dùng breadcrumb trên website của mình

Các loại breadcrumb thông dụng

Mọi người thường nhắc tới 3 loại, tôi liệt kê đủ dưới đây. Nhưng trên thực tiễn, tôi ít thấy loại thứ 3, có lẽ rằng đã lỗi thời và không còn thiết yếu với những trình duyệt lúc bấy giờ .

1. Breadcrumb thể hiện vị trí trang

Loại này thông dụng nhất, tạo theo theo cấu trúc phân tầng ( hierarchy-based ). Chẳng hạn, với web Carly. com.vn này, tôi kiến thiết xây dựng 3 tầng nội dung như hình dưới :

Cấu trúc những tầng nội dung website Carly. com.vn
Trên một trang nào đó, ví dụ điển hình như trang bài viết hiện tại, sẽ hiển thị breadcrumbs miêu tả đúng trình tự theo mũi tên màu đỏ, và trên giao diện sẽ bộc lộ như sau ( bạn hoàn toàn có thể xem trong thực tiễn trên đầu trang ) :
Trang chủ > Blog > Breadcrumbs là gì ? ​ ​

2. Breadcrumb thể hiện thuộc tính

Đây là loại thanh điều hướng gồm những đường link theo thuộc tính nào đó, ví dụ điển hình như thuộc tính của loại sản phẩm. Thường được ứng dụng khi lọc mẫu sản phẩm theo những tiêu chuẩn đơn cử. Tương ứng với mỗi tiêu chuẩn là một đường link đến 1 nhóm mẫu sản phẩm có cùng tiêu chuẩn đó .
Chẳng hạn, khi lọc tác dụng tìm kiếm trên website sàn thanh toán giao dịch xe hơi Carly. vn :

Breadcrumb bộc lộ thuộc tính xe xe hơi
Bạn thuận tiện thấy rằng, thanh breadcrumbs này đang bộc lộ những chiếc xe hơi Ford Everest Titanium 2.2 L, mới, bán tại Tỉnh Bình Dương. Như vậy, nếu người dùng muốn bỏ tiêu chuẩn nào thì chỉ cần nhấn vào nút x là sẽ được tác dụng mới. Hoặc cũng thể nhấp vào đường link tương ứng để tìm những loại sản phẩm cùng loại tương ứng .
Thông thường, loại này phối hợp với loại breadcrumb thứ nhất ( theo cấu trúc phân tầng ), để tăng hiệu suất cao tối ưu thưởng thức với người dùng. Có thể thấy rõ trong website bonbanh.com, có 2 loại : phần trên là theo cấu trúc phân tầng, phần dưới là theo những thuộc tính xe .

Breadcrumb biểu lộ nhiều thuộc tính xe hơi

3. Breadcrumb thể hiện lịch sử các trang truy cập

Loại này liệt kê những trang mà người dùng đã xem lần lượt cho đến trang hiện tại. Kiểu thế này :
Trang đã xem > Trang đã xem > Trang đã xem > Trang đang xem
Thực ra đây mới giống hình ảnh những mẫu bánh mỳ ( breadcrumbs ) mà chị em Hansel và Gretel trong câu truyện cổ tích đã dùng để rải trên đường để lưu lại đường đi .

Rải vụn bánh mỳ lưu lại đường đi
Về công dụng, loại này hoạt động giải trí tựa như như nút Back và Forward trên trình duyệt. Cũng vì thế, mà loại này hiện rất hiếm khi được sử dụng .

Đưa breadcrumbs vào website như thế nào?

Ngoài hiểu rõ khái niệm breadcrumbs là gì, cũng như quyền lợi của nó, bạn còn cần biết cách đưa vào website thế nào .
Do đây thực ra là thanh điều hướng gồm những đường link sau đó nhau, nên bạn chỉ cần đưa 1 số dòng code tạo những đường link, rồi kèm theo định dạng trong CSS .
Việc này thường do lập trình viên tạo sẵn. Khi tạo 1 bài viết mới thì trong đó đã tự động hóa chèn breadcrumb vào vị trí đã định trước. Nếu bạn biết về code thì cũng hoàn toàn có thể tự làm được việc này .
Ở dạng đơn thuần, thì hoàn toàn có thể chèn đoạn mã thế này :

 
    
Trang chủ

    
Blog
 
    
Breadcrumbs là gì?

Và thêm mã trong CSS để cho hình thức đẹp mắt và tương thích với xung quanh hơn .

.breadcrumb {
    display: flex;
    margin: 10px;
    font-size: 12px;
    opacity: 0.8;
}​
.breadcrumb li + li:before {
    content: '\f105';
    font-family: "FontAwesome";
    margin: 0 10px;
}​

Cách sử dụng Breadcrumb thế nào cho hiệu quả?

Xuất phát từ quan điểm rằng đây là một thanh điều hướng phụ, dẫn từ trang chủ đến trang hiện tại, phân theo Lever nội dung ( level ), mục tiêu là để cải tổ thưởng thức người dùng và tối ưu hóa với Search Engine .

Vậy, chúng ta cũng nên để ý những cách thức sử dụng phù hợp và hiệu quả cho SEO.

• Breadcrumb chỉ là thanh điều hướng phụ, không được thay thế cho thanh Menu chính của website.
• Hiển thị trong trang màn hình đầu tiên (Above the Fold) của website, như vậy người dùng mới dễ thấy được vị trí của trang
• Font chữ nhỏ, màu chữ nhạt hơn bình thường, để phân biệt với thanh menu chính
  Bắt đầu với Trang chủ, rồi đến những trang ở bậc kế tiếp, lần lượt cho đến trang hiện tại
• Không đặt link đến trang hiện tại, vì điều này là thừa. Người dùng đang ở trang đó rồi, họ không cần nhấp vào link nữa. Và trường hợp nhấp link vì tò mò thì cũng không được việc gì, chỉ gây mất thời gian vô ích (trải nghiệm không hay).
• Sử dụng từ khóa một cách phù hợp cho các link trong breadcrumb. Nghĩa là dùng đúng, đủ, và không nhồi nhét.
• Nên sử dụng dòng text ngắn gọn phản ánh đúng nội dung của link. Với website Carly.com.vn này, tôi dùng riêng 1 trường text ngắn gọn để sử dụng cho text anchor trên breadcrumb và menu. Ví dụ: bài viết có tên dài dòng, như “…” thì trên breadcrumbs chỉ cần để ngắn gọn là…, như vậy vừa tiết kiệm được không gian trên web (nhất là khi xem trên mobile), vừa đảm bảo nội dung và từ khóa.
• Dùng ký tự ngăn cách các link một cách phù hợp, và định dạng cho bắt mắt, hòa hợp với những yếu tố xung quanh. Ký tự hay được sử dụng là dấu lơn hơn >. Cũng có người dùng ký tự phân cách |, hoặc gạch chéo /, nhưng như vậy chưa rõ lắm, vì không thể hiện được chiều di chuyển. Cũng có người dùng những ký tự hoa mỹ hơn để nâng cao hiệu quả thẩm mỹ (như trong website này, tôi dùng f105 trong FontAwesome để làm dấu ngăn cách)

Tóm lại

Việc ứng dụng thanh điều hướng phụ breadcrumbs vào website góp thêm phần cải tổ đáng kể thưởng thức của người mua. Ngoài ra, khi tích hợp khôn khéo với công cụ Schema Markup, sẽ tăng tính thân thiện với Google .
Đó chính là mục tiêu làm SEO website .
Còn bạn ? Hiểu breadcrumbs là gì không quan trọng bằng ứng dụng tương thích. Bạn có dùng thanh điều hướng này trên website không ? Bạn thấy hiệu suất cao như thế nào ? Hãy san sẻ dưới đây kinh nghiệm tay nghề của bạn nhé .

Source: https://mindovermetal.org
Category: Wiki là gì