Breadcrumb Navigation là gì? Cách tạo thanh điều hướng Breadcrumb kèm Schema cho Next.js

Bạn có nhận thấy dòng chữ nhỏ dạng Trang chủ → Blog → SEO → Bài viết hiện tại ở phía trên bài viết trên các trang web lớn? Đó chính là Breadcrumb Navigation (Thanh điều hướng vụn bánh mì) — một thành phần UI nhỏ nhưng mang lại lợi ích SEO cực lớn.

1. Breadcrumb Navigation mang lại lợi ích gì?

• Cải thiện trải nghiệm người dùng (UX): Giúp khách hàng biết đang ở đâu trong cấu trúc website và quay lại trang cha dễ dàng.
• Hiển thị trên kết quả Google Search: Google hiển thị đường dẫn Breadcrumb thay vì URL dài dòng trong kết quả tìm kiếm, tăng tỷ lệ Click (CTR).
• Tăng cường Internal Link: Mỗi mục trong Breadcrumb là một liên kết nội bộ trỏ về trang cha.

2. Tạo component Breadcrumb trong Next.js

Tạo component Breadcrumb tự động sinh đường dẫn dựa trên URL hiện tại:

export default function Breadcrumb({ items }) {
  return (
    <nav aria-label="Breadcrumb">
      <ol className="breadcrumb">
        {items.map((item, index) => (
          <li key={item.href}>
            {index < items.length - 1 ? (
              <a href={item.href}>{item.label}</a>
            ) : (
              <span aria-current="page">{item.label}</span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
}

3. Tích hợp Schema BreadcrumbList (JSON-LD)

Để Google hiểu và hiển thị Breadcrumb trên kết quả tìm kiếm, cần gắn mã Schema Markup dạng JSON-LD:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Trang chủ",
      "item": "https://uwmee.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Blog",
      "item": "https://uwmee.com/blog"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Breadcrumb là gì"
    }
  ]
}

Kết luận

Breadcrumb Navigation là thành phần nhỏ nhưng tác động lớn tới cả UX lẫn SEO. Uwmee Software tích hợp sẵn Breadcrumb kèm Schema BreadcrumbList cho mọi website Next.js bàn giao. Đọc thêm bài viết Responsive Web Design là gì.