Digital Marketing

18 Tháng Ba, 2023

Breadcrumbs là gì? Tại sao breadcrumbs lại quan trọng với SEO?

MONA.Media

ADMIN

1,4k
360
50

Bạn có bao giờ gặp phải tình huống, truy cập vào một website bất kỳ, cảm thấy rối mắt và không tìm được thông tin mình muốn tìm chưa? Và bạn có muốn tối ưu website của bạn thân thiện với người dùng và công cụ tìm kiếm không?

Nếu câu trả lời là có, thì breadcrumb chính là giải pháp bạn cần. Breadcrumb không chỉ giúp người dùng dễ dàng xác định vị trí trên trang, mà breadcrumb còn giúp nâng cao trải nghiệm người dùng mượt hơn góp phần tăng hiệu suất SEO cho website. Vậy cụ thể lợi ích của breadcrumbs trong SEO là gì? Ứng dụng breadcrumb như thế nào mới hiệu quả? Cùng MONA Media tìm hiểu ngay dưới đây!

Breadcrumbs là gì?

Breadcrumb (hay còn gọi là breadcrumb trail hoặc breadcrumb navigation) là một thanh menu điều hướng nhỏ nằm ngang, giúp bạn biết rõ mình đang ở đâu trên trang web. Hình dung đơn giản, breadcrumb giống như những biển báo chỉ đường, dẫn dắt bạn từ trang chủ đến chính xác vị trí hiện tại.

Thông thường, breadcrumb nằm ở đầu mỗi trang web, ngay bên dưới thanh điều hướng chính và phía trên phần tiêu đề nội dung. Vị trí này giúp người dùng dễ dàng nhìn thấy và nhanh chóng tương tác khi cần.

Ví dụ, khi truy cập vào trang blog của website monamedia.co và đọc một bài tin tức bất kỳ, breadcrumb sẽ hiển thị theo dạng như sau:

Trang chủ > Tin tức > Direct Traffic là gì? Hướng dẫn cách đo lường và tối ưu direct traffic

Breadcrumbs là gì

Nhờ breadcrumb, bạn ngay lập tức biết mình đang xem bài blog nào và có thể dễ dàng quay lại trang dịch vụ hay thậm chí trở về trang chủ chỉ bằng một cú click chuột đơn giản.

Phân loại breadcrumbs phổ biến 

Có 3 loại Breadcrumbs web phổ biến hiện nay gồm:

  • Breadcrumbs web theo vị trí
  • Breadcrumbs web theo thuộc tính
  • Breadcrumbs web theo lịch sử

Mỗi loại điều hướng Breadcrumbs được tạo ra theo nhiều mục đích sử dụng khác nhau, do đó, trước khi thiết kế đường dẫn điều hướng, hãy xác định mục đích sử dụng chính để chọn loại Breadcrumb web phù hợp.

Breadcrumb dựa trên vị trí (Location Breadcrumbs)

Trong các loại breadcrumb trong SEO, thì Location Breadcrumbs (hay Breadcrumb dựa trên vị trí) là loại phổ biến nhất và chắc chắn bạn đã gặp rất nhiều khi lướt web. Loại điều hướng này sẽ giúp bạn nhận biết mình đang ở đâu trên website theo một cấu trúc phân cấp cụ thể.

Để dễ hình dung, bạn hãy tưởng tượng bạn đang truy cập vào một trang thương mại điện tử để tìm kiếm một đôi giày thể thao. Bạn sẽ thấy breadcrumb hiển thị dạng như sau:

Trang chủ > Giày dép > Giày thể thao > Giày chạy bộ Adidas

Breadcrumb dựa trên vị trí

Nhờ breadcrumb này, bạn lập tức hiểu rõ vị trí hiện tại của mình là đang xem sản phẩm “Giày chạy bộ Adidas”. Nếu muốn quay lại mục lớn hơn như “Giày thể thao” hoặc “Giày dép”, bạn chỉ cần nhấp vào liên kết tương ứng.

Ưu điểm nổi bật của Schema Breadcrumbs dựa trên vị trí:

  • Giúp người dùng dễ dàng định vị: Bạn luôn biết mình đang ở đâu và dễ dàng quay trở lại các danh mục lớn hơn.
  • Cải thiện trải nghiệm người dùng mượt mà hơn
  • Tối ưu tốt cho SEO: Đây là một trong các loại breadcrumb trong SEO được Google đánh giá cao, giúp cải thiện cấu trúc website và tăng thứ hạng trên trang tìm kiếm.

Breadcrumbs theo thuộc tính (Attribute Breadcrumbs)

Trong các loại breadcrumb navigation, Breadcrumb theo thuộc tính là một dạng điều hướng khá quen thuộc, nhất là với website bán hàng trực tuyến có nhiều sản phẩm đa dạng về mẫu mã và đặc tính.

Ví dụ bạn đang tìm mua một chiếc laptop, breadcrumb có thể hiển thị như sau:

Trang chủ > Laptop > Laptop Acer > Laptop Acer i3, i5 (màu xám)

Breadcrumbs theo thuộc tính

Ưu điểm khi sử dụng Schema Breadcrumbs theo thuộc tính:

  • Dễ dàng lọc sản phẩm: Người dùng có thể nhanh chóng tìm được sản phẩm phù hợp theo từng đặc tính riêng biệt như màu sắc, kích cỡ, hoặc thương hiệu.
  • Cải thiện trải nghiệm khách hàng: Giúp khách hàng rút ngắn thời gian tìm kiếm sản phẩm mong muốn, từ đó tăng tỷ lệ chuyển đổi và giảm tỷ lệ thoát trang.
  • Tối ưu hóa breadcrumb cho SEO: Đây cũng là cách hiệu quả để giúp Google hiểu rõ cấu trúc phân loại sản phẩm trên website của bạn, từ đó giúp cải thiện thứ hạng SEO web trên trang kết quả tìm kiếm.

Breadcrumbs dựa trên lịch sử (Path Breadcrumbs)

Bên cạnh các dạng breadcrumb trong SEO như breadcrumbs dựa trên vị trí hay thuộc tính, thì breadcrumbs dựa trên lịch sử lại có một cách hoạt động khác biệt hơn đôi chút.

Path Breadcrumbs đơn giản là dạng breadcrumb hiển thị các trang web mà bạn vừa truy cập trước đó, gần giống như chức năng nút “Back” trên trình duyệt vậy. Nó không dựa trên cấu trúc website, mà chỉ dựa trên hành vi và lịch sử truy cập của bạn.

Ví dụ dễ hiểu, khi bạn đang xem một sản phẩm và liên tục click sang các phiên bản khác nhau, breadcrumb sẽ hiển thị dạng như:

Trang chủ > Danh mục > Sản phẩm A > Trang sản phẩm A > Trang sản phẩm A (phiên bản 2)

Breadcrumbs theo lịch sử

Bạn có thể nhanh chóng quay lại các trang trước bằng cách click vào các liên kết trên breadcrumb này, tương tự như nút quay lại.

Ưu điểm của điều hướng Breadcrumbs dựa trên lịch sử:

  • Giúp người dùng dễ dàng quay lại các trang trước đó
  • Breadcrumb lịch sử giúp người dùng thuận tiện khi đang so sánh các phiên bản sản phẩm khác nhau.

Vai trò của Breadcrumb trong SEO website như thế nào?

Thanh điều hướng Breadcrumb đóng vai trò quan trọng trong SEO website chẳng hạn như cải thiện trải nghiệm người dùng mượt hơn và giúp Google hiểu rõ cấu trúc website và ngữ cảnh nội dung trên trang nhanh chóng. Cụ thể như

Cải thiện trải nghiệm người dùng (UX)

Cải thiện UX

Breadcrumbs giúp SEO như thế nào trong việc nâng cao trải nghiệm người dùng?

  • Giúp người dùng dễ dàng biết mình đang ở đâu và nhanh chóng tìm kiếm thông tin mong muốn.

  • Giảm tỷ lệ người dùng thoát trang nhờ điều hướng rõ ràng.

  • Tăng thời gian người dùng ở lại trên website (time on site), cải thời gian tương tác của người dùng trên trang.

Hỗ trợ tối ưu hóa SEO hiệu quả

Breadcrumbs còn giúp chiến lược SEO website tổng thể như:

  • Thanh điều hướng Breadcrumb web giúp bot công cụ tìm kiếm dễ dàng thu thập dữ liệu và lập chỉ mục nhanh chóng hơn.

  • Giúp Google hiểu rõ cấu trúc website, phân cấp nội dung, và mối quan hệ giữa các trang web.

  • Breadcrumb còn có thể hiển thị trong kết quả tìm kiếm dưới dạng rich snippet, giúp thu hút người dùng click vào website của bạn.

Tăng cường liên kết nội bộ tự nhiên

Sử dụng breadcrumb navigation trong SEO giúp website bạn có được những liên kết nội bộ một cách tự nhiên, cân đối và hiệu quả, hỗ trợ phân bổ sức mạnh giữa các trang, từ đó cải thiện thứ hạng website. Chỉ một yếu tố nhỏ thôi, nhưng breadcrumb lại mang đến những lợi ích rất lớn trong chiến lược SEO tổng thể. 

Tăng cường liên kết nội bộ

Khi nào nên sử dụng Breadcrumbs trên website?

Breadcrumbs là công cụ điều hướng nhỏ nhưng cực kỳ hữu ích, nhất là những website có nhiều nội dung hoặc cấu trúc phân cấp.

Khi nào dùng Breadcrumbs

Vậy cụ thể khi nào bạn nên sử dụng breadcrumbs để mang lại hiệu quả tốt nhất?

  • Website có cấu trúc phân cấp hay có nhiều danh mục khác nhau: Khi trang web có nhiều cấp nội dung (ví dụ: Trang chủ > Danh mục > Sản phẩm), breadcrumbs giúp người dùng dễ dàng điều hướng và  và quay lại cấp trước.

  • Website thương mại điện tử: Với các trang bán hàng có nhiều danh mục và sản phẩm, breadcrumbs giúp người mua dễ dàng điều hướng, tìm kiếm nhanh hơn.

  • Website có nội dung phức tạp hoặc nhiều trang con: Breadcrumbs giúp người dùng không bị “lạc” trong các chuỗi bài viết, hướng dẫn hoặc hệ thống tài liệu nhiều tầng.

  • Người dùng truy cập từ nguồn ngoài: Khi người dùng vào website từ Google, mạng xã hội hoặc link chia sẻ, breadcrumbs giúp họ hiểu nhanh mình đang ở đâu và dễ dàng khám phá thêm nội dung liên qua

Hướng dẫn cách tạo Breadcrumb cho website chi tiết

Để thêm Breadcrumbs vào website, bạn có thể dùng YoastSEO (đối với website wordpress) hoặc chèn một đoạn code (đối với website CMS). Bạn có thể tham khảo cách làm chi tiết tại đây:

Cách thêm Breadcrumb trên website CMS

Giả sử bạn viết một đoạn code như dưới đây:

<ol class=”breadcrumbs”>

<li>

<a href=”http://www.example.com/books”>Books</a>

</li>

<li>

<a href=”http://www.example.com/sciencefiction”>Science Fiction</a>

</li>

<li>

<a href=”http://www.example.com/books/sciencefiction/awardwinners”>Award Winners</a>

</li>

<ol>

Bạn sẽ có một breadcrumbs giống như dưới đây:

Books › Science Fiction › Award Winners

Cách tạo Breadcrumb WordPress nhanh chóng bằng Yoast SEO

Nếu bạn muốn tạo breadcrumb vào website WordPress để cải thiện trải nghiệm người dùng và hỗ trợ SEO có thể thực hiện theo các bước sau nhé.

Bước 1: Kích hoạt Breadcrumb trong Yoast SEO

Trước tiên, bạn cần đăng nhập trang quản trị WordPress, cài đặt và kích hoạt plugin Yoast SEO. Tiếp đến truy cập vào SEO → Search Appearance → Breadcrumbs → Enabled

Sau đó, bạn chuyển đổi công tắc sang trạng thái Bật để kích hoạt tính năng này. Và tuỳ chỉnh thêm các cài đặt breadcrumb theo ý thích (ví dụ hiển thị danh mục, thẻ…).

Kích hoạt Breadcrumb

Bước 2: Thêm đoạn mã Breadcrumb vào theme (nếu theme chưa hỗ trợ tự động)

Nhiều theme hiện đại có thể hỗ trợ breadcrumb tự động. Nếu theme bạn chưa hỗ trợ, chỉ cần thêm đoạn mã sau vào file header.php hoặc file phù hợp trong theme:

<?php
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb( ‘<p id=”breadcrumbs”>’,'</p>’ );
}
?>

Cách thông báo Breadcrumbs cho Google

Cách 1: Chèn thêm một đoạn mã lập trình JSON-LD

<script type=”application/ld+json”>

{

“@context”: “http://schema.org”,

“@type”: “BreadcrumbList”,

“itemListElement”: [{

“@type”: “ListItem”,

“position”: 1,

“name”: “Books”,

“item”: “https://example.com/books”

},

{

“@type”: “ListItem”,

“position”: 2,

“name”: “Science Fiction”,

“item”: “https://example.com/sciencefiction”

},

{

“@type”: “ListItem”,

“position”: 3,

“name”: “Award Winners”,

“item”: “https://example.com/books/sciencefiction/awardwinners”

}]

}

</script>

Cách 2: Convert breadcrumbs trên website sang dạng RDFa

<ol vocab=”http://schema.org/” typeof=”BreadcrumbList”>

<li property=”itemListElement” typeof=”ListItem”>

<a property=”item” typeof=”WebPage”

href=”https://example.com/books”>

<span property=”name”>Books</span></a>

<meta property=”position” content=”1″>

</li>

<li property=”itemListElement” typeof=”ListItem”>

<a property=”item” typeof=”WebPage”

href=”https://example.com/books/sciencefiction”>

<span property=”name”>Science Fiction</span></a>

<meta property=”position” content=”2″>

</li>

<li property=”itemListElement” typeof=”ListItem”>

<a property=”item” typeof=”WebPage”

href=”https://example.com/books/sciencefiction/awardwinnders”>

<span property=”name”>Award Winners</span></a>

<meta property=”position” content=”3″>

</li>

</ol>

Cách 3: Convert breadcrumbs trên website sang dạng Microdata:

<ol itemscope itemtype=”http://schema.org/BreadcrumbList”>

<li itemprop=”itemListElement” itemscope

itemtype=”http://schema.org/ListItem”>

<a itemtype=”http://schema.org/Thing”

itemprop=”item” href=”https://example.com/books”>

<span itemprop=”name”>Books</span></a>

<meta itemprop=”position” content=”1″ />

</li>

<li itemprop=”itemListElement” itemscope

itemtype=”http://schema.org/ListItem”>

<a itemtype=”http://schema.org/Thing”

itemprop=”item” href=”https://example.com/books/sciencefiction”>

<span itemprop=”name”>Science Fiction</span></a>

<meta itemprop=”position” content=”2″ />

</li>

<li itemprop=”itemListElement” itemscope

itemtype=”http://schema.org/ListItem”>

<a itemtype=”http://schema.org/Thing”

itemprop=”item” href=”https://example.com/books/sciencefiction/ancillaryjustice”>

<span itemprop=”name”>Ancillary Justice</span></a>

<meta itemprop=”position” content=”3″ />

</li>

</ol>

Cách tối ưu Breadcrumbs trong SEO website hiệu quả

Với những chia sẻ trên, chắc hẳn bạn đã biết tầm quan trọng của Breadcrumb Navigation đối với SEO website. Nhưng làm sao để tối ưu hóa Breadcrumb hiệu quả nhất? Dưới đây là những cách tối ưu breadcrumb cho SEO dễ hiểu mà bạn có thể áp dụng ngay.

Ưu tiên trải nghiệm người dùng

Ưu tiên người dùng

Điều đầu tiên khi tối ưu breadcrumb là hãy đặt mình vào vị trí người dùng để thiết kế điều hướng:

  • Thiết kế breadcrumb từ góc nhìn của người dùng: Thiết kế thanh điều hướng trực quan, rõ ràng và dễ điều hướng, không gây rối mắt.

  • Tránh nhồi nhét từ khóa: Từ khóa cần xuất hiện tự nhiên, hợp lý và liên quan trực tiếp đến nội dung. Không nên spam từ khóa vì có thể gây phản cảm, ảnh hưởng đến trải nghiệm người dùng.

  • Đơn giản, ngắn gọn: Tránh sử dụng quá nhiều liên kết hay ký hiệu phức tạp khiến người dùng mất phương hướng.

Thiết kế vị trí breadcrumb hợp lý

Ưu tiên trải nghiệm người dùng

Breadcrumb hiệu quả khi được đặt ở vị trí dễ nhìn và hài hòa với thiết kế tổng thể:

  • Vị trí lý tưởng: Thường đặt ngay dưới thanh điều hướng chính hoặc phía trên tiêu đề trang.

  • Thiết kế nhất quán, rõ ràng: Sử dụng các ký hiệu phân cách đơn giản như >, /, | để breadcrumb dễ nhận diện và đẹp mắt.

  • Hiển thị tốt trên di động: Kiểm tra kỹ breadcrumb trên các thiết bị di động để đảm bảo trải nghiệm luôn liền mạch.

Tối ưu cấu trúc breadcrumb đúng chuẩn SEO

Cấu trúc breadcrumb nên được thiết kế rõ ràng nhằm hỗ trợ kế hoạch SEO website:

  • Cấu trúc chuẩn: Hãy dùng cấu trúc đơn giản, ví dụ như: Trang chủ > Danh mục > Tiêu đề trang.

  • Từ khóa liên quan: Chèn từ khóa chính một cách khéo léo trong breadcrumb, nhưng lưu ý đừng lạm dụng.

  • Không liên kết đến trang hiện tại: Breadcrumb không cần thiết chứa liên kết tới trang mà người dùng đang xem.

  • Giới hạn độ dài breadcrumb: Breadcrumb càng ngắn gọn, càng giúp người dùng dễ dàng điều hướng và theo dõi.

Tối ưu breadcrumb nâng cao bằng Schema Markup

Tối ưu breadcrumb bằng Schema Markup

Để tối ưu hóa breadcrumb trong SEO hiệu quả hơn, bạn có thể kết hợp sử dụng cùng Schema Markup

  • Sử dụng Schema Markup: Schema Markup dạng BreadcrumbList sẽ giúp Google hiểu rõ breadcrumb của bạn và hiển thị dưới dạng rich snippet trong kết quả tìm kiếm.

  • Kiểm tra Schema thường xuyên: Dùng công cụ kiểm tra dữ liệu cấu trúc của Google để chắc chắn Schema Markup hoạt động đúng và không xảy ra lỗi.

  • Theo dõi, đo lường hiệu quả: Theo dõi lượng click vào breadcrumb để biết được hiệu quả và điều chỉnh kịp thời.

Cách tạo và kiểm tra Schema Breadcrumbs khi check SEO onpage

Breadcrumb web không chỉ nâng trải nghiệm người dùng mà còn giúp Google hiểu cấu trúc nội dung của trang web. Để tạo và kiểm tra breadcrumb schema đúng chuẩn SEO, bạn hãy làm theo các bước sau đây nhé.

Tạo Breadcrumbs với Schema trên website

Trước khi cài đặt, bạn cần đảm bảo website của mình tuân thủ các yêu cầu sau để web cơ hội được hiển thị chính xác trên kết quả tìm kiếm (SERPs).

  • Nguyên tắc quản trị trang web của Google

  • Nguyên tắc về dữ liệu có cấu trúc (structured data)

Tạo Breadcrumbs với Schema

Tiếp đến, bạn có thể tạo breadcrumb bằng một trong ba cách phổ biến:

  • Cách 1 – Thêm đoạn mã JSON-LD: Đây là cách được Google khuyến khích sử dụng. JSON-LD là đoạn mã dữ liệu có cấu trúc được chèn trong phần <head> của trang web.

  • Cách 2 – Chuyển đổi HTML Breadcrumbs theo RDFa: Chèn trực tiếp vào mã HTML với thuộc tính theo chuẩn RDFa. Thường dùng khi breadcrumb đã có sẵn trên giao diện.

  • Cách 3 – Chuyển đổi HTML Breadcrumbs theo Microdata: Tương tự như RDFa, nhưng đơn giản hơn và dùng thuộc tính riêng biệt để Google nhận diện.

Các cách kiểm tra Breadcrumb web

Sau khi tạo xong breadcrumb, bạn có thể kiểm tra bằng các cách sau:

Tìm kiếm trên Google với cú pháp: site:tenmiencuaban.com để xem breadcrumb có hiển thị trong kết quả tìm kiếm không

kiểm tra theo site:url

Mở mã nguồn trang (view source) và tìm đoạn mã breadcrumb để kiểm tra vị trí và nội dung.

view source

Sử dụng công cụ Google Rich Results Test để kiểm tra dữ liệu có cấu trúc đã đúng chuẩn chưa.

dùng công cụ kiểm tra

Kiểm tra breadcrumb bằng mắt thường thông qua giao diện web

Kiểm tra breadcrumb trong Search Console nhanh chóng

Kiểm tra trong GSC

Một số lưu ý khi sử dụng Breadcrumbs website

Breadcrumb là công cụ điều hướng phụ rất hữu ích, nhưng nếu dùng không đúng cách thì lại phản tác dụng.

lưu ý khi dùng Breadcrumbs

Dưới đây là những lưu ý quan trọng để bạn sử dụng breadcrumbs website một cách hiệu quả và thân thiện với người dùng:

  • Không thay thế menu chính: Breadcrumb chỉ hỗ trợ điều hướng, không dùng thay top menu.

  • Vị trí hợp lý: Đặt ngay dưới thanh điều hướng chính, trên tiêu đề trang.

  • Thiết kế gọn gàng: Nhỏ gọn, không chiếm nhiều diện tích, không gây rối mắt.

  • Thống nhất ký hiệu phân cách: Dùng “>”, “/” hoặc “|” và giữ đồng nhất toàn site.

  • Không cần cho site đơn giản: Website 1–2 cấp nội dung không cần breadcrumb.

  • Không chèn link trang hiện tại: Người dùng đã ở trang đó thì không cần liên kết lại.

  • Viết tự nhiên, tránh nhồi từ khóa: Ưu tiên dễ hiểu, tránh tối ưu quá đà cho SEO.

  • Chỉ hiển thị một breadcrumb: Tránh hiển thị nhiều breadcrumb trên cùng một trang.

  • Tối ưu cho di động: Breadcrumb nên dễ nhìn, dễ click trên thiết bị di động.

Breadcrumbs là một công cụ tuyệt vời, kỹ thuật Technical SEO này không chỉ giúp Google đánh giá cao website của bạn mà còn hỗ trợ người dùng lướt trên website của bạn tốt hơn. MONA Media mong rằng những thông tin trên đã giúp bạn hiểu hơn về breadcrumbs là gì cũng như cách tối ưu breadcrumbs trong SEO hiệu quả. Nếu có nhu cầu triển khai SEO toàn diện cho website, hãy để chúng tôi đồng hành cùng bạn chinh phục TOP 1 Google. Liên hệ với chúng tôi ngay hôm nay để tư vấn chi tiết hơn và nhận bảng giá SEO nhanh chóng.

Dịch vụ thiết kế
website chuyên nghiệp

Sở hữu website với giao diện đẹp, độc quyền 100%, bảo hành trọn đời với khả năng
mở rộng tính năng linh hoạt theo sự phát triển doanh nghiệp ngay hôm nay!

Liên hệ Mona

    MONA có riêng một Người "Bạn Thân" cho bạn - Người Account sẽ đồng hành, hỗ trợ, hướng dẫn, đặt đồ ăn cho bạn mãi mãi, từ đây về sau!
    MONA cam kết tuyệt đối không sử dụng thông tin của bạn để bán hoặc SPAM
    Photoshot
    Hỏi đáp giáo dục 4.0
    Tạo cuộc hẹn miễn phí với MONA để giải đáp và tư vấn mọi thắc mắc về giải pháp số hoá ngành giáo dục
    Thời lượng cuộc hẹn
    45 Phút
    Ngày và giờ
    Thứ 2, ngày 25 tháng 12, 2023
    [9:30 - 10:15]

      Chọn ngày và giờ
      Khung giờ
      Quay lại
      Hãy cho MONA biết bạn là ai