Kiến thức SEO

Breadcrumbs là gì? Hướng dẫn thêm vào trang WordPress

Breadcrumbs là một phần thiết yếu của hầu hết mọi trang web. Công cụ hỗ trợ điều hướng này không chỉ cho mọi người biết họ đang ở đâu trên trang web mà còn giúp Google tìm ra cách cấu trúc trang web của bạn. Đó là lý do tại sao việc thêm Breadcrumbs lại cực kỳ quan trọng trong SEO. Nếu bạn đang tìm hiểu về Breadcrumbs là gì thì bài viết dưới đây sẽ giải đáp cho bạn. Đọc ngay bài viết để tìm hiểu thông tin hữu ích nhé.

Breadcrumbs là gì? Lợi ích của việc điều hướng Breadcrumb

Breadcrumbs là gì?

Breadcrumbs là một công cụ hỗ trợ điều hướng cho phép người dùng theo dõi vị trí hiện tại của họ trên một trang web hoặc giao diện. Đường dẫn breadcrumb hiển thị trang mà người dùng hiện đang truy cập và mối quan hệ của nó với các trang họ đã truy cập trước đó hoặc hệ thống phân cấp của các trang chính cấp cao hơn phía trên trang hiện tại. Điều hướng Breadcrumb cung cấp cho người dùng khả năng điều hướng nhanh chóng quay lại điểm bắt đầu hoặc các trang trước đó sau lần truy cập của họ.
Breadcrumbs thường được hiển thị dưới dạng một dãy các liên kết tương đối ngắn, biểu thị các mục lục con từ mức độ cao nhất đến mức độ thấp hơn.
Ví dụ: Nếu bạn đang xem một trang sản phẩm trên một trang web mua sắm trực tuyến, breadcrumbs có thể hiển thị như sau: Trang chủ > Danh mục sản phẩm > Loại sản phẩm > Tên sản phẩm. Bằng cách nhấp vào các liên kết này, người dùng có thể dễ dàng điều hướng trở lại các mức độ trước đó hoặc trực tiếp đến các mức độ khác.
Breadcrumbs có ích trong việc cung cấp hướng dẫn dễ sử dụng cho người dùng, giúp họ hiểu rõ vị trí của mình trong trang web hoặc ứng dụng và tạo cảm giác điều hướng thuận tiện.

Lợi ích của việc điều hướng Breadcrumbs là gì?

Sử dụng Breadcrumbs trong thiết kế trang web có thể mang lại lợi ích cho trải nghiệm người dùng (UX) và SEO. Nói chung, điều hướng đường dẫn có lợi hơn cho các trang web có kiến trúc trang web sâu. Bởi vì nó giúp người dùng điều hướng giữa nhiều cấp độ.
Sử dụng Breadcrumbs cho các trang web lớn và trang web có các trang được sắp xếp theo thứ bậc. Bạn không nên sử dụng đường dẫn cho các trang web cấp đơn không có phân cấp hoặc nhóm hợp lý. Tuy nhiên, mình vẫn khuyên bạn nên triển khai breadcrumbs vì lợi ích tiềm năng lớn hơn thời gian đầu tư. Hãy cùng tìm hiểu những lợi ích chính của việc thêm Breadcrumbs vào trang web dưới đây:
  • Khuyến khích người dùng khám phá trang web: Breadcrumbs có thể nhắc người dùng điều hướng đến các trang khác trên trang web của bạn. Điều này có thể dẫn đến doanh thu quảng cáo hoặc bán hàng cao hơn. Ví dụ: Người dùng truy cập trang sản phẩm Adidas nhưng không tìm thấy những gì họ đang tìm kiếm. Thay vì thoát, họ có thể chú ý đến menu đường dẫn. Quyết định khám phá các dòng sản phẩm khác. Và cuối cùng mua một mặt hàng tương tự
  • Xây dựng liên kết nội bộ tốt cho SEO: Giống như các loại Internal Link, đường dẫn giúp công cụ tìm kiếm truy cập các trang trên website của bạn và hiểu cấu trúc trang web. Nói cách khác, liên kết nội bộ có thể cải thiện khả năng thu thập dữ liệu của trang web. Điều này có thể dẫn đến nhiều trang xuất hiện hơn trong chỉ mục của Google. Và thứ hạng cao hơn cho các từ khóa có liên quan
  • Cải thiện trải nghiệm người dùng (UX): Đường dẫn có thể giảm số lần nhấp chuột cần thiết để di chuyển lên trên trong kiến trúc của trang web và do đó cải thiện UX. Trên một trang web không có đường dẫn, người dùng có thể cần nhấn nút quay lại nhiều lần. Hoặc điều hướng qua nhiều menu. Nhưng với Breadcrumbs, người dùng có thể nhấp vào một liên kết duy nhất trong đường dẫn
  • Tạo thêm nhấp chuột từ công cụ tìm kiếm: Breadcrumbs có thể xuất hiện trong SERP của Google. Kết quả chi tiết thường hấp dẫn và nhiều thông tin hơn, vì vậy chúng có thể thu hút nhiều nhấp chuột hơn

