Rate this post

Là một thành phần quan trọng trong seo kỹ thuật website. Trên các trang web có nhiều trang, điều hướng breadcrumb có thể cải thiện đáng kể cách người dùng tìm đường. Về khả năng sử dụng, breadcrumbs giảm số lượng hành động mà khách truy cập trang web cần thực hiện để đến trang cấp cao hơn và chúng cải thiện khả năng tìm thấy của các phần và trang của trang web. Chúng cũng là một công cụ hỗ trợ trực quan hiệu quả cho biết vị trí của người dùng trong hệ thống phân cấp của trang web, làm cho nó trở thành nguồn thông tin ngữ cảnh tuyệt vời cho các trang đích.

Các bài viết liên quan:

Tóm tắt nội dung

Breadcrumbs là gì?

“Breadcrumbs ” (hoặc “breadcrumb trail”) là một loại sơ đồ điều hướng phụ giúp hiển thị vị trí của người dùng trong một trang web hoặc ứng dụng Web. Thuật ngữ này xuất phát từ câu chuyện cổ tích Hansel và Gretel, trong đó hai đứa trẻ chủ động đánh rơi những mảnh vụn bánh mì để tạo thành một con đường trở về nhà của chúng. Giống như trong câu chuyện, breadcrumbs trong các ứng dụng trong thế giới thực cung cấp cho người dùng một cách để theo dõi đường dẫn trở lại điểm hạ cánh ban đầu của họ.

Xem thêm điều hướng website

Bạn thường có thể tìm thấy breadcrumbs trong các trang web có lượng lớn nội dung được sắp xếp theo thứ bậc. Bạn cũng thấy chúng trong các ứng dụng Web có nhiều bước, nơi chúng hoạt động tương tự như thanh tiến trình. Ở dạng đơn giản nhất, breadcrumbs là các liên kết văn bản được sắp xếp theo chiều ngang được phân tách bằng ký hiệu “lớn hơn” (>); biểu tượng cho biết cấp độ của trang đó so với các liên kết trang bên cạnh nó.

Trong bài viết này, chúng ta sẽ khám phá việc sử dụng breadcrumb trên các trang web và thảo luận một số phương pháp hay nhất để áp dụng breadcrumb trails cho trang web của riêng bạn.

Khi nào bạn nên sử dụng Breadcrumbs?

Sử dụng điều hướng breadcrumb cho các trang web lớn và các trang web có các trang được sắp xếp theo thứ bậc. Một kịch bản tuyệt vời là các trang web thương mại điện tử, trong đó nhiều loại sản phẩm được nhóm thành các danh mục hợp lý.

Bạn không nên sử dụng breadcrumbs cho các trang web cấp đơn không có phân cấp hoặc nhóm hợp lý. Một cách tuyệt vời để xác định xem liệu một trang web có được hưởng lợi từ điều hướng breadcrumb hay không là xây dựng sơ đồ trang web hoặc sơ đồ đại diện cho kiến trúc điều hướng của trang web, sau đó phân tích xem đường dẫn có cải thiện khả năng điều hướng của người dùng trong và giữa các danh mục hay không.

Điều hướng đường dẫn nên được coi là một tính năng bổ sung và không nên thay thế các menu điều hướng chính hiệu quả. Đó là một tính năng tiện lợi; một sơ đồ điều hướng phụ cho phép người dùng thiết lập vị trí của họ; và một cách thay thế để điều hướng xung quanh trang web của bạn.

Có 3 loại Breadcrumbs

1. Location-based: dựa trên vị trí hiển thị cho người dùng biết họ đang ở đâu trong hệ thống phân cấp của trang web. Chúng thường được sử dụng cho các lược đồ điều hướng có nhiều cấp (thường nhiều hơn hai cấp). Trong ví dụ bên dưới (từ SitePoint), mỗi liên kết văn bản dành cho trang cao hơn một cấp so với trang ở bên phải.

2. Attribute-based: Đường dẫn đường dẫn dựa trên thuộc tính hiển thị các thuộc tính của một trang cụ thể. Ví dụ: trong Newegg, đường dẫn đường dẫn hiển thị các thuộc tính của các mục được hiển thị trên một trang cụ thể:

3. Path-based: Đường dẫn dựa trên đường dẫn hiển thị cho người dùng các bước họ đã thực hiện để đến một trang cụ thể. Đường dẫn dựa trên đường dẫn động ở chỗ chúng hiển thị các trang mà người dùng đã truy cập trước khi đến trang hiện tại.

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

