Breadcrumb là một loại thẻ điều hướng với nhiều liên kết phân cấp khác nhau, thường đặt ở đầu trang. Tuy nhiên nhiều người làm SEO vẫn chưa biết công dụng breabcrumb là gì và cách tạo breadcrumb cho trang web. Chúng ta hãy cùng tìm hiểu trong bài viết sau nhé.
Mục lục
Breadcrumb là gì ?
Xuất phát từ một câu chuyện cổ Grimm về Hansel và Gretel, trong truyện 2 đứa bé đã rải những mẩu vụn bánh mì (breadcrum) để tìm đường về nhà. Thuật ngữ Breadcrumb ra đời từ nguồn cảm hứng đó.
Breadcrumb là tập hợp những liên kết nhằm giúp người dùng xác định vị trí hiện tại của mình trong cấu trúc site. Trên một website có cấu tạo phức tạp và chứa nhiều nội dung, breadcrumb navigation (điều hướng breadcrumb) là cách hiệu quả giúp người dùng định vị vị trí trong website và giúp thuận tiện hơn khi di chuyển giữa các trang.
Vị trí của Breadcrumb ở đâu ?
Thông thường trên một trang, breadcrumb nằm ở phía đầu trang, vị trí trên page title và dưới top navigation bar (nếu có), do đây là vị trí người dùng dễ thấy để click vào xem ngay.
Breadcrumb có lợi cho người dùng
– Tiện dụng cho người dùng: Breadcrumb hỗ trợ người dùng điều hướng một trang web. Đối với website lớn chứa nhiều nội dung, breadcrumb giúp người dùng định vị bản thân đang ở đâu trong cấu trúc toàn website.
– Giảm số click và thao tác để quay trở lại các trang cấp cao: Thay vì nhấn nút “Back” hoặc top menu website để quay lại trang cấp cao hơn, người dùng có thể dùng breadcrumb và di chuyển đến các category hoặc tổ chức cao hơn trên website.
– Giảm tỷ lệ thoát trang: Các điều hướng breadcrumb là phương pháp hiệu quả khuyến khích người dùng kiểm tra nội dung một website sau khi đã xem trang đích. Các liên kết của breadcrumb sẽ dẫn người dùng tới những phân trang khác và cung cấp thông tin liên quan, từ đó làm giảm tỷ lệ thoát trang.
Breadcrumb có lợi cho SEO
Breadcrumb được nhiều SEOer sử dụng như phương pháp tăng lượng anchor text gắn từ khóa trên website. Tuy nhiên nếu lạm dụng, kĩ thuật này có khả năng làm giảm UX (trải nghiệm người dùng). Việc này thì rõ ràng không hề tốt xíu nào.
Đặc biệt, trong một số trường hợp, breadcrumb của bạn sẽ hiện lên trên trang kết quả tìm kiếm, giúp tăng xác suất người dùng nhấp chuột vào kết quả của bạn giữa những kết quả tìm kiếm khác.
Breadcrumb theo vị trí
Breadcrumb theo vị trí có tên tiếng Anh là location-based breadcrumb, có chức năng giúp người dùng biết họ đang ở đâu trong hệ thống phân cấp của một website.
Location-based breadcrumb được sử dụng tốt nhất cho những website chứa nội dung được chia nhiều tầng (từ 2 trở lên).
Breadcrumb theo thuộc tính
Attribute-based breadcrumb (Breadcrumb theo thuộc tính) sẽ thể hiện thuộc tính của một trang trong website.
Breadcrumb theo thuộc tính đặc biệt phổ biến trong những website thương mại điện tử. Ví dụ, một chiếc xe có thể được phân loại là một chiếc SUV, đi kèm theo những thuộc tính như có màu đen và được ra mắt vào năm 2010.
Breadcrumb theo đường dẫn
Path-based (Breadcrumb theo đường dẫn) sẽ chỉ ra các bước, hoặc đường dẫn mà người dùng đã đi qua để truy cập một trang cụ thể.
Trong ba loại breadcrumb kể trên thì breadcrumb theo đường dẫn ít phổ biến nhất, do bản chất chức năng này cũng tương tự nút “Back” và không cho người dùng biết vị trí tương đối của họ so với cấu trúc trên site.
Hướng dẫn tạo Breadcrumb cho WordPress
Đối với WordPress, thường có 2 cách để tạo Breadcrumb như sau:
– Sử dụng plugin WordPress Breadcrumb NavXT
– Sử dụng Yoast SEO – Plugin tối ưu SEO hiệu quả nhất cho website WordPress.
Breadcrumb NavXT là WordPress plugin có chức năng tạo thanh định hướng phổ biến nhất cho website. Cách thức cài đặt NavXT tương đối đơn giản. Đầu tiên, bạn tìm kiếm từ khóa NavXT trong kho plugin của WordPress. Khi có kết quả, bạn tải về, bấm nút cài đặt và kích hoạt.
NavXT sẽ thêm Breadcrumb dưới dạng widget. Để sử dụng, bạn chọn tab Appearances -> Widgets. Khi muốn thêm Breadcrumb vào một trang bất kỳ, bạn chỉ cần vào trang đó và thả widget NavTX.
Đối với cách tạo Breadcrumb trực tiếp trên theme, bạn hãy gõ thêm đoạn snippet code sau vào file header.php:
<div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”https://schema.org/”>
<?php
if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
</div>
Khi hoàn thành, bạn có thể dùng NavXT plugin để hiển thị Breadcrumb theo ý muốn. Để cấu hình chi tiết, bạn đến mục cài đặt trang của plugin để cài đặt và thay đổi các thuộc tính của Breadcrumb nếu muốn.
Sử dụng Yoast SEO
Cách cài đặt plugin Yoast SEO tương tự NavXT. Bạn chỉ cần tìm, tải về, cài đặt và kích hoạt Yoast SEO plugin.
Để tạo Breadcrumb cho child theme WordPress, bạn chỉ cần thêm snippet code vào file single.php, page.php, hoặc header.php như bên dưới:
<?php
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb( ‘<p id=”breadcrumbs”>’,'</p>’ );
}
?>
Tiếp theo, bạn kích hoạt Breadcrumb bằng cách vào mục Yoast SEO => Search Appearance => Breadcrumbs và chọn Enable để sử dụng.
Với bài viết trên về chủ đề breadcrumb là gì, các loại breadcrumb, cách tạo breadcrumb cho website WordPress… hy vọng bạn sẽ thành công khi thực hiện thao tác tạo breadcrumb cho trang web để tăng sức cạnh tranh trên thị trường online.
