Breadcrumbs Là Gì? Cách Breadcrumbs đưa website lên Top

Breadcrumbs hay còn gọi là đường dẫn điều hướng, là một thành phần quan trọng trong thiết kế website. Chúng giúp người dùng biết được vị trí hiện tại của mình trong cấu trúc của website.

Trong bài viết này, chúng ta sẽ tìm hiểu sâu hơn về breadcrumbs là gì, vai trò của chúng đối với trải nghiệm người dùng (UX) và tối ưu hóa công cụ tìm kiếm (SEO), cách thiết kế và triển khai breadcrumbs tối ưu cho website.

I. Breadcrumbs là gì?

Breadcrumbs hay còn gọi là đường dẫn điều hướng, vết mòn breadcrumbs, chỉ báo đường dẫn, là một thành phần quan trọng trong thiết kế website. Chúng là một chuỗi các liên kết cho phép người dùng biết được vị trí hiện tại của họ trong cấu trúc của website.

Ví dụ: Trang chủ > Sản phẩm > Điện thoại > iPhone 14 Pro Max


Trong ví dụ trên, breadcrumbs cho người dùng biết họ đang ở trang chi tiết sản phẩm iPhone 14 Pro Max, thuộc danh mục Điện thoại, thuộc nhóm Sản phẩm.

Cái tên “breadcrumbs” bắt nguồn từ câu chuyện cổ tích Hansel và Gretel, trong đó hai đứa trẻ rải những mẩu bánh mì dọc đường để tìm lại đường về nhà. Tương tự, breadcrumbs trong website cũng đóng vai trò là “dấu vết” giúp người dùng tìm lại đường đi trong website.

⇒ Tối ưu cấu trúc: Breadcrumbs, Schema

II. Tại sao nên sử dụng Breadcrumbs?

Có 2 lý do chính khiến breadcrumbs trở thành một thành phần không thể thiếu trong thiết kế website:

Thứ nhất, breadcrumbs cải thiện trải nghiệm người dùng (UX) bằng cách:

• Giúp người dùng xác định vị trí hiện tại trong cấu trúc website
• Cho phép điều hướng dễ dàng giữa các trang
• Giảm số lượng click và thao tác cần thiết để quay lại các trang cấp cao
• Giảm tỷ lệ thoát trang (bounce rate)

Thứ hai, breadcrumbs có tác động tích cực đến SEO thông qua:

• Tăng số lượng anchor text có chứa từ khóa quan trọng
• Xuất hiện trong kết quả tìm kiếm (SERP), thu hút người dùng click vào website của bạn

Như vậy, việc bổ sung breadcrumbs vào website vừa tốt cho người dùng, vừa tốt cho việc tối ưu hóa công cụ tìm kiếm.

III. Các loại Breadcrumbs

Có 3 loại breadcrumbs phổ biến:

1. Location-based breadcrumbs

Location-based breadcrumbs (hay còn gọi là hierarchical breadcrumbs) dựa trên cấu trúc phân cấp của website để cho biết vị trí hiện tại của người dùng.

Ưu điểm:

• Dễ triển khai
• Cho phép người dùng dễ dàng xác định vị trí trong cây thư mục website

Nhược điểm:

• Có thể trở nên không nhất quán nếu cấu trúc website thay đổi

Ví dụ Location-based breadcrumbs: Trang chủ > Laptop > Asus > Asus Zenbook Pro Duo

⇒ Tối ưu thẻ Meta: Meta title, Meta Keywords, Meta Description

2. Attribute-based breadcrumbs

Attribute-based breadcrumbs dựa trên các thuộc tính hoặc đặc điểm của sản phẩm/nội dung thay vì cấu trúc phân cấp của website.

Ưu điểm:

• Có thể cung cấp thông tin hữu ích hơn so với location-based breadcrumbs

Nhược điểm:

• Khó triển khai hơn
• Có thể dẫn đến breadcrumbs quá dài

Ví dụ attribute-based breadcrumbs: Trang chủ > Laptop > HDD 1TB > RAM 16GB > Asus Zenbook Pro Duo

3. Path-based breadcrumbs

Path-based breadcrumbs thể hiện lịch sử điều hướng của người dùng thay vì cấu trúc website.

Ưu điểm:

• Không yêu cầu cấu trúc website cụ thể nào

Nhược điểm:

• Khó dự đoán và không ổn định
• Không cho phép người dùng xác định vị trí trong cây website

Ví dụ path-based breadcrumbs: Trang chủ > Laptop gaming > Laptop văn phòng > Laptop 2 in 1 > Asus Zenbook Pro Duo


Nhìn chung, location-based breadcrumbs là lựa chọn phổ biến và được khuyến nghị sử dụng nhất vì đơn giản, dễ triển khai và mang lại nhiều lợi ích nhất.

IV. Breadcrumbs có vai trò gì đối với UX và SEO?

1. Ảnh hưởng tới trải nghiệm người dùng (UX)

Breadcrumbs có tác động tích cực đến trải nghiệm người dùng (UX) thông qua các cách sau:

• Giúp người dùng xác định vị trí hiện tại: Breadcrumbs cho phép người dùng biết được họ đang ở đâu trong cấu trúc website. Điều này giúp họ dễ dàng định hướng và tìm kiếm thông tin.
• Giảm số lượng click và thao tác cần thiết: Thay vì phải click nhiều lần để quay lại các trang cấp cao, người dùng có thể dễ dàng điều hướng ngược lại cấu trúc website thông qua breadcrumbs.
• Giảm tỷ lệ thoát trang: Breadcrumbs khuyến khích người dùng khám phá thêm nội dung liên quan trên website thay vì thoát ngay sau khi xem xong một trang. Điều này giúp giảm tỷ lệ thoát trang.
• Tăng khả năng quay lại: Người dùng có thể dễ dàng quay lại các trang đã xem trước đó nhờ vào breadcrumbs, thay vì phải nhớ và tìm lại các trang đó.
• Cải thiện trải nghiệm người dùng: Nhờ khả năng định vị, điều hướng và tìm kiếm thông tin dễ dàng hơn, breadcrumbs giúp cải thiện trải nghiệm người dùng một cách tổng thể trên website.

Như vậy, có thể thấy breadcrumbs đóng vai trò quan trọng trong việc nâng cao trải nghiệm người dùng, đặc biệt là trên các website có cấu trúc phức tạp, nhiều cấp độ thông tin. Do đó, các nhà thiết kế website cũng như chuyên gia SEO nên chú trọng tới việc thiết kế và tối ưu hóa breadcrumbs.

2. Ảnh hưởng tới SEO

Bên cạnh ảnh hưởng tích cực tới trải nghiệm người dùng, breadcrumbs cũng có tác động đáng kể đến hiệu quả SEO của website, cụ thể:

• Tăng số lượng anchor text chứa từ khóa: Mỗi liên kết trong breadcrumbs đều có thể chứa anchor text là các từ khóa then chốt. Điều này giúp website có nhiều anchor text từ khóa hơn.
• Xuất hiện trong kết quả tìm kiếm (SERP): Trên một số kết quả tìm kiếm, đường dẫn breadcrumbs có thể được hiển thị ngay dưới tiêu đề. Điều này giúp thu hút sự chú ý của người dùng và tăng khả năng click vào website.
• Giúp crawler hiểu bố cục và nội dung website: Thông qua breadcrumbs, các công cụ crawl như Googlebot sẽ dễ dàng hình dung và hiểu rõ hơn về cấu trúc cũng như nội dung của các trang web. Điều này có thể giúp website được xếp hạng cao hơn.
• Giảm tỷ lệ thoát trang và tăng thời gian trên trang: Nhờ khả năng điều hướng và khám phá thông tin dễ dàng, người dùng có xu hướng ở lại trang web lâu hơn và ít bỏ đi ngay. Đây là hai yếu tố quan trọng ảnh hưởng tới thứ hạng trang web.

Như vậy, có thể thấy bổ sung breadcrumbs không chỉ tốt cho người dùng mà còn mang lại hiệu quả SEO đáng kể. Vì thế, các chuyên gia SEO khuyên các nhà thiết kế website và chủ doanh nghiệp nên chú trọng triển khai tối ưu hóa breadcrumbs.

V. Bao gồm Breadcrumbs trong thiết kế website

Để bổ sung breadcrumbs vào website, các nhà thiết kế và lập trình web có thể áp dụng các cách sau:

