Đường dẫn breadcrumb

Kéo Phần tử → Cơ bản → Breadcrumb (en: Elements → Basic → Breadcrumb) vào trang, rồi mở nhóm Breadcrumb trong bảng bên phải. Bảng phần tử mô tả nó thế này:

Trang chủ ▸ Danh mục ▸ Trang hiện tại. Trên trang đã đăng, các bước được sinh theo chính trang đó; trên canvas bạn tự sửa.

Câu thứ hai là thứ đáng đọc kỹ nhất trên trang này, nên nó được nói ngay.

Trên canvas bạn thấy chuỗi mẫu, không phải chuỗi thật

Chuỗi thật được dựng từ địa chỉ trang khách đang mở. Canvas không có địa chỉ đó — bạn đang sửa một mẫu dùng chung cho hàng nghìn sản phẩm, chưa phải một sản phẩm cụ thể. Nên trên canvas breadcrumb vẽ danh sách bước bạn tự khai trong ô Các bước, còn trang đã đăng thay chúng bằng chuỗi thật.

Đây không phải lỗi và cũng không phải thứ sẽ được "sửa": nếu canvas đoán một sản phẩm nào đó để hiển thị, bạn sẽ chỉnh vừa mắt cho đúng sản phẩm ấy rồi ngạc nhiên khi mọi sản phẩm khác trông khác đi.

Cách kiểm tra chuỗi thật là Xem trang rồi mở một sản phẩm.

Chuỗi thật được dựng thế nào

Loại trang	Chuỗi
Sản phẩm	Trang chủ → các danh mục cha → tên sản phẩm
Danh mục	Trang chủ → các danh mục cha → tên danh mục
Bài viết	Trang chủ → chuyên mục → tiêu đề bài
Chuyên mục blog	Trang chủ → chuyên mục cha → tên chuyên mục
Khoá học	Trang chủ → tên khoá học
Trang thường	Trang chủ → tên trang

Bước cuối luôn là trang khách đang đứng và không phải là link — một trang tự trỏ về chính nó chỉ làm trình đọc màn hình đọc thừa.

Sản phẩm thuộc nhiều danh mục thì lấy danh mục sâu nhất. Một chiếc áo nằm trong cả Khuyến mãi lẫn Bé trai › Áo thun sẽ hiện Trang chủ › Bé trai › Áo thun › Áo thun cotton. Danh mục sâu hơn là danh mục cụ thể hơn, và cách chọn này không bắt bạn khai báo thêm gì cho từng sản phẩm. Nếu chuỗi ra không như ý, chỗ sửa là cây danh mục, không phải phần tử breadcrumb.

Không có bước "Blog" hay "Khoá học" được thêm vào giữa chuỗi. Cửa hàng nào cũng đặt tên và địa chỉ cho những trang đó một kiểu, nên một bước bịa ra sẽ là bước bấm vào không tới đâu. Muốn có thì dùng chế độ tự khai bên dưới.

Khi bạn muốn tự quyết

Ở ô Đường dẫn (en: Trail) đổi từ Tự động sang Tự khai (en: Manual). Danh sách Các bước bên dưới trở thành thứ được đăng, y nguyên như bạn gõ.

Mỗi bước có hai ô: Nhãn và link. Để trống ô link thì bước đó không phải là link — đó là cách bạn nói "đây là trang đang xem" bằng tay. Kéo tay cầm bên trái để đổi thứ tự, dấu ⋮ để xoá.

Chế độ này hợp với landing page, trang chiến dịch — những trang không nằm trong cấu trúc cửa hàng nên chẳng có chuỗi nào để suy ra.

Ba ô còn lại

Nhãn gốc (en: Home label) là chữ cho bước đầu tiên. Nó nằm ở đây thay vì được viết cứng trong hệ thống, vì đó là chữ duy nhất trong chuỗi tự động không lấy được từ dữ liệu nào — và vì nó phải dịch được (xem phần cuối).

Bước cuối (en: Last step) tắt đi thì bỏ tên trang hiện tại khỏi chuỗi. Nhiều thiết kế đã in tên trang to ngay bên dưới rồi, nhắc lại là thừa.

Số bước (en: Max steps) rút gọn chuỗi khi nó quá dài: giữ bước đầu và vài bước cuối, thay khúc giữa bằng dấu …. Đặt 0 hoặc để trống là không rút gọn.

Ô này đặt được riêng cho từng khổ màn hình — thường bạn muốn 4 bước trên máy tính nhưng 2 bước trên điện thoại. Cần biết một điều: rút gọn giấu các bước chứ không xoá chúng. Chúng vẫn nằm trong trang, chỉ là không hiện ở khổ đó — nên Google vẫn đọc được đầy đủ đường dẫn, và khi khách xoay ngang máy thì các bước hiện lại mà không phải tải lại trang.

Nó giúp gì cho Google

Trang đã đăng kèm sẵn dữ liệu có cấu trúc BreadcrumbList mô tả đúng chuỗi đang hiển thị. Đây mới là lý do chính người ta đặt breadcrumb: kết quả tìm kiếm hiện cuahang.vn › Bé trai › Áo thun thay vì một địa chỉ dài loằng ngoằng.

Dữ liệu đó được sinh từ chính chuỗi đang vẽ ra, nên nó không thể lệch khỏi thứ khách nhìn thấy — mà Google thì đúng là yêu cầu hai thứ phải khớp.

Nhiều ngôn ngữ

Ở cửa hàng bán bằng nhiều thứ tiếng, tên sản phẩm và tên danh mục trong chuỗi tự động lấy đúng bản dịch của ngôn ngữ khách đang đọc — bạn không phải làm gì thêm ngoài việc dịch chúng như bình thường.

Hai loại chữ còn lại cần bạn dịch ở nơi khác:

• Nhãn gốc và các bước tự khai nằm cùng chỗ với mọi chữ khác trên trang: Quản lý → Ứng dụng → Đa ngôn ngữ → Dịch nội dung.
• Tên trang thường nằm ở nhóm Nhãn của cửa hàng trong cùng màn hình đó. Nhóm này gom theo đoạn chữ, nên bạn gõ bản tiếng Anh cho "Liên hệ" một lần và mọi nơi dùng đúng chữ đó đều đọc được.