Breadcrumbs là gì và cách tạo Breadcrumbs chuẩn SEO - Cập nhật 2020

01/12/2016    3.963    4.62/5 trong 17 lượt 
Breadcrumbs là gì và cách tạo Breadcrumbs chuẩn SEO - Cập nhật 2020
Hôm nay sau một thời gian bàn giao web cho khách hàng, dù đã khá chuẩn SEO nhưng anh này vẫn điện thoại nói em thiếu phần Breadcrums của anh rồi. Sau đó là một hồi giải thích thì mình đã ngỡ ra, oh thì ra đó là cái navigation bar mình hay dùng. Và mình đã tìm hiểu và xin ý kiến của các SEOer khác thì ra nó không phải vậy. Bài viết này sẽ giải thích cho bạn tại sao và cách nào để tạo ra cách breadcrumbs chuẩn nhất.
Vậy Breadcrumbs là gì? Tra từ điển thì nó ra kết quả là "mẩu bánh mì", mẩu bánh mì ư, tại sao lại gọi là mẩu bánh mì, chúng ta cùng xem qua câu chuyện lịch sử sau nhé!

Câu chuyện lịch sử

Ý nghĩa của Breadcrumbs này xuất phát từ một câu chuyện cổ tích kể rằng một gia đình vì quá nghèo không thể nuôi được con phải đưa con đến một nơi rất xa rồi bỏ con ở lại và một cậu bé thông minh đã dùng những mẩu bánh mỳ rải dọc đường để tìm đường về. Những liên kết giống như những mẩu bánh mỳ đánh dấu giúp bạn định vị được mình ở đâu trong website. Kể ra thì dân thiết kế web và làm SEO xứ Mỹ cũng lãng mạn thật, từ những khái niệm khô cứng đã được họ thi vị hóa thành một khái niệm nghe rất vui tai.

Breadcrumbs là gì?

Vậy chúng ta có thể định nghĩa rằng Breadcrumbs là tập hợp các đường liên kết phân cấp giúp người dùng có thể biết được mình đang ở trang nào và từ đó có thể di chuyển thuận lợi từ trang này trang khác trong web. Nếu một website có cấu trúc phức tạp mà lại không có Breadcrumbs thì người dùng dễ lâm vào tình trạng : ô mình đang ở trang nào đây, mục nào đây nhỉ?

Breadcrumbs là một thành phần rất quan trọng trong hệ thống navigation của website gần như vào bất cứ website nào bạn cũng thấy sự hiện diện của nó. Vì vậy khi thiết kế website bạn nên chú ý một số vấn đề sau đây:

Theo nghiên cứu của chuyên gia Steven Krug thì breadcrumb nên thể hiện như sau:

  • - Vị trí tốt nhất đặt breadcrumb là góc trên trái bên dưới menu chính
  • - Trước các link nên dùng cụm từ You are here: (ở văn hóa Mỹ thì như vậy nhưng với chúng ta thì chưa biết thế nào)
  • - Các link ở dạng chữ thường còn text thể hiện trang hiện tại thì in hoa
  • - Sử dụng dấu > để ngăn cách giữa các link

Một breadcrumbs tốt nhất (theo quan điểm của Steven Krug) có dạng như sau:

Bạn đang ở đây: Trang chủ > Loại sản phẩm > Dòng sản phẩm > Chi tiết sản phẩm

Sử dụng rich snippets để site của bạn hiển thị hay hơn trên SERP của Google

Lợi ích của Breadcrumbs

Khi breadcrumbs xuất hiện trên kết quả tìm kiếm của Google nó sẽ giúp bạn có thêm cơ hội người dùng click. Bời vì nhu cầu tìm kiếm của người dùng rất đa dạng nếu thấy link kết quả không phù hợp nhưng những link trong breadcrumbs phù hợp thì họ sẽ click vào đó, như vậy bạn đã tăng thêm một cơ hội có thêm một visitors.

Cách tạo Breadcrumbs

Để tạo breadcrumbs như trên khá đơn giản, bạn chỉ cần format theo đúng chuẩn của Google, sau đây là ví dụ Rich snippet của google:

Dresses › Real Dresses › Real Green Dresses

Code mẫu

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

Cách kiểm tra Breadcrumbs đã chuẩn SEO hay chưa?

Để kiểm tra bạn nên sử dụng chính công cụ do Google cung cấp là "Công cụ kiểm tra dữ liệu cấu trúc". (Structured Data Testing Tool)
Bước 1: Bạn vào liên kết như sau: https://search.google.com/structured-data/testing-tool/u/0/
Bước 2: Bạn nhập địa chỉ website bạn cần kiểm tra vào ô URL và bấm nút Chạy thử nghiệm (Run Test)
Bước 3: Kiểm tra kết quả: Bạn đọc thông báo lỗi hay cảnh bảo ở màn hình bên phải.
Nếu tất cả đều không lỗi, không cảnh báo là chuẩn SEO rồi nhé!
Lưu ý: Bạn cần phải đăng nhập gmail để sử dụng công cụ này.

Mong rằng những mẩu bánh mỳ của cậu bé thông minh có thể giúp site của bạn thêm traffic và thêm điểm SEO chính website của bạn.

Những câu hỏi thường gặp

1. Breadcrumbs có quan trọng không?

Có nhé, bạn hãy xem lại câu chuyện trên. Nhờ có mẫu bánh mì đó mà cậu bé đã giúp gia đình cũng như mình tìm được đường về cũng giống như việc nhờ có bạn cấu hình Breadcrumbs mà Search bot mới tìm ra cấu trúc của website bạn.

2. Breadcrumbs có cần phải chính xác như code mẫu không?

Có, bạn phải nói lập trình làm đúng như code mẫu và chỉ thay vào là vị trí cũng như nội dung của website bạn mà thôi.

3. Breadcrumbs có hiển thị ngay trên Google tìm kiếm hay không?

Không, breadcrumbs chỉ hiển thị khi nội dung của bạn đã được Google Index và tất cả đều chuẩn SEO.

Cảm ơn bạn đã đọc hết bài viết!

Nha thân tặng bộ source code blog này cho những ai quan tâm.

Bình luận