Breadcrumb là gì và vì sao web nào cũng nên có

Hỏi mười chủ web thì chắc bảy người không để ý đến cái dòng nhỏ xíu nằm ngay dưới menu, kiểu "Trang chủ > Dịch vụ > Thiết kế web". Nó chẳng lòe loẹt, chẳng kêu gọi gì, nhưng lại là một trong những thứ làm web tử tế lên thấy rõ. Breadcrumb là gì? Đó là dải điều hướng phân cấp (đường dẫn từng cấp dẫn về vị trí hiện tại của khách), giúp người xem biết mình đang đứng ở đâu trong website và quay lui dễ dàng mà không phải bấm nút back liên tục.

Mình làm web hơn chục năm, gặp không ít trang bài viết nằm sâu ba bốn lớp mà khách vào đọc xong là... mắc kẹt. Không biết đường nào trở ra, không biết bài này thuộc nhóm gì. Breadcrumb sinh ra để giải đúng cái khó đó. Nó nhỏ nhưng làm thay đổi hẳn cảm giác "web này có người chăm" hay "web này dựng cho có".

Breadcrumb thực ra là cái gì

Từ "breadcrumb" dịch nôm na là "vụn bánh mì", mượn từ truyện cổ tích Hansel và Gretel — hai đứa trẻ rải vụn bánh dọc đường để tìm lối về. Áp vào web, nó là một dãy liên kết xếp theo cấp, mỗi cấp cách nhau bằng dấu mũi tên hoặc gạch chéo:

Trang chủ > Tin tức > Kiến thức làm web > Bài bạn đang đọc

Mỗi mục trong dãy (trừ mục cuối là trang hiện tại) đều bấm được, đưa khách về đúng tầng đó. Mục cuối thường để chữ thường, không phải link, vì khách đang ở ngay chỗ ấy rồi.

Có ba kiểu breadcrumb hay gặp, và phân biệt được chúng giúp bạn chọn đúng cho web của mình:

• Theo cấu trúc web (hierarchy): phổ biến nhất, phản ánh cây thư mục của site — Trang chủ > Danh mục cha > Danh mục con > Trang hiện tại. Đây là kiểu nên dùng cho gần như mọi website.
• Theo thuộc tính (attribute): hay thấy ở trang bán hàng, lọc theo đặc điểm sản phẩm — Trang chủ > Giày > Nam > Size 42.
• Theo lịch sử (history): hiển thị các trang khách vừa đi qua, kiểu "trang trước đó". Kiểu này ít dùng vì nó trùng vai với nút back của trình duyệt và dễ gây rối.

Đa số trường hợp, bạn chỉ cần kiểu đầu tiên. Đơn giản, rõ ràng, và đó cũng là kiểu Google ưa.

Nó giúp gì cho khách và cho Google

Breadcrumb đứng đúng giao điểm của hai thứ mà mọi web đều cần: trải nghiệm người dùng và SEO.

Phía khách, lợi ích dễ thấy nhất là định vị. Vào một trang sản phẩm sâu trong web, liếc lên dòng breadcrumb là biết ngay sản phẩm này thuộc nhóm nào, nhóm đó thuộc danh mục lớn nào. Muốn xem thêm sản phẩm cùng loại? Bấm vào tên danh mục cha là xong, khỏi cuộn lên menu mò mẫm. Cái này đặc biệt quan trọng với khách vào web từ Google — họ đáp thẳng vào một trang con chứ không qua trang chủ, nên breadcrumb là cái duy nhất cho họ biết "à, web này còn những gì khác".

Phía Google, breadcrumb làm hai việc quan trọng. Một là giúp con bọ của Google (Googlebot — chương trình tự động đi đọc web) hiểu cấu trúc phân tầng của site, biết trang nào là con của trang nào. Hai là khi bạn gắn đúng dữ liệu có cấu trúc (schema — đoạn mã đánh dấu cho máy hiểu nội dung), Google có thể thay dòng URL dài ngoằng trên kết quả tìm kiếm bằng chính dải breadcrumb đẹp đẽ kiểu "thietkewebgiare.dev > Kiến thức > Breadcrumb". Nhìn chuyên nghiệp hơn hẳn, và thường được bấm nhiều hơn.

Breadcrumb cũng là một dạng internal link (liên kết nội bộ — link giữa các trang trong cùng web) tự nhiên. Mỗi dòng breadcrumb là vài liên kết trỏ ngược về danh mục cha, giúp phân bổ "sức mạnh" trang đều hơn trong toàn bộ web. Đây chính là một mảnh ghép của việc làm website chuẩn SEO ngay từ khâu dựng cấu trúc, chứ không phải thứ chắp vá về sau.

Khi nào nên dùng, khi nào không cần

Không phải web nào cũng bắt buộc có breadcrumb. Quy tắc của mình rất đơn giản: web càng nhiều tầng, càng nhiều trang, thì breadcrumb càng đáng giá.

• Nên dùng: web bán hàng nhiều danh mục, web tin tức/blog nhiều chuyên mục, web doanh nghiệp có nhiều lớp dịch vụ con. Nói chung là khi nội dung tổ chức theo cây có từ ba tầng trở lên.
• Không cần thiết: landing page một trang (one-page), web cực nhỏ chỉ vài trang phẳng nằm ngang nhau. Gắn breadcrumb vào mấy web này chỉ tổ thừa, vì có tầng nào đâu mà chỉ.

Một lưu ý mình hay nhắc khách: breadcrumb bổ sung cho menu chính chứ không thay thế. Nhiều người tưởng có breadcrumb rồi thì menu làm sơ sài cũng được — không phải. Menu là để khám phá toàn web, breadcrumb là để định vị trang hiện tại. Hai vai khác nhau.