Cách 1: Sử dụng HTML thuần

• Bước 1: Thêm thẻ <ol> để bắt đầu danh sách có thứ tự cho breadcrumbs
• Bước 2: Thêm thẻ <li> cho mỗi phần tử (mục) trong breadcrumbs
• Bước 3: Thẻ <a> bên trong mỗi thẻ <li> sẽ chứa liên kết đến trang tương ứng
• Bước 4: Sử dụng ký tự đặc biệt (vd: >) để ngăn cách giữa các liên kết

Cách 2: Sử dụng Javascript hoặc thư viện có sẵn

Các thư viện Javascript như BreadcrumbList hay BreadcrumbTrail cho phép tạo breadcrumbs đơn giản và tiện lợi hơn so với HTML thuần. Các nhà phát triển chỉ việc cài đặt và cấu hình các tham số đầu vào là có thể tạo ra breadcrumbs một cách tự động.

Cách 3: Tích hợp breadcrumbs ngay từ giao diện website

Đối với các website sử dụng các nền tảng như WordPress hay Shopify, nhà thiết kế có thể tìm và cài đặt các plugin/extension cho phép tạo breadcrumbs một cách tự động dựa trên cấu trúc trang hiện tại mà không cần can thiệp vào code.

Nhìn chung, tùy thuộc vào đặc điểm và nền tảng của website mà nhà thiết kế có thể lựa chọn cách bổ sung breadcrumbs sao cho phù hợp và tiện lợi nhất.

VI. Cách triển khai Breadcrumbs tối ưu

Sau khi đã bổ sung breadcrumbs vào website, điều tiếp theo cần làm là tối ưu hóa chúng để đảm bảo mang lại hiệu quả cao nhất. Dưới đây là một số cách triển khai breadcrumbs tối ưu:

1. Sử dụng HTML

• Sử dụng thẻ <ol> và <li> để đánh dấu cấu trúc danh sách
• Thêm thuộc tính , itemtype và itemprop cho các thẻ HTML
• Sử dụng ký tự đặc biệt > để ngăn cách giữa các liên kết

Ưu điểm: Đơn giản, dễ triển khai và không yêu cầu JavaScript.

Nhược điểm: Khó kiểm soát và tùy chỉnh giao diện hiển thị.

2. Sử dụng Structured Data Markup

Các định dạng Structured Data như JSON-LD, Microdata hay RDFa giúp các công cụ tìm kiếm (vd Google) hiểu rõ hơn về nội dung và ngữ nghĩa của trang web.

Do đó, kết hợp Structured Data sẽ giúp tối ưu hóa breadcrumbs hiệu quả:

• Cho phép công cụ tìm kiếm hiểu rõ hơn về cấu trúc và nội dung của trang
• Tăng khả năng xuất hiện breadcrumbs trong kết quả tìm kiếm (SERP)
• Thu hút sự chú ý của người dùng nhờ hiển thị đẹp mắt dưới dạng Rich Snippet
• Giúp crawler dễ dàng hình dung cấu trúc website và đánh giá nội dung chính xác hơn

Một số định dạng Structured Data phổ biến để áp dụng cho breadcrumbs bao gồm:

a. JSON-LD

JSON-LD (JavaScript Object Notation for Linked Data) sử dụng cú pháp JSON để mã hóa dữ liệu. Đây là định dạng được Google ưu tiên sử dụng.

Ưu điểm:

• Dễ đọc, dễ hiểu và dễ cập nhật
• Tương thích tốt với các ngôn ngữ lập trình web phổ biến

Nhược điểm:

• Yêu cầu kiến thức lập trình để triển khai

b. Microdata

Microdata sử dụng các thuộc tính HTML để đánh dấu cấu trúc dữ liệu trong trang web.

Ưu điểm:

• Dễ triển khai ngay trong HTML mà không cần code thêm
• Không ảnh hưởng tới CSS và JavaScript

Nhược điểm:

• Bị giới hạn về khả năng thể hiện cấu trúc dữ liệu phức tạp

c. RDFa

RDFa (Resource Description Framework in Attributes) cũng sử dụng thuộc tính mở rộng của HTML để mã hóa dữ liệu.

Ưu điểm:

