Breadcrumb là gì? Vì sao nó được coi là sức mạnh trong SEO

Viết bởi TrungNgoc || Có 1889 từ và 7 phút để nắm hết nội dung!

Breadcrumb? Nó là gì mà nghe lạ lạ quen quen nhỉ? Mình sẽ đi vào tính năng hữu ích của nó trước nhé:

• Breadcrumb góp phần tăng trưởng SEO
• Nó là yếu tố giúp tăng thứ hạng, tăng trải nghiệm người dùng
• Và nó là quan trọng bậc nhất trong SEO

Nhưng, nhiều SEOer đã bỏ qua điều này và nhiều newbie chưa hề biết về nó. Bài này TNDigi sẽ giúp bạn hiểu rõ hơn, triển khai nó như thế nào. Cùng TNDigi vào bài viết ngay nhé.

Breadcrumb là gì

Breadcrumb là tập hợp các liên kết giúp cho người dùng biết vị trí hiện tại của mình trên website. Nếu cấu trúc website bạn phức tạp thì điều hướng ở breadcrumb là một lợi thế vô cùng lớn, giúp giảm tỉ lệ bounce rate, cải thiện trải nghiệm người dùng.

Vai trò của Breadcrumb

Tăng trải nghiệm người dùng:

• Hỗ trợ điều hướng trên website
• Thu hút người dùng đến những bài viết khác trong hệ thống phân cấp
• Tăng tương tác người dùng, tăng thời gian onsite, giảm bounce rate

Tác dụng tốt với SEO:

• Tăng lượng anchor text chứa từ khóa
• Hỗ trợ để hiển thị snippets trên trang kết quả công cụ tìm kiếm

Lợi ích của Breadcrumb

• Giúp người dùng định vị được vị trí hiện tại trên website
• Cung cấp đường dẫn để truy cập nhanh đến các bài viết cùng danh mục hoặc danh mục cao hơn
• Giảm tỉ lệ bounce rate
• Tác động tích cực đến Google

Khi nào nên sử dụng Breadcrumb

Breadcrumb mang lại lợi ích lớn cho người dùng trên website. Ở các website lớn có cấu trúc phức tạp, nội dung ở những cấp độ con được hưởng lợi rất nhiều từ breadcrumb.

Breadcrumb giúp bài viết được xác định vị trí rõ ràng hơn.

Các loại Breadcrumb thường gặp

Breadcrumb có rất nhiều loại, mỗi loại được dùng cho mỗi mục đích cụ thể, nhưng xét về góc độ kỹ thuật, bạn cần phải đưa ra câu trả lời đúng đắn cho các câu hỏi sau:

• Nên chọn breadcrumb nhất quán hay breadcrumb không nhất quán
• Triển khai URL cho từng sản phẩm hay nhiều URL cho danh mục
• Đường dẫn người dùng có đồng bộ hay không

Chi tiết hơn nhé:

Consistent breadcrumb trail và inconsistent bread trail

Consistent breadcrumb trail nghĩa là không bị đứt quãng, bám sát hành trình của người dùng. Nghĩa là breadcrumb sẽ hiển thị sâu hơn khi bạn truy cập vào một tầng sâu hơn.

Ví dụ:

• Consistent breadcrumb trail:
  • Khi bạn đang trang danh mục Sofa tân cổ điển: Homepage / Nội thất / Sofa tân cổ điển
  • Khi bạn vào trang danh mục con là danh mục Sofa đơn của  Sofa tân cổ điển: Homepage / Nội thất / Sofa tân cổ điển / Sofa đơn.
• Inconsistent breadcrumb trail:
  • Khi bạn đang trang danh mục Sofa tân cổ điển: Homepage / Nội thất / Sofa tân cổ điển
  • Khi bạn vào trang danh mục con là danh mục Sofa đơn của  Sofa tân cổ điển: Homepage / Sản phẩm / Sofa đơn.
• Consistent breadcrumb trail với nhiều danh mục:
  • Khi bạn đang trang danh mục Sofa tân cổ điển: Homepage / Nội thất / Sofa tân cổ điển
  • Bạn có thể tìm thấy nhiều sản phẩm khác của danh mục Sofa tân cổ điển thông qua Breadcrumb: Homepage / Sản phẩm / Sofa tân cổ điển.

Một hay nhiều URL cho danh mục

Nếu như sản phẩm của bạn chỉ có 1 URL duy nhất thì nó vô cùng đơn giản, nhưng nếu nhiều thì rất khó tránh được nội dung trùng lặp.

Một URL:

• Category URL:
  • https://domain/noi-that/sofa
  • https://domain/noi-that/sofa-tan-co-dien
• Product URL:
  • https://domain/san-pham/sofa-vai-ni

Nhiều URL:

• Category URL:
  • https://domain/noi-that/sofa
  • https://domain/noi-that/sofa-tan-co-dien
• Product URL:
  • https://domain/noi-that/sofa/sofa-vai-ni
  • https://domain/noi-that/sofa-tan-co-dien/sofa-vai-ni

>> Xem thêm: Học content marketing miễn phí cùng TNDigi

Cách triển khai sử dụng Breadcrumb

Breadcrumb sẽ được hiển thị nhờ mã HTML markup đơn giản

Mẫu HTML cho Breadcrumb trail

Nếu như bạn muốn có breadcrumb như này: Trang chủ / SEO / Breadcrumb là gì? Vì sao nó quan trọng trong SEO.

Thì mã HTML nó sẽ như này:

<a href=”https://tndigi.vn/”> Trang chủ</a> &gt; <a href=”https://tndigi.vn/seo/”> SEO</a> &gt; Breadcrumb là gì? Vì sao nó quan trọng trong SEO.

Lưu ý: Khi triển khai Breadcrumb thì bạn nên tách các thư mục bằng các ký tự đơn giản như >, >>, /, //. Việc sử dụng các ký tự đó sẽ đơn giản hơn và thân thiện với người dùng hơn

Mẫu Breadcrumb sử dụng Microdata

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
       itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://tndigi.vn/">
    <span itemprop="name">Trang chủ</span></a>
    <span itemprop="position" content="1">&gt;</span>
  </li>
  <li itemprop="itemListElement" itemscope
    itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://tndigi.vn/marketing/">
    <span itemprop="name">Marketing</span></a>
    <span itemprop="position" content="2">&gt;</span>
  </li>
  <li itemprop="itemListElement" itemscope
       itemtype="http://schema.org/ListItem">
    <span itemprop="item" content="https://tndigi.vn/marketing/marketing-la-gi/">
    <span itemprop="name">Marketing là gì? Tìm hiểu về marketing</span>
    <span itemprop="position" content="3"></span>
  </li>
</ol>

Mẫu Breadcrumb sử dụng RDFa

<ol vocab="http://schema.org/" typeof="BreadcrumbList">
  <li property="itemListElement" typeof="ListItem">
    <a property="item" 
      content="https://tndigi.vn/">
    <span property="name">Trang chủ</span></a>
    <span property="position" content="1">&gt;</span>
  </li>
  <li property="itemListElement" typeof="ListItem">
    <a property="item"
      content="https://tndigi.vn/marketing/">
    <span property="name">Marketing</span></a>
    <span property="position" content="2">&gt;</span>
  </li>
  <li property="itemListElement" typeof="ListItem">
    <span property="item" content="https://tndigi.vn/marketing/marketing-la-gi/">
    <span property="name">Marketing là gì? Tìm hiểu về marketing </span>
    <span property="position" content="3"></span>
  </li>
</ol>

Mẫu Breadcrumb sử dụng JSON-LD

<script type="application/ld+json">{
  "@context":"http://schema.org",
  "@type":"BreadcrumbList",
  "itemListElement":[
    {
      "@type":"ListItem",
      "position":1,
      "item":{
        "@id":"https://tndigi.vn/#webpage",
        "url":"https://tndigi.vn/",
        "name":"Trang chủ"
      }
    },
    {
      "@type":"ListItem",
      "position":2,
      "item":{
        "@id":"https://tndigi.vn/marketing/#webpage",
        "url":"https://tndigi.vn/marketing/",
        "name":"Marketing"
      }
    },
    {
      "@type":"ListItem",
      "position":3,
      "item":{
        "@id":"https://tndigi.vn/marketing/marketing-la-gi/#webpage",
        "url":"https://tndigi.vn/marketing/marketing-la-gi/",
        "name":"Marketing là gì? Tìm hiểu về marketing"
      }
    }
  ]
}
</script>

Nhưng mình nghĩ bạn sử dụng plugin SEO sẽ thuận tiện hơn, dễ dàng hơn và sẽ tự động làm, bạn sẽ không cần phải thiết lập cho từng bài viết, sản phẩm

Nếu bạn dùng Yoast SEO

Bạn vào plugin, chỉnh sửa như thế này

Sau đó bạn vào giao diện -> theme editor -> tìm đến file content-single.php.

Thông thường file đó sẽ ở theme của bạn -> template-path -> posts -> content-single.php

Dán đoạn mã này vào:

<div class="breadcrumbs">
        <?php
            if ( function_exists('yoast_breadcrumb') ) {
            yoast_breadcrumb('
            <p id="breadcrumbs">','</p>');
            }
        ?>
    </div>

Nếu bạn dùng Rank Math

Bạn vào plugin, chỉnh sửa như thế này

Sau đó bạn vào giao diện -> theme editor -> tìm đến file content-single.php.

Thông thường file đó sẽ ở theme của bạn -> template-path -> posts -> content-single.php

Dán đoạn mã này vào:

<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>

Kết quả sẽ như thế này

Các lỗi thường gặp khi triển khai

• Sử dụng Breadcrumb quá ngắn
• Sử dụng Breadcrumb trail đảo ngược trong title website

Bạn đang xem bài viết: Breadcrumb là gì? Vì sao nó được coi là sức mạnh trong SEO