Các loại Breadcrumb khác nhau

Mặc dù Breadcrumb dựa trên phân cấp là phổ biến nhất nhưng cũng có nhiều loại khác nhau. Chúng ta hãy tìm hiểu từng loại dưới đây:

Breadcrumbs dựa trên hệ thống phân cấp

Breadcrumbs dựa trên hệ thống phân cấp tuân theo kiến trúc trang web (hoặc “hệ thống phân cấp”) của trang web của bạn.
Hãy xem xét ví dụ sau:
Trong ví dụ này, Breadcrumbs bắt đầu với danh mục cấp cao nhất. Và sau đó tiến tới các danh mục con lồng nhau, cụ thể hơn trước khi đến trang hiện tại, Máy ảnh DSLR. Loại đường dẫn này đặc biệt hữu ích cho người dùng truy cập trang web từ SERP của Google. Nó cho phép họ nhanh chóng quay trở lại hệ thống phân cấp để khám phá thêm các tùy chọn nếu họ muốn.

Breadcrumb dựa trên thuộc tính

Breadcrumbs dựa trên thuộc tính tạo ra một đường dẫn động dựa trên các bộ lọc khác nhau mà người dùng có thể áp dụng trên một trang. Breadcrumbs dựa trên thuộc tính chủ yếu được sử dụng trên các trang web thương mại điện tử. Nơi chúng được ghép nối với các đường dẫn dựa trên thứ bậc.
Ví dụ:
Trên một trang web thương mại điện tử, điều hướng Breadcrumbs này rất hữu ích khi người dùng muốn xem tất cả các sản phẩm có cùng thuộc tính.

Breadcrumb dựa trên đường dẫn

Breadcrumbs dựa trên đường dẫn hiển thị Breadcrumbs duy nhất mà người dùng đã đi đến một trang cụ thể. Nhưng thay vì liệt kê toàn bộ đường dẫn, kiểu Breadcrumbs này thường được triển khai dưới dạng nút quay lại. Giúp người dùng quay lại trang trước.
Đây là một ví dụ từ Adidas:
Breadcrumbs dựa trên đường dẫn không hữu ích trong nhiều trường hợp. Chúng chỉ phục vụ chức năng tương tự như nút “quay lại” trong trình duyệt của bạn. Đó là lý do tại sao bạn không thường xuyên nhìn thấy những loại breadcrumb này. Các nhà thiết kế trang web thường ưa chuộng các loại điều hướng đường dẫn có nhiều chức năng hơn.

Cách thêm Breadcrumbs vào trang web WordPress

Vì WordPress là hệ thống quản lý nội dung (CMS) phổ biến nhất nên hãy xem cách bạn có thể thêm đường dẫn trong WordPress. Một số chủ đề WordPress hỗ trợ đường dẫn ngay lập tức. Nếu chủ đề của bạn không làm được điều này, bạn có thể sử dụng plugin như Yoast SEO và làm theo các bước dưới đây.
  • Đi tới “Plugin” -> “Thêm mới”
  • Tìm kiếm “Yoast” và nhấp vào “Cài đặt ngay”
  • Nhấn nút “Kích hoạt” xuất hiện sau khi cài đặt hoàn tất
Tiếp theo, bạn cần thêm một đoạn mã nhỏ vào phần tệp header.php trong chủ đề của mình. Nếu bạn không phải là coder thì chúng tôi khuyên bạn nên nhờ lập viên trợ giúp. Việc thay đổi tệp chủ đề có thể dẫn đến những vấn đề lớn cho trang web của bạn nếu bạn mắc lỗi.
Nếu bạn muốn tự làm, hãy sao chép đoạn mã bên dưới và điều hướng đến “Giao diện” ->Trình chỉnh sửa tệp chủ đề” từ thanh bên.
<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb( '</p><p id="breadcrumbs">','</p><p>' ); } ?>
Trong trình chỉnh sửa chủ đề, dán mã bạn đã sao chép vào phần “header.php” của chủ đề.
Sau đó, nhấp vào “Cập nhật tệp” để lưu các thay đổi.
Sau đó, đi tới “Yoast SEO” -> “Cài đặt” từ thanh bên.
Sau đó, cuộn đến “Nâng cao” -> “Breadcrumbs”
Một biểu mẫu sẽ xuất hiện nơi bạn có thể định cấu hình đường dẫn của mình dựa trên cách bạn muốn chúng xuất hiện trên trang web của mình.
Cuối cùng, bật tùy chọn “Bật đường dẫn cho chủ đề của bạn” được tìm thấy bên dưới biểu mẫu.

