Breadcrumb là gì? Sức mạnh của Breadcrumb WordPress trong SEO Website

()

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

breadcrumbs là gì
Khái niệm Breadcrumb là gì?

Theo Schema.org định nghĩa:

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:

<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à:

  • Microdata
  • RDFa
  • JSON-LD

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.

breadcrumb wordpress
Structured Data giúp Breadcrumb hiển thị dưới dạng snippet trên trang 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é!

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:

<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>

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:

<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>

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:

<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à:

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ụ

Breadcrumbs kết hợp deep link
Cấu trúc website dày đặc hơn

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.

liên kết nội dung bằng breadcrumb
website với 6 cấp độ

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 và Breadcrumb

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!

Tôi là Vincent Do, hiện đang là CEO, Co-Founder của Hoc11.vn SEO. Tôi đã từng gặp khá nhiều khó khăn trong quá trình tìm hiểu SEO & Inbound Marketing. Với kinh nghiệm thực chiến nhiều dự án ở các lĩnh vực khác nhau và niềm đam mê S.E.O & Inbound Marketing, tôi hy vọng những kiến thức miễn phí tôi chia sẻ có thể giúp mọi người đạt nhiều thành công hơn trong quá trình triển khai SEO.

vincent do 3


Vincent Do

Nguồn: https://gtvseo.com/breadcrumb-la-gi/

Bài viết này hữu ích như thế nào?

Hãy bấm vào ngôi sao để đánh giá!

Đánh giá trung bình / 5. Số phiếu bầu:

Không có phiếu bầu cho đến nay! Hãy là người đầu tiên đánh giá bài viết này.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

×