Đây chỉ là một số lợi ích của việc sử dụng đường dẫn breadcrumb.

Thuận tiện cho người dùng: Breadcrumbs được sử dụng chủ yếu để cung cấp cho người dùng một phương tiện phụ để điều hướng trang web. Bằng cách cung cấp đường dẫn breadcrumb cho tất cả các trang trên một trang web nhiều cấp lớn, người dùng có thể điều hướng đến các danh mục cấp cao hơn dễ dàng hơn. Xem thêm ux là gì

Giảm số lần nhấp hoặc hành động để quay lại các trang cấp cao hơn: Thay vì sử dụng nút “Quay lại” của trình duyệt hoặc điều hướng chính của trang web để quay lại trang cấp cao hơn, giờ đây người dùng có thể sử dụng đường dẫn với số lần nhấp ít hơn.

Thường không làm giảm không gian màn hình: Bởi vì chúng thường được định hướng theo chiều ngang và được tạo kiểu đơn giản, đường dẫn đường dẫn không chiếm nhiều không gian trên trang. Lợi ích là chúng có ít hoặc không có tác động tiêu cực về mặt quá tải nội dung và chúng vượt trội hơn bất kỳ tiêu cực nào nếu được sử dụng đúng cách.

Giảm tỷ lệ thoát: Các đường mòn theo đường dẫn có thể là một cách tuyệt vời để thu hút khách truy cập lần đầu tiên xem qua trang web sau khi đã xem trang đích. Ví dụ: giả sử một người dùng truy cập một trang thông qua tìm kiếm của Google, việc nhìn thấy đường dẫn đường dẫn có thể cám dỗ người dùng đó nhấp vào các trang cấp cao hơn để xem các chủ đề sở thích có liên quan. Điều này làm giảm tỷ lệ thoát tổng thể của trang web.

Xem thêm 10 bước cải thiện ux

Google yêu thích chúng:Khách truy cập của bạn thích breadcrumbs, nhưng Google cũng vậy. Chúng cung cấp cho Google một cách khác để tìm ra cách trang web của bạn được cấu trúc, nhưng, như đã đề cập trước đó, Google cũng có thể sử dụng chúng trong các kết quả tìm kiếm thực tế, điều này làm cho kết quả của bạn hấp dẫn hơn nhiều đối với người dùng. Để tăng cơ hội đường dẫn của bạn xuất hiện trên Google, bạn cần thêm dữ liệu có cấu trúc giống như Yoast SEO.

Chúng nâng cao trải nghiệm người dùng:Mọi người ghét bị lạc. Khi gặp một địa điểm mới, mọi người thường nhìn xung quanh để tìm kiếm các đồ vật hoặc địa danh dễ nhận biết – và điều này cũng đúng với các trang web. Bạn cần giữ cho khách truy cập vui vẻ và giảm thiểu xích mích càng nhiều càng tốt. Breadcrumbs có thể giúp ích cho trải nghiệm người dùng của bạn vì chúng là một phần tử giao diện phổ biến giúp mọi người ngay lập tức tìm ra lối thoát. Không cần phải nhấp vào nút quay lại!

Xem thêm tối ưu ux và ui

Sai lầm khi triển khai Breadcrumbs

Sử dụng đường dẫn breadcrumb là một việc khá đơn giản và chỉ có một số nguyên tắc cần xem xét trước khi quyết định triển khai chúng trên một trang web. Hãy cùng xem một số sai lầm phổ biến cần tránh.

Sử dụng Breadcrumbs khi bạn không cần thiết.

Trong ví dụ trên, Slicethepie có nguy cơ khiến người dùng choáng ngợp với quá nhiều tùy chọn điều hướng. (1) điều hướng chính, (2) đường mòn breadcrumb và (3) điều hướng phụ nằm rất gần nhau. Đường dẫn breadcrumb trong ứng dụng này không mang lại cho người dùng sự tiện lợi nào vì điều hướng phụ cho các trang cấp thấp hơn nằm ngay bên dưới nó. Ngoài ra, việc nhấp vào liên kết cấp thứ hai trong đường dẫn breadcrumb (“Music”) sẽ đưa bạn trở lại tab đầu tiên (“Listen”), điều này nhầm tưởng rằng tab đầu tiên nằm ở cấp cao hơn hai tab còn lại (“Find” Và “Artist hall of fame ”).