Đặt breadcrumb ở đâu trên trang

Chỗ đặt nghe đơn giản nhưng đặt sai là hỏng. Vị trí chuẩn mà gần như mọi web tử tế đều dùng: ngay dưới phần đầu trang (header/menu), nằm trên tiêu đề chính của trang. Đó là vùng mắt người đọc lướt qua đầu tiên khi muốn biết "mình đang ở đâu".

Vài điều cần tránh khi đặt:

• Đừng nhét breadcrumb xuống tận chân trang (footer) — đặt ở đó thì còn nghĩa lý gì, vì khách phải cuộn hết bài mới thấy.
• Đừng làm chữ quá to chen lấn tiêu đề. Breadcrumb là phụ, cỡ chữ nhỏ hơn nội dung, màu nhạt hơn một chút để nó khiêm tốn đúng vai.
• Trên điện thoại, nếu breadcrumb quá dài thì cho phép cuộn ngang hoặc rút gọn các tầng giữa bằng dấu "...", đừng để nó xuống dòng lung tung làm vỡ bố cục.
• Dùng dấu phân cách nhất quán toàn web — chọn ">" thì dùng ">" khắp nơi, đừng chỗ này mũi tên chỗ kia gạch chéo.

Một mẹo nhỏ: dấu phân cách (>, /, mũi tên) nên đưa vào bằng CSS chứ đừng gõ thẳng vào nội dung chữ. Lý do là khi gắn schema, bạn chỉ muốn máy đọc tên từng tầng, không muốn nó đọc luôn cả dấu mũi tên.

Đừng quên gắn schema cho breadcrumb

Đây là phần hay bị bỏ sót nhất, và cũng là phần ăn tiền nhất về mặt SEO. Breadcrumb hiển thị cho mắt người là một chuyện; để Google hiểu và dùng nó trên kết quả tìm kiếm lại cần thêm một lớp nữa — đó là schema BreadcrumbList.

Nói dễ hiểu: schema là đoạn mã ẩn (khách không thấy) khai báo cho Google biết "dải điều hướng này gồm các tầng theo thứ tự, mỗi tầng tên gì, link đi đâu". Khi Google đọc được đoạn này, nó có quyền thay dòng địa chỉ web (URL) trên trang kết quả bằng chính dải breadcrumb. Thay vì nhìn thấy một chuỗi thietkewebgiare.dev/blog/breadcrumb-la-gi khô khan, người tìm kiếm thấy đường dẫn dạng chữ rõ ràng, dễ đọc, dễ tin hơn.

Phần kỹ thuật, schema breadcrumb thường viết dưới dạng JSON-LD (một định dạng khai báo dữ liệu dạng chữ, đặt trong thẻ script) và nhúng vào trang. Nếu bạn dùng WordPress thì các plugin SEO phổ biến (Rank Math, Yoast) làm sẵn việc này, chỉ cần bật lên là có. Còn web code tay như bên mình hay làm, breadcrumb và schema được dựng đồng bộ ngay trong template nên không lo lệch. Đây cũng là một mục nằm trong nhóm việc tối ưu on-page SEO mà bất kỳ trang nào lên top cũng phải làm cho gọn.

Một lưu ý quan trọng: tên các tầng trong schema phải khớp với breadcrumb mà khách nhìn thấy. Google không thích kiểu màn hình hiện một đằng, schema khai một nẻo — đó bị coi là đánh lừa và có thể bị bỏ qua rich result (kết quả hiển thị nâng cao). Cứ trung thực, đúng cái gì hiện ra thì khai đúng cái đó.

Vài hiểu lầm hay gặp

Có mấy điều khách hay hỏi mình mà nhân tiện nói luôn ở đây cho rõ.

Thứ nhất, breadcrumb không phải là menu thu nhỏ. Nó không liệt kê mọi trang cùng cấp, chỉ chỉ ra đường từ gốc tới chỗ bạn đang đứng. Đừng cố nhồi cả danh sách trang con vào đó.

Thứ hai, có breadcrumb không tự động làm web lên top. Nó là một mảnh nhỏ trong bức tranh lớn, đứng cùng cấu trúc URL gọn gàng, sitemap khai báo đầy đủ với Google, nội dung tốt và tốc độ tải nhanh. Thiếu breadcrumb không phải án tử, nhưng có nó thì web chỉn chu hơn một bậc.

Thứ ba, breadcrumb nên dùng URL thật, không phải link "#" hay JavaScript mở trang. Mỗi tầng phải là một địa chỉ web thật mà Google đi tới được, nếu không thì khai schema cũng vô nghĩa.

Tóm gọn lại theo cách mình hay nói với khách: breadcrumb là cái la bàn nhỏ trong web. Nó không thay được bản đồ (menu), không thay được nội dung hay, nhưng thiếu nó thì khách dễ lạc và Google khó đọc. Một dòng nhỏ thôi mà gánh khá nhiều việc.

Bên mình — Thiết Kế Web Giá Rẻ — khi dựng web cho khách luôn gắn sẵn breadcrumb và schema chuẩn ngay trong cấu trúc, không tính thêm tiền, vì với mình đó là phần tử tế cơ bản chứ không phải tính năng cao cấp. Làm web trọn gói từ 1.990.000đ gói Cơ bản, 3.990.000đ gói Pro, từ 7.990.000đ gói VIP. Mọi gói tặng tên miền, hosting và chứng chỉ bảo mật SSL năm đầu, bàn giao trong 3–7 ngày. Mời bạn xem bảng giá trọn gói, còn muốn tư vấn riêng cho web của mình thì cứ nhắn qua trang liên hệ hoặc Zalo 0777 716 863, mình xem cấu trúc web giúp cho.