• Dễ dàng nhúng vào HTML
• Có thể diễn đạt được cấu trúc dữ liệu phức tạp

Nhược điểm:

• Cú pháp phức tạp, khó hiểu đối với người mới

Nhìn chung, tùy thuộc vào nhu cầu và năng lực triển khai mà lựa chọn định dạng Structured Data phù hợp. JSON-LD được khuyến nghị sử dụng nhiều nhất hiện nay nhờ tính linh hoạt và khả năng thể hiện dữ liệu mạnh mẽ.

3. Kiểm tra Structured Data Markup

Sau khi áp dụng Structured Data cho breadcrumbs, bước quan trọng tiếp theo là kiểm tra tính hợp lệ của markup. Có một số cách để kiểm tra:

• Sử dụng công cụ Test Structured Data của Google: Cho phép nhập trực tiếp đoạn mã và nhận kết quả kiểm tra tức thì.
• Cài đặt các tiện ích mở rộng trình duyệt: Ví dụ như Structured Data Linter, JSON Lint,… giúp kiểm tra ngay trên trang web mà không cần nhập mã.
• Sử dụng công cụ phân tích HTML như Screaming Frog: Cho phép quét toàn bộ site và phát hiện các vấn đề tiềm ẩn về structured data.
• Kiểm tra trực tiếp trên Google: Tìm kiếm site của bạn và bấm vào nút xem trước structured data bên dưới, nếu Google có thể đọc được thì markup đã đúng.

Việc kiểm tra thường xuyên giúp đảm bảo rằng các công cụ tìm kiếm có thể hiểu và sử dụng dữ liệu mà bạn cung cấp để tối ưu hóa kết quả. Điều này sẽ giúp tăng hiệu quả SEO của breadcrumbs.

⇒ Kĩ thuật content seo: Viết bài chuẩn SEO, tối ưu Heading, tăng organic traffic

VII. Một số lỗi thường gặp khi triển khai Breadcrumbs

Mặc dù rất hữu ích, breadcrumbs cũng tiềm ẩn một số lỗi thường gặp nếu không được thiết kế và triển khai đúng cách:

• Breadcrumbs quá dài: Nếu chứa quá nhiều liên kết trong một dòng, breadcrumbs sẽ bị rối và khó đọc. Người dùng cũng sẽ mất nhiều thời gian hơn để định hướng.
• Thiếu liên kết: Một số mục trong breadcrumbs không chứa liên kết dẫn đến trang tương ứng, khiến chúng trở nên vô dụng.
• Sai thứ tự cấp bậc: Các mục không được sắp xếp theo đúng thứ tự cấp bậc từ cao xuống thấp theo cấu trúc website.
• Không nhất quán giữa các trang: Mỗi trang lại có một kiểu hiển thị breadcrumbs khác nhau, tạo cảm giác rời rạc cho người dùng.
• Lạm dụng từ khóa: Nhồi nhét quá nhiều từ khóa vào các liên kết, làm mất đi mục đích thực sự của breadcrumbs.

Để tránh các lỗi trên, nhà thiết kế cần tuân thủ một số nguyên tắc cơ bản khi thiết kế breadcrumbs:

• Giới hạn độ dài ở 5-7 liên kết
• Luôn cung cấp liên kết cho mọi mục
• Sắp xếp chính xác theo thứ tự cấp bậc
• Duy trì sự nhất quán trên toàn website
• Tránh lạm dụng từ khóa

VIII. Cách tối ưu hóa Breadcrumbs

Sau đây là một số lưu ý quan trọng giúp tối ưu hóa breadcrumbs:

