Breadcumbs những điều có thể bạn chưa biết

Chắc các bạn không lạ gì chuỗi các link thể hiện category hiện tại bên dưới menu của bất kỳ các website, nhưng khi gọi tên nó là gì thì có lẽ khó đấy. Tôi thử làm một cuộc điều tra nho nhỏ là hỏi anh em trong công ty gọi tên những nhóm link này thì nhận được những cái tên nghe rất ngộ: Path way, Navigation link, và đa phần không biết gọi tên nó là gì.

Nhóm link này ở xứ Mỹ đã có tên Breadcrumb từ rất lâu nhưng chúng ta chưa việt hóa nên cách gọi tên mỗi nơi một khác. Lần đầu tiên khi đọc tài liệu thấy từ này tôi tra từ điển và ngạc nhiên khi nghĩa của từ này là “mẩu bánh mỳ” đến đây thì đành chịu chẳng hiểu nổi. Mãi sau này mới nghe một chuyên gia giải thích ý nghĩa của từ 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 link 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à 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à 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

Khi breadcrumb 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 breadcrumb 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.

Để 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:

DressesReal DressesReal Green Dresses

HTML Code:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">Dresses</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">Real Dresses</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    <span itemprop="title">Real Green Dresses</span>
  </a>
</div>

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

Leave a Reply

Your email address will not be published. Required fields are marked *