Sử dụng đường dẫn đường dẫn làm điều hướng chính Như đã nêu trước đó, hãy sử dụng đường dẫn đường dẫn làm phương tiện hỗ trợ tùy chọn để điều hướng.

Sử dụng breadcrumbs làm điều hướng chính

Trong ví dụ trên, mefeedia không cung cấp menu điều hướng chính để xem video. Mặc dù có điều hướng liên kết văn bản trong phần chân trang, nhưng không có menu điều hướng trong phần nội dung của trang, khiến việc điều hướng đến các phần khác của trang web trở nên khó khăn.

Nếu bạn truy cập trực tiếp vào một trang video – chẳng hạn như thông qua kết quả tìm kiếm của Google – tùy chọn điều hướng duy nhất mà bạn có thể có là đường dẫn breadcrumb. Hoặc nếu bạn đã duyệt các trang của một trang web và đến một trang không hiển thị menu điều hướng chính, bạn sẽ phải nhấn vào nút “Quay lại” trong trình duyệt của mình để truy cập menu chính.

Sử dụng breadcrumbs khi trang có nhiều danh mục Đường dẫn đường dẫn có cấu trúc tuyến tính, vì vậy việc sử dụng chúng sẽ khó khăn nếu các trang của bạn không thể được phân loại thành các danh mục gọn gàng. Quyết định có sử dụng breadcrumbs hay không phần lớn phụ thuộc vào cách bạn đã thiết kế hệ thống phân cấp trang web của mình. Khi một trang cấp thấp hơn (hoặc có thể được đặt) trong nhiều danh mục mẹ, các đường dẫn đường dẫn không hiệu quả, không chính xác và gây nhầm lẫn cho người dùng.

Xem thêm seo category

Cân nhắc thiết kế điều hướng Breadcrumb

Khi thiết kế một lược đồ điều hướng breadcrumb, hãy ghi nhớ một số điều. Hãy xem một số câu hỏi có thể nảy sinh khi bạn làm việc với breadcrumbs.

Cái gì nên được sử dụng để tách các mục liên kết? Biểu tượng thường được chấp nhận và dễ nhận biết nhất để phân tách các siêu liên kết trong đường mòn breadcrumb là biểu tượng “lớn hơn” (>). Thông thường, dấu> được sử dụng để biểu thị thứ bậc, như trong định dạng của Danh mục mẹ> Danh mục con.

Các ký hiệu khác được sử dụng là mũi tên trỏ sang phải, dấu ngoặc kép góc phải (») và dấu gạch chéo (/).

Sự lựa chọn phụ thuộc vào tính thẩm mỹ của trang web và loại breadcrumb được sử dụng. Ví dụ: đối với các đường dẫn dựa trên đường dẫn trong đó các liên kết không nhất thiết phải có mối quan hệ thứ bậc với nhau, việc sử dụng ký hiệu “lớn hơn” có thể không truyền tải chính xác mối quan hệ của chúng.

Breadcrumbs có thể to đến cỡ nào? Bạn không muốn breadcrumbs quá lớn sơ với trang. Một đường mòn breadcrumb chỉ hoạt động như một trợ giúp cho người dùng (một sự tiện lợi); kích thước của nó phải chuyển tải điều này đến người dùng và do đó ít nhất phải nhỏ hơn hoặc ít nổi bật hơn so với menu điều hướng chính.

Một nguyên tắc nhỏ cần tuân thủ khi định kích thước đường dẫn breadcrumb là nó không nên là mục đầu tiên thu hút sự chú ý của người dùng khi truy cập vào một trang.

Breadcrumbs nên được đặt ở đâu? Đường dẫn đường dẫn thường được hiển thị ở nửa trên của trang, bên dưới menu điều hướng chính nếu sử dụng bố cục menu ngang.

Xem thêm xây dựng liên kết nội bộ

Breadcrumb Showcase

Bây giờ chúng ta đã thảo luận về ai, cái gì, khi nào, ở đâu, tại sao và như thế nào của đường mòn breadcrumb, chúng ta nên xem một số ví dụ trực tiếp. Trong phần sau, bạn sẽ tìm thấy một vài ví dụ về các trang web tuyệt vời sử dụng đường dẫn đường dẫn.

Đọc thêm: Cấu trúc trang web