• Lựa chọn vị trí hiển thị hợp lý: Thường đặt ở phía trên cùng của trang, ngay dưới thanh tiêu đề. Tránh đặt chìm dưới nội dung.
• Giới hạn độ dài hợp lý: 5-7 mục là lý tưởng. Nhiều hơn sẽ làm cho breadcrumbs bị rối.
• Sử dụng separator phù hợp: Ký tự separator phổ biến là > hoặc /. Đảm bảo sử dụng nhất quán trên toàn site.
• Chú trọng tốc độ: Giảm thiểu số lượng yêu cầu HTTP bằng cách lưu vào cache hoặc tạo static file.
• Tối ưu hóa cho mobile: Giảm kích thước font, padding/margin phù hợp với màn hình nhỏ.
• Áp dụng structured data: Giúp công cụ tìm kiếm hiểu rõ hơn nội dung và ngữ nghĩa.
• Kiểm tra và khắc phục lỗi: Đảm bảo breadcrumbs hoạt động chính xác trên mọi thiết bị và trang. Sử dụng công cụ kiểm tra để phát hiện vấn đề tiềm ẩn.
• Tối ưu hóa cho thiết bị di động: Với thiết bị di động, nên giảm kích thước phông chữ, đệm lề phù hợp để breadcrumbs không chiếm quá nhiều không gian màn hình.
• Cập nhật thường xuyên: Đảm bảo rằng breadcrumbs luôn phản ánh chính xác cấu trúc và nội dung trang web. Cập nhật nếu có thay đổi lớn về cấu trúc site.

Tuân thủ các nguyên tắc trên sẽ giúp breadcrumbs hoạt động hiệu quả, tối ưu trải nghiệm người dùng và đóng góp vào thành công của chiến dịch SEO.

Câu hỏi thường gặp

Dưới đây là một số câu hỏi thường gặp liên quan đến breadcrumbs:

• Câu hỏi: Breadcrumbs có bắt buộc phải có trên website không?

Trả lời: Không bắt buộc. Tuy nhiên, breadcrumbs mang lại nhiều lợi ích cho người dùng cũng như SEO nên được khuyến khích bổ sung. Đặc biệt hữu ích với các website có cấu trúc phức tạp, nhiều cấp độ thông tin.

• Câu hỏi: Nên đặt breadcrumbs ở đâu trên trang?

Trả lời: Vị trí lý tưởng là phía trên cùng của trang, ngay dưới thanh tiêu đề. Điều này giúp người dùng dễ nhận thấy và sử dụng breadcrumbs để định hướng.

• Câu hỏi: Có bao nhiêu mục là lý tưởng cho một breadcrumbs?

Trả lời: Độ dài lý tưởng là 5-7 mục. Quá nhiều sẽ khiến breadcrumbs trở nên rối rắm, khó sử dụng. Ít hơn 5 mục có thể chưa đủ để thể hiện rõ ràng cấu trúc website.

• Câu hỏi: Tại sao breadcrumbs lại quan trọng với SEO?

Trả lời: Breadcrumbs giúp cải thiện trải nghiệm người dùng, tăng thời gian trên trang, giảm tỷ lệ thoát. Đồng thời chúng cung cấp thêm các đường dẫn nội bộ chứa từ khóa giúp SEO. Breadcrumbs còn có thể xuất hiện trong kết quả tìm kiếm.

• Câu hỏi: Làm thế nào để tối ưu hóa breadcrumbs?

Trả lời: Một số cách tối ưu hóa breadcrumbs bao gồm: lựa chọn vị trí hiển thị hợp lý, giới hạn độ dài, sử dụng separator phù hợp, tối ưu hóa tốc độ, áp dụng structured data, kiểm tra và khắc phục lỗi,…

Tóm tắt

• Breadcrumbs là một chuỗi các liên kết giúp người dùng xác định vị trí hiện tại trong cấu trúc website.
• Chúng mang lại nhiều lợi ích cho người dùng như: định hướng dễ dàng, giảm số click/thao tác điều hướng, giảm tỷ lệ thoát trang,…
• Đồng thời, breadcrumbs cũng có tác động tích cực đến SEO thông qua việc:
  • Tăng số lượng anchor text chứa từ khóa
  • Xuất hiện trong kết quả tìm kiếm
  • Giúp crawler hiểu rõ hơn cấu trúc website
• Có 3 loại breadcrumbs phổ biến: location-based, attribute-based, path-based. Trong đó, location-based được sử dụng nhiều nhất.
• Để tối ưu hóa breadcrumbs, cần lưu ý đến vị trí đặt, độ dài, tốc độ, responsive, structured data,… để đem lại trải nghiệm tốt nhất cho người dùng.

Như vậy, có thể thấy breadcrumbs là một thành phần quan trọng trong thiết kế website, góp phần nâng cao UX và SEO.

Cảm ơn mọi người đã đọc bài viết này từ user.com.vn