Bạn đang triển khai chiến lược SEO trên website, Breadcrumb là cụm từ luôn được nhắc đến, theo một cách như:
- Breadcrumb góp phần thúc đẩy tăng trưởng của website
- Breadcrumbs quan trọng trong SEO
- Breadcrumb giúp tăng thứ hạng website,…
Tuy nhiên, nó lại rất ít SEOer, Marketer chú ý đến và có nhiều bạn newbie chưa biết về Breadcrumbs. Vì vậy, trong chia sẻ này tôi sẽ giúp bạn hiểu rõ hơn về Breadcrumb, cách triển khai, các loại Breadcrumb cũng như phương pháp hay nhất và lỗi thường gặp.
Đừng quên lấy ngay bút và sổ để note lại nhé. Để bạn có thể nắm rõ tất cả nội dung, tôi sẽ đi theo thứ tự từ khái niệm cơ bản đến cách triển khai và khắc phục nâng cao.
Bắt đầu ngày nào!
Breadcrumb là gì?
Breadcrumb thường nằm ở đầu website, giữa điều hướng trên cùng và title nội dung. Thường bao gồm một tập hợp các liên kết, bắt đầu từ cấp cao nhất của website, đi xuống từng cấp một.
Theo Schema.org định nghĩa:
“Breadcrumb là một tập hợp các liên kết giúp người dùng hiểu và điều hướng hệ thống phân cấp website.”
Vai trò của Breadcrumbs trong SEO Website
Tăng trải nghiệm người dùng:
- Hỗ trợ người dùng điều hướng trên một website
- Đường dẫn click chuột ngắn hơn khi điều hướng qua các cấp của website
- Thu hút sự quan tâm của người dùng đến các yếu tố cao hơn trong hệ thống phân cấp của website
- Thúc đẩy người dùng tương tác mạnh mẽ
Tác dụng đặc biệt đối với SEO
- Tăng lượng anchor text có gắn keyword trên website
- Có thể được sử dụng để giảm mức thu thập thông tin trên website
- Nền tảng để nâng cao các snippets trong các trang kết quả của công cụ tìm kiếm
Khi nào nên sử dụng Breadcrumb?
Breadcrumb mang lại lợi ích cho người dùng và cấu trúc trang web trên bất kỳ website nào có nhiều hơn hai phần tử trong đường dẫn.
Các website lớn, phức tạp với nhiều cấp độ nội dung được hưởng lợi rất nhiều từ các Breadcrumb được xác định rõ ràng. Các trường hợp sử dụng phổ biến là các website e-commerce nhiều sản phẩm, danh mục và tìm kiếm theo từng khía cạnh, cũng như các trang thông tin nặng về danh mục.
Đến đây, bạn đã hình dung nên dùng Breadcrumb khi nào và website lĩnh vực gì nên triển khai, đúng không? Tiếp theo, chúng ta sẽ chuyển đến phần quan trọng hơn, đó là Cách triển khai Breadcrumb.
Cách triển khai điều hướng Breadcrumb
Việc triển khai Breadcrumbs có thể được thực hiện với HTML/XHTML markup đơn giản, như sau:
Mẫu HTML markup cho Breadcrumb Trail
Giả sử bạn muốn tạo một đường dẫn breadcrumb như sau:
Trang chủ / Marketing / Marketing là gì? Tìm hiểu về marketing & 10 điều Marketer làm mỗi ngày
HTML markup sẽ trông như thế này:
1 2 | <a href="https://gtvseo.com/">Trang chủ</a> > <a href="https://gtvseo.com/marketing/">Marketing</a> > Marketing là gì? Tìm hiểu về marketing & 10 điều Marketer làm mỗi ngày |
Lưu ý
Trong quá trình triển khai Breadcrumb bạn nên tách các mục bằng ký tự, các ký tự đơn giản như:
> hoặc >> hay các biến thể như › (hay còn gọi là dấu ngoặc kép tiếng Pháp) và »
/ hoặc là //
Việc sử dụng các ký tự này làm tăng thêm sự quen thuộc, do đó nó sẽ mang lại trải nghiệm người dùng.Tốt nhất nên sử dụng các ký tự đơn giản. Bạn chọn ký tự phân tách nào sẽ không quan trọng, chỉ cần trong suốt quá trình thực hiện bạn sử dụng đồng ký tự cho website.
Hãy luôn nghĩ về người dùng khi triển khai Breadcrumb của bạn.
Structured Data (Dữ liệu cấu trúc) & Breadcrumb
Nếu muốn đảm bảo công cụ tìm kiếm hiểu Breadcrumb, bạn nên sử dụng schema.org vocabulary. Một trong những Structured Data hỗ trợ hiệu quả trong quá trình này là:
Việc áp dụng các Structured Data cho Breadcrumbs giúp các công cụ tìm kiếm sẽ có nhiều khả năng thêm đường dẫn vào snippets cho website trong kết quả tìm kiếm.
Sử dụng thuộc tính Structured Data trong Điều hướng Breadcrumb
Thuộc tính Structured Data có cấu trúc cho Breadcrumb được xác định bởi schema.org BreadcrumbList. Công cụ tìm kiếm thường sử dụng các thuộc tính sau để tạo list breadcrumb trong các snippets:
- Item (mục)
- Name (tên)
- Position (vị trí)
Bạn có thể tham khảo thêm một số mẫu Breadcrumb trong Structured Data, tôi chia sẽ dưới đây.
Hãy note kỹ phần này nhé!
Mẫu Breadcrumb Markup sử dụng Microdata
Ví dụ mẫu Breadcrumb:
Trang chủ / Marketing / Marketing là gì? Tìm hiểu về marketing & 10 điều Marketer làm mỗi ngày
Breadcrumb Markup sử dụng Microdata sẽ trông như thế này:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <ol itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://gtvseo.com/"> <span itemprop="name">Trang chủ</span></a> <span itemprop="position" content="1">></span> </li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://gtvseo.com/marketing/"> <span itemprop="name">Marketing</span></a> <span itemprop="position" content="2">></span> </li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <span itemprop="item" content="https://gtvseo.com/marketing/marketing-la-gi/"> <span itemprop="name">Marketing là gì? Tìm hiểu về marketing & 10 điều Marketer làm mỗi ngày</span></span> <span itemprop="position" content="3"></span> </li> </ol> |
Mẫu Breadcrumb Markup sử dụng RDFa
Ví dụ mẫu Breadcrumb:
Trang chủ / Marketing / Marketing là gì? Tìm hiểu về marketing & 10 điều Marketer làm mỗi ngày
Breadcrumb Markup sử dụng RDFa sẽ trông như thế này:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <ol vocab="http://schema.org/" typeof="BreadcrumbList"> <li property="itemListElement" typeof="ListItem"> <a property="item" content="https://gtvseo.com/"> <span property="name">Trang chủ</span></a> <span property="position" content="1">></span> </li> <li property="itemListElement" typeof="ListItem"> <a property="item" content="https://gtvseo.com/marketing/"> <span property="name">Marketing</span></a> <span property="position" content="2">></span> </li> <li property="itemListElement" typeof="ListItem"> <span property="item" content="https://gtvseo.com/marketing/marketing-la-gi/"> <span property="name">Marketing là gì? Tìm hiểu về marketing & 10 điều Marketer làm mỗi ngày</span></span> <span property="position" content="3"></span> </li> </ol> |
Mẫu Breadcrumb Markup sử dụng JSON-LD
Ví dụ mẫu Breadcrumb:
Trang chủ / Marketing / Marketing là gì? Tìm hiểu về marketing & 10 điều Marketer làm mỗi ngày
Breadcrumb Markup sử dụng JSON-LD sẽ trông như thế này:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <script type="application/ld+json">{ "@context":"http://schema.org", "@type":"BreadcrumbList", "itemListElement":[ { "@type":"ListItem", "position":1, "item":{ "@id":"https://gtvseo.com/", "name":"Trang chủ" } }, { "@type":"ListItem", "position":2, "item":{ "@id":"https://gtvseo.com/marketing/", "name":"Marketing" } }, { "@type":"ListItem", "position":3, "item":{ "@id":"https://gtvseo.com/marketing/marketing-la-gi/", "name":"Marketing là gì? Tìm hiểu về marketing & 10 điều Marketer làm mỗi ngày" } } ] }</script> |
Sau khi triển khai dữ liệu Breadcrumb Markup, bước tiếp theo bạn cần thực hiện là kiểm tra xem Structured Data cho Breadcrumb đã đúng hay chưa. Tôi sẽ hướng dẫn bạn cách kiểm tra đơn giản và có thể áp dụng cho tất cả về định dạng của Structured Data của Breadcrumbs. Quá trình kiểm tra này, bạn sẽ thực hiện như sau.
Cách kiểm tra Structured Data cho Breadcrumb
Đầu tiên, hãy copy dữ liệu Breadcrumb Markup bạn vừa triển khai và cho vào Google Structured Data Testing Tool. Nó sẽ xác thực structured data markup (đánh dấu dữ liệu có cấu trúc) và chỉ ra các lỗi.
Lưu ý: Structured data markup không hợp lệ có thể khiến các công cụ tìm kiếm bỏ qua thông số kỹ thuật Breadcrumb của bạn.
Nhưng, triển khai đơn thuần như tôi vừa hướng dẫn ở trên vẫn chưa đủ mang lại hiệu quả tối ưu cho website. Do có rất nhiều loại Breadcrumb khác nhau với cách hiển thị không giống nhau. Vậy câu hỏi chúng ta đặt ra ở đây là:
Breadcrumb gồm những loại nào?
Như tôi đã nói, Breadcrumb có rất nhiều loại. Nên ở đây, chúng ta sẽ xét theo từng phương diện cụ thể, giúp bạn hiểu rõ hơn Breadcrumb.
Góc nhìn kỹ thuật về Breadcrumb
Trước khi xem xét tính khả thi của Breadcrumb, bạn cần tìm hiểu sự khác biệt của tính kỹ thuật về phương diện sites structure và URL structure.
Một kế hoạch cụ thể cho Breadcrumb, sẽ giúp bạn đưa ra câu trả lời đúng đắn tại thời điểm quan trọng như:
- Nên chọn Consistent Breadcrumb Trail (Breadcrumb Trail nhất quán) hay Inconsistent Breadcrumb Trail (Breadcrumb Trail không nhất quán)?
- Khi triển khai nên dùng unique URLs cho từng sản phẩm hay nhiều URL cho category?
- User Path (Đường dẫn người dùng) có đồng bộ với Breadcrumb Trail không?
Tại đây, có phải bạn đang đặt câu hỏi: consistent breadcrumb trail, inconsistent Breadcrumb Trail, một URLs cho từng sản phẩm, nhiều URL cho category, User Path là gì và như thế nào?
Bạn có thể hiểu như sau:
Consistent và inconsistent Breadcrumb Trail
Consistent Breadcrumb Trail, khi nó không “nhảy”, không bị đứt quãng, bám sát hành trình của người dùng. Có nghĩa là, với mỗi lần nhấp vào liên kết dẫn đến tầng nội dung sâu hơn, thì breadcrumb sẽ tương ứng hiển thị thêm một tầng.
Ví dụ Consistent Breadcrumb Trail
Người dùng vào website trên landing page dành cho “Phòng Bếp”. Breadcrumbs trông như thế này:
Trang chủ / Nội thất / Phòng Bếp
Click chuột tiếp theo dẫn bạn đến trang “Bàn ăn”. Bây giờ Breadcrumb Trail trông như thế này
Trang chủ / Nội thất / Phòng Bếp / Bàn ăn
Ví dụ Inconsistent Breadcrumb Trail
Người dùng vào website trên landing page cho Phòng Bếp. Breadcrumb sẽ trông như thế này
Trang chủ / Nội thất / Phòng Bếp
Tiếp theo bạn click vào link đến trang sản phẩm “Bàn ăn”. Bây giờ Breadcrumb Trail trông như thế này
Trang chủ / Sản phẩm / Bàn ăn gỗ
Ví dụ consistent breadcrumb trails với cấu trúc nhiều danh mục
Người dùng đã click qua các danh mục “Nội thất”, “Phòng bếp” và “Bàn ăn” rồi chọn sản phẩm
Trang chủ / Nội thất / Phòng bếp / Bàn ăn / Bàn ăn gỗ
Người dùng có thể tìm thấy sản phẩm bằng nhiều cách khác như
Trang chủ / Sản phẩm / Bàn ăn gỗ
Một hoặc nhiều URLs?
Bạn và tôi đều biết rằng, việc tạo ra một cấu trúc thông tin thân thiện với công cụ tìm kiếm khi các sản phẩm thuộc nhiều doanh nghiệp sẽ là một thách thức. Tuy nhiên, chúng ta có thể tối ưu nó thông qua:
- Một URL
- Nhiều URL cho category
Cả hai cách tiếp cận đều có thể tạo ra trải nghiệm người dùng tích cực – tùy thuộc vào những gì bạn đang cố gắng thực hiện. Nhưng nó cũng có những mặt trái, cần được giải quyết theo một cách khác, nhằm mang đến trải nghiệm người dùng tốt nhất và đồng thời làm hài lòng các công cụ tìm kiếm.
Ví dụ Một URL
Nếu sản phẩm của bạn có Một URL duy nhất, bạn sẽ tránh được các vấn đề về nội dung trùng lặp. Nhược điểm của phương pháp này là Breadcrumb có thể nhảy nếu bạn không triển khai một thuật toán phức tạp hơn để làm cho Breadcrumb hoạt động nhất quán với người dùng.
Category-URL:
- http://example.com/noi-that/phong-an/
- http://example.com/noi-that/ban-an/
Product-URL:
- http://example.com/san-pham/ban-an-go
Ví dụ Nhiều URL cho Category
Nếu có nhiều URL cho một sản phẩm, điều này có thể dẫn đến vấn đề nội dung trùng lặp. Trong trường hợp này, bạn cần xác định phiên bản mặc định và gán rel = canonical với URL mục tiêu trỏ đến URL mặc định của sản phẩm trên tất cả các trang sản phẩm của bạn.
Category-URL:
- http://example.com/noi-that/phong-an/
- http://example.com/noi-that/ban-an/
Product-URL:
- http://example.com/noi-that/phong-an/ban-an-go
- http://example.com/noi-that/ban-an/ban-an-go
User Path đồng nhất với Breadcrumb Trail
Điều bạn cần lưu ý tại đây là: Trải nghiệm người dùng nhất quán, khi và chỉ khi User Path được kết hợp với Breadcrumb Trail.
Ví dụ
Người dùng đã xem các mặt hàng nổi bật và sau đó chọn sản phẩm
Trang chủ / Phòng bếp / Mặt hàng nổi bật / Bàn ăn gỗ
Người dùng đã sử dụng bộ lọc của nhà sản xuất cho “Bàn ăn tốt nhất” và sau đó chọn sản phẩm
Trang chủ / Phòng bếp/ Bàn ăn tốt nhất / Bàn ăn gỗ
Người dùng cũng có thể tìm thấy sản phẩm bằng nhiều cách khac
Trang chủ / Sản phẩm / Bàn ăn gỗ
Với phân tích của tôi bạn đã hiểu rõ hơn về tính sự khác biệt của tính kỹ thuật về phương diện sites structure và URL structure của Breadcrumb rồi đúng không nào?!
Nội dung tiếp theo, tôi sẽ Chúng ta sẽ tìm hiểu về sự khác biệt về khái niệm trong Breadcrumbs – Một nội dung quan trong cho bất kỳ nền tảng nào khi bản triển khai Breadcrumbs
Sự khác biệt về khái niệm trong Breadcrumbs
Có ba cách cơ bản để xác định Breadcrumb: Dựa trên vị trí, đường dẫn hoặc thuộc tính.
Location-based Breadcrumb
Breadcrumb dựa trên vị trí là cách sử dụng phổ biến của breadcrumb. Location-based Breadcrumb dựa trên vị trí hiển thị vị trí hiện tại trong hệ thống phân cấp của website và cho phép người dùng nhanh chóng điều hướng qua các cấp của website.
Trong Location-based Breadcrumb, cấu trúc phân cấp đồng bộ với breadcrumbs.
Ví dụ:
URL
http://example.com/ban-an/ban-an-go/
Breadcrumb Path
Trang chủ> Bàn ăn > bàn bếp gỗ
Ưu điểm:
- Dễ để thực hiện
- Người dùng có thể dễ dàng xác định vị trí hiện tại trong hệ thống phân cấp website
Nhược điểm:
- Breadcrumb có thể trở nên không nhất quán, tùy thuộc vào cấu trúc website
Yêu cầu:
- Yêu cầu thiết kế cấu trúc thông tin một cách hợp lý
Attribute-based Breadcrumb
Breadcrumb dựa trên thuộc tính cho phép nâng cao Breadcrumb Trail với các thuộc tính của nội dung hiện tại.
Attribute-based Breadcrumb hoạt động độc lập với hệ thống phân cấp của website và do đó cần nhiều nỗ lực kỹ thuật hơn để được triển khai chính xác.
Ví dụ:
URL
http://example.com/ban-an/ban-ăn-go/
Breadcrumb Path
Trang chủ / Gỗ / Lớn / Bàn ăn gỗ
Ưu điểm:
- Có thể mang lại khả năng sử dụng tốt hơn đường dẫn dựa trên vị trí
Nhược điểm:
- Có thể dẫn đến Breadcrumb Trail rất dài
- Có thể dẫn đến một thứ tự khác cho breadcrumb
Yêu cầu:
- Yêu cầu xác định các category mặc định trong nhiều category
Path-based Breadcrumb
Một cách ít phổ biến hơn để thiết lập breadcrumbs là làm cho chúng dựa trên đường dẫn. Trong Path-based Breadcrumbs, Breadcrumb là một history trail và hiển thị đường dẫn mà người dùng đã đi qua website.
Ví dụ:
Người dùng truy cập vào một bài viết trên blog với tiêu đề “Đồ nội thất nhà bếp tốt nhất”, sau đó click qua danh mục bàn ăn, chọn gỗ, quay lại bànăn và chọn sản phẩm.
URL
http://example.com/ban-an/ban-an-go
Breadcrumb Path
Đồ nội thất nhà bếp tốt nhất / Bàn ăn / Gỗ / Bàn ăn / Bàn ăn gỗ
Ưu điểm:
- Không yêu cầu bất kỳ cấu trúc website cụ thể nào
Nhược điểm:
- Breadcrumb Trail không thể đoán trước
- Breadcrumb không thể được lưu vào bộ nhớ đệm
- Breadcrumb cần được lưu trữ trong session cho mỗi người dùng
- Các internal links dễ thay đổi và không thể đoán trước dành cho robot crawl thông tin đường dẫn ngẫu nhiên khi robot nhận được session (ví dụ: dựa trên ip)
- Người dùng không thể xác định vị trí hiện tại trong hệ thống phân cấp của website
Các phương pháp hay nhất về Breadcrumb
Giảm số lượng thông tin với Breadcrumb
Breadcrumbs kết hợp với các deep link ở cấp độ thấp nhất sẽ rất hiệu quả để giảm số lượng thập thông tin, do đó tạo ra cấu trúc website dày đặc hơn.
Ví dụ
Bạn có một website với 6 cấp độ dưới cấp độ gốc. Nếu đặt một liên kết từ cấp cơ sở đến nội dung cấp 6 bằng breadcrumb, bạn giảm mức thu thập thông tin và độ sâu click chuột của tất cả nội dung ở cấp 3-6.
Breadcrumb và Search Snippets
Như đã đề cập ở trên, các công cụ tìm kiếm có khả năng hiển thị đường dẫn trong kết quả tìm kiếm, nếu chúng có thể xác định được trên website. Nhưng search snippets bị giới hạn số lượng hiển thị. Vì vậy, trong trường hợp Breadcrumb quá dài, các công cụ tìm kiếm phải rút ngắn chúng trong kết quả tìm kiếm. Thông thường, các phần tử đầu tiên của đường nhỏ dưới trang gốc bị bỏ đi và chỉ hai phần tử cuối cùng được hiển thị. Điều quan trọng là giữ cho hai mục cuối cùng này phù hợp với người dùng, để cải thiện tỷ lệ click từ kết quả tìm kiếm.
Tôi khuyên bạn nên sử dụng phân loại theo phân bổ cho hai mục cuối cùng có thể thu thập thông tin trong Breadcrumb.
Ví dụ về breadcrumbs được phân loại trong search snippet
Trang chủ / … / Phòng ăn / Bàn ăn
Ví dụ attribute based breadcrumbs trong search snippet:
Trang chủ / … / gỗ / lớn
Pagination cũng phải được thể hiện trong breadcrumbs. Nếu bạn có nội dung được Pagination, bạn nên thêm phần tử đầu tiên và phần tử hiện tại của nội dung được Pagination trong Breadcrumb của mình.
Ví dụ:
Trang chủ / Nội thất / Phòng ăn / Bàn ăn / Trang 3
Liên kết “Bảng” liên kết đến phần tử đầu tiên của nội dung được phân trang “Bảng” và cho phép người dùng quay trở lại phần bắt đầu Pagination.
Thêm Pagination vào Breadcrumb của bạn cũng tạo ra các internal links có liên quan đến tài liệu bắt đầu của nội dung được Pagination. Điều này có thể giúp làm cho nó phù hợp hơn với các công cụ tìm kiếm.
Các lỗi thường gặp với Điều hướng Breadcrumb
Sử dụng Breadcrumb ngắn cho các Site Structures
Nếu đường dẫn Breadcrumb quá ngắn trên website có nhiều cấp độ thông tin, thì Breadcrumb sẽ không hiệu quả để tạo ra một Site Structures.
Tôi khuyên bạn nên thiết kế Breadcrumb theo cách giúp giảm mức thu thập thông tin. Điều này có thể giúp Tối ưu hóa Tỷ lệ Thu thập thông tin.
Sử dụng Breadcrumb Trail đảo ngược trong Title của website
Trong một số trường hợp, quản trị viên website thêm Breadcrumb Trail trong title HTML của website. Điều này có thể dẫn đến vượt tầm kiểm soát, độ dài tiêu đề không được công cụ tìm kiếm hỗ trợ và sẽ bị rút ngắn trong kết quả tìm kiếm.
Vì vậy, bạn không nên sử dụng Breadcrumb Trail trong title HTML của website.
Kết luận
Breadcrumb có thể là một giải pháp giúp bạn cải thiện trải nghiệm người dùng và tạo sự tương tác. Breadcrumb không khó sử dụng, tuy nhiên để sử dụng breadcrumb tốt nhất một số điểm bạn cần chú ý như: nó phải có ích cho người dùng, thiết kế breadcrumb hài hòa với website,…
Do đó, bạn nên có Breadcrumbs cho website. Nếu như bạn có câu hỏi hay thắc mắc nào về Breadcrumb hãy để lại bình luận của bạn ngay dưới bài blog này nhé.
Chúc bạn thành công!
- Thiết kế website doanh nghiệp chuẩn đẹp – Làm sao để kết hợp các font chữ?
- Miyake Jyunya – Nhà thiết kế đồng sáng lập thương hiệu Miniso chia sẻ bí quyết xây dựng thương hiệu thành công
- Hướng dẫn cách thiết lập mã khuyến mãi miễn phí vận chuyển trên Shopee
- Gội đầu bằng loại nước này, gàu nặng cấp mấy cũng khỏi
- Marketing Là Gì? Tổng Quan Cơ Bản Bạn Cần Biết Về Marketing