Mẹo về Breadcrumb giúp điều hướng trang web dễ dàng hơn

Sử dụng Breadcrumbs để hỗ trợ điều hướng chính

Breadcrumbs trang web không nên thay thế menu điều hướng chính. Hãy coi Breadcrumbs như một cách thay thế mà người dùng có thể điều hướng xung quanh trang web của bạn. Họ nên liên kết đến các trang có liên quan cao và giúp người dùng hiểu cấu trúc trang web.
Trong ví dụ bên dưới: Menu chính của website Dell xuất hiện ngay phía trên đường dẫn của nó. Có nghĩa là người dùng có thể dễ dàng truy cập vào nhiều tùy chọn Breadcrumbs.
Và văn bản liên kết mô tả trong điều hướng đường dẫn giúp người dùng dễ dàng hiểu được các liên kết sẽ đưa họ đến đâu.

Sử dụng dấu phân cách giữa các cấp độ

Tách từng liên kết trong đường dẫn breadcrumb để cải thiện khả năng đọc. Nhiều trang web sử dụng dấu lớn hơn (>), mũi tên (→) hoặc dấu gạch chéo lên (/).
Đây là một ví dụ từ website Điện Máy Xanh:

Không bao gồm liên kết đến trang hiện tại

Điều hướng đường dẫn không được bao gồm liên kết đến trang hiện tại. Một liên kết đến trang hiện tại không phục vụ mục đích và có thể gây nhầm lẫn cho người dùng. Tuy nhiên, cách tốt nhất là đặt tên trang hiện tại theo đường dẫn đường dẫn.
Giống như Best Buy có ở đây:
Bao gồm tên trang hiện tại là tốt cho:
  • Breadcrumbs UX: Vì nó giúp người dùng hiểu họ đang ở đâu và dấu vết hiển thị gì
  • Breadcrumbs SEO: Vì nó cho phép bạn thêm từ khóa đề cập tự nhiên vào trang

Giữ thiết kế đơn giản

Thiết kế trang web Breadcrumb phải đơn giản và không rườm rà nhất có thể. Vì vậy, nó hữu ích mà không làm người đọc mất tập trung vào nội dung chính của trang.
Ví dụ: Đây là cách Slack thiết kế đường dẫn trên trang web của họ:
Đường dẫn của Slack xuất hiện ở góc trên bên phải của trang web, với phông chữ nhỏ nhưng dễ đọc phù hợp với phần còn lại của trang web. Ngay cả những dấu phân cách giữa các loại cũng đơn giản. Những đường dẫn này rất dễ xác định và dễ hiểu. Nhưng họ không thu hút được nhiều sự chú ý hơn mức cần thiết.

Thường xuyên kiểm tra các liên kết hoạt động đúng cách

Liên kết bị hỏng sẽ làm ảnh hưởng cho SEO và UX, vì vậy điều quan trọng là phải đảm bảo đường dẫn của bạn hoạt động bình thường.

Kết luận

Bài viết trên đây mình đã chia sẻ cho các bạn về Breadcrumbs là gì và cách thêm vào WordPress. Breadcrumbs cung cấp một cách dễ hiểu để khách truy cập điều hướng trang web của bạn và họ hiểu ngay cách cấu trúc trang web của bạn hoạt động. Hy vọng với những chia sẻ của mình sẽ giúp ích cho các bạn có thêm kinh nghiệm áp dụng vào thực chiến.
Nếu các doanh nghiệp cần tìm đơn vị triển khai Google Ads hoặc Marketing tổng thể thì liên hệ ngay với X3Sales để được hỗ trợ nhanh nhất. Chúng tôi có 8 năm kinh nghiệm triển khai hàng nghìn dự án lớn nhỏ và đạt được nhiều thành tựu nhất định.
***Nguồn tài liệu tham khảo: https://www.semrush.com/blog/breadcrumbs-for-websites/#different-types-of-breadcrumbs
5/5 - (100 bình chọn)
Xem thêm  Backlink là gì? Cách xây dựng Backlink chất lượng cho website

Author

Hòa Hợp

Mình là Hòa Hợp - Hiện tại đang phụ trách Content Marketing tại X3Sales. Với 3 năm kinh nghiệm triển khai nhiều chiến dịch Google Ads. Mình mong rằng những trải nghiệm thực chiến tại X3Sales là kinh nghiệm hữu ích cho độc giả

Leave a comment

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 *

Nhiều người quan tâm
x
Contact Me on Zalo