Thiết kế Website

Breadcrumb là gì? Làm thế nào tối ưu Breadcrumb cho website?

Hiểu rõ hơn về định nghĩa Breadcrumb là gì?

Breadcrumb là gì? Breadcrumb là 1 tập hợp những liên kết giúp người dùng xác định vị trí hiện tại của mình trong cấu trúc site. Thuật ngữ này gắn với câu chuyện cổ Grimm: Hansel và Gretel, trong đó 2 đứa trẻ  đã rải những mẩu bánh mỳ vụn (breadcrumb) dọc đường để tìm về nhà.

breadcrumb là gì

Đây cũng chính là nhiệm vụ của breadcrumb trong User Experience của website và SEO. Trong một website có cấu tạo phức tạp hoặc chứa nhiều nội dung, breadcrumb navigation là một cách hiệu quả để giúp người dùng định vị vị trí trong website và giúp việc di chuyển giữa các trang thuận tiện hơn.

Breadcrumb có vai trò gì trong SEO?

Breadcrumb tiện dụng với người dùng

  • Tiện dụng cho người dùng: Breadcrumb là công cụ hỗ trợ để người dùng điều hướng một trang web. Đối với một website lớn với nhiều nội dung, breadcrumb giúp người dùng định vị bản thân so với cấu trúc toàn site
  • Giảm số click và thao tác để quay trở lại các trang cấp cao: Thay vì sử dụng nút “Back” hoặc top menu của website để quay trở lại trang cấp cao hơn, người dùng có thể sử dụng breadcrumb và dễ dàng di chuyển đến các category hoặc tổ chức cao hơn trong website
  • Giảm bounce rate: Các điều hướng của breadcrumb là một phương pháp hữu hiệu để khuyến khích người truy cập kiểm tra nội dung của một website sau khi đã xem trang đích. Các liên kết của breadcrumb sẽ dẫn người dùng đến các phân trang khác và cung cấp những thông tin liên quan. Điều này giúp làm giảm tỷ lệ thoát trang nói chung.

Breadcrumb có tác dụng đặc biệt với SEO

Rất nhiều người làm SEO dùng breadcrumb như một cách tăng lượng anchor text có gắn keyword trên website; tuy nhiên nếu bị lạm dụng, kĩ thuật này có thể làm giảm UX (trải nghiệm người dùng), và việc này thì không bao giờ là tốt.

Quan trọng hơn, trong một vài trường hợp, breadcrumb của bạn có thể hiện lên trên kết quả tìm kiếm (SERPs), tăng khả năng người dùng click vào kết quả của bạn giữa những kết quả tìm kiếm khác

Hiện nay có bao nhiêu loại breadcrumb? Breadcrumb là gì

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 tế, tôi ít thấy loại thứ 3, có lẽ đã lỗi thời và không còn cần thiết với các trình duyệt hiện nay.

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

Loại này phổ biến 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 xây dựng 3 tầng nội dung như hình dưới:

Trên một trang nào đó, chẳng hạn như trang bài viết hiện tại, sẽ hiển thị breadcrumbs mô tả đúng trình tự theo mũi tên màu đỏ, và trên giao diện sẽ thể hiện như sau (bạn có thể xem thực tế trên đầu trang):

Trang chủ > Blog > Breadcrumbs là gì?

2. Breadcrumb thể hiện thuộc tính Breadcrumb là gì

Đây là loại thanh điều hướng gồm các đường link theo thuộc tính nào đó, chẳng hạn như thuộc tính của sản phẩm. Thường được ứng dụng khi lọc sản phẩm theo các tiêu chí cụ thể. Tương ứng với mỗi tiêu chí là một đường link đến 1 nhóm sản phẩm có cùng tiêu chí đó.

Chẳng hạn, khi lọc kết quả tìm kiếm trên website sàn giao dịch xe hơi Carly.vn:

Bạn dễ dàng thấy rằng, thanh breadcrumbs này đang thể hiện những chiếc ô tô Ford Everest Titanium 2.2L, mới, bán tại Bình Dương. Như vậy, nếu người dùng muốn bỏ tiêu chí nào thì chỉ cần nhấn vào nút x là sẽ được kết quả mới. Hoặc cũng thể nhấp vào đường link tương ứng để tìm các sản phẩm cùng loại tương ứng.

Thông thường, loại này kết hợp với loại breadcrumb thứ nhất (theo cấu trúc phân tầng), để tăng hiệu quả tối ưu trải nghiệm với người dùng. Có thể thấy rõ trong trang web 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 các thuộc tính xe.

breadcrumb là gì

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

Loại này liệt kê các 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 chuyện cổ tích đã dùng để rải trên đường để đánh dấu đường đi.

Về chức năng, loại này hoạt động tương tự như nút Back và Forward trên trình duyệt. Cũng vì vậy, mà loại này hiện rất hiếm khi được sử dụng.

Ưu điểm của website khi sử dụng breadcrumb là gì?

Những website cũ trước đây, ở dạng đơn giản, bạn không thấy nhiều trang dùng breadcrumbs. Nhưng đến nay, đa số web hiện tại, nhất là những trang có quy mô lớn, kết cấu phân loại thành nhiều tầng nội dung, thì việc sử dụng hợp lý thanh điều hướng phụ này sẽ đem lại nhiều tác 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 có thể 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 xuất hiện 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 phần vào việc cải thiện trải nghiệm người dùng, cũng là 1 trong các cách làm SEO hiệu quả.

breadcrumb là gì

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ự.

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 các bài viết khác tương tự trong Blog, thì chỉ cần nhấp vào link đó, sẽ tìm được toàn bộ các bài viết trong thư mục.

Rõ ràng, việc bố trí 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 di chuyển và tìm kiếm được dễ dàng và thuận tiện hơn. Từ đó cải thiện trải nghiệm 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ờ kết 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 khả năng nếu họ quan tâm thì sẽ tiếp tục nhấp vào đường link trong breadcrumbs để tìm đến trang danh mục ở cấp độ cao hơn, để tìm những trang có nội dung tương tự 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 chí SEO rất quan trọng: giảm tỷ lệ bỏ trang trung bình của site.

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

Breadcrumbs không chỉ có tác dụng tích cực với người dùng, mà còn cả với các công cụ tìm kiếm.

Thực tế, Google đánh giá cao việc sử dụng thanh điều hướng breadcrumbs này một cách hợp lý. Nghĩa là công cụ này có thể ảnh hưởng tích cực đến thứ hạng trên kết quả tìm kiếm (chính là mục đích của SEO).

Làm thế nào tối ưu Breadcrumb cho website? Breadcrumb là gì

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.

breadcrumb là gì

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:

1. 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,…

2. 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.

3. 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.

4. 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 đủ.

Các tìm kiếm liên quan đến breadcrumb là gì

  • breadcrumbs
  • cách làm breadcrumb
  • bread crumbs mua ở đâu
  • breadcrumb css
  • breadcrumb wordpress
  • breadcrumb navigation
  • breadcrumb bootstrap là gì
  • google breadcrumbs

 

Related Articles

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Back to top button