Bài viết này sẽ giải thích breadcrumb là gì, tại sao bạn phải thêm breadcrumb và cách thêm breadcrumb vào WordPress sử dụng plugin SEO Yoast hoặc RankMath.
Lưu ý 1: Yoast và RankMath sẽ cung cấp cho chúng ta 2 đoạn code breadcrumb, bạn sẽ sử dụng 1 trong 2 đoạn code breadcrumb này để thêm breadcrumb vào WordPress, tùy vào plugin SEO mà bạn đang sử dụng. Và vì bạn sẽ làm việc với code nên tốt nhất là bạn hãy tạo child theme cho WordPress trước khi đọc tiếp bài hướng dẫn này.
Lưu ý 2: Vì mỗi theme trong WordPress đều được lập trình khác nhau nên bài viết này sẽ hướng dẫn bạn thêm breadcrumb vào cuối template file header.php của parent theme mà bạn đang sử dụng. Bạn cũng có thể tự thêm code breadcrumb của Yoast hoặc RankMath vào template file single.php hoặc page.php tùy vào vị trí mà bạn muốn hiển thị breadcrumb trong trang hay bài viết.
Lưu ý 3: Mặc dù đã có plugin SEO như Yoast hoặc RankMath hỗ trợ tính năng breadcrumb, việc tự thêm breadcrumbs vào WordPress vẫn được coi là việc làm khá nguy hiểm nếu bạn không biết gì về lập trình hoặc mới làm quen với WordPress. Trong trường hợp đó, bạn có thể liên hệ một lập trình viên có kinh nghiệm để nhờ họ thêm breadcrumb vào template file của theme (hoặc bạn cũng có thể liên hệ Bác Sĩ SEO thông qua trang Facebook để được hỗ trợ thêm breadcrumb vào WordPress miễn phí).
Breadcrumb là gì?
Đừng lẫn lộn với breadcrumb bình thường trong tiếng Anh dịch ra là “vụn bánh mì”.
Breadcrumb trong website là đường liên kết phân cấp thường được hiển thị ở đầu trang web, giúp cho người dùng biết được họ đang ở trang nào trong hệ thống phân cấp trang web để hiểu và định hướng website một cách hiệu quả.
Breadcrumb vẫn luôn tồn tại trong mọi website mà bạn đã truy cập, chỉ có điều là bạn đã không để ý đến nó.
Ví dụ, đây chính là breadcrumb của bài viết này.
Vị trí cuối cùng của breadcrumb (phía ngoài cùng bên phải) là trang web mà bạn đang truy cập. Trang chủ (phía ngoài cùng bên trái) thường là cấp cao nhất của breadcrumb.
Tùy vào cách cài đặt của mỗi website mà phần breadcrumb sẽ được hiển thị dài ngắn khác nhau.
Ví dụ, nếu bài viết này nằm trong chuyên mục “Tự học SEO” và breadcrumb được thiết lập để hiển thị chuyên mục thì nó sẽ giống như thế này.
Trang chủ >> Tự học SEO >> Hướng dẫn thêm Breadcrumb vào WordPress (Yoast, RankMath)
Giờ bạn đã biết breadcrumb là gì, tiếp theo bạn sẽ tìm hiểu vì sao phải thêm breadcrumb vào WordPress.
Tại sao phải thêm breadcrumb vào WordPress?
2 lợi ích lớn nhất mà breadcrumb mang lại cho website là:
- Breadcrumb đóng vai trò như một thanh điều hướng thu gọn (navigation bar), giúp người dùng định hướng website dễ dàng hơn.
- Tối ưu SEO, giúp Google tìm thấy breadcrumb và hiển thị breadcrumb của trang web trong trang kết quả tìm kiếm, hỗ trợ tăng thứ hạng website.
Bài viết này sẽ sử dụng tính năng breadcrumb được tích hợp sẵn trong 2 plugin SEO là Yoast và RankMath.
Bạn cần làm gì trước khi thêm breadcrumb vào WordPress?
Vì bạn sẽ thêm code tạo breadcrumb vào template file header.php của parent theme nên đầu tiên bạn cần copy file này từ parent theme sang child theme. (đọc hướng dẫn tạo child theme cho bất kỳ theme nào trong WordPress tại đây)
Bạn có thể sử dụng chức năng quản lý file (File Manager) của dịch vụ hosting mà bạn đang sử dụng hoặc sử dụng FTP Client như FileZilla để copy file header.php từ parent theme sang child theme.
Ví dụ như parent theme bạn đang sử dụng là theme mặc định 2020 (Twenty Twenty) của WordPress thì file header.php trong theme 2020 sẽ có đường dẫn là:
public_html/tenmiencuaban.com/wp-content/themes/twentytwenty/header.php
Tất cả các theme trong WordPress đều có file header.php. Đây cũng là file phổ biến được sử dụng để thêm code breadcrumb vào WordPress.
Như đã đề cập ở phần mở đầu của bài viết, bạn cũng có thể tự thêm breadcrumb vào các template file khác trong parent theme (thông dụng nhất là file single.php hoặc page.php).
Bài viết này hướng dẫn thêm breadcrumb vào file header.php nhưng bạn hoàn toàn có thể làm theo các bước hướng dẫn dưới đây để tự thêm code breadcrumb vào bất kỳ template file nào trong parent theme mà bạn muốn.
Phần tiếp theo của bài viết này sẽ hướng dẫn bạn thêm breadcrumb vào WordPress sử dụng plugin Yoast SEO. Nếu bạn đang sử dụng RankMath thì hãy click vào đây để xem hướng dẫn thêm breadcrumb bằng RankMath ở bên dưới.
Thêm breadcrumb vào WordPress bằng plugin Yoast SEO
Yoast là plugin SEO được nhiều người sử dụng nhất WordPress. Bác Sĩ SEO có một bài hướng dẫn cài đặt và thiết lập Yoast SEO từ A đến Z tại đây.
Bước 1: Kích hoạt breadcrumb trong Yoast SEO
Để kích hoạt đường dẫn breadcrumb trong Yoast SEO, trong trang admin của WordPress, bạn click theo thứ tự sau: Cài đặt Yoast SEO >> Hiển thị khi tìm kiếm >> Đường dẫn >> Đã kích hoạt.
Bước 2: Thiết lập breadcrumb trong Yoast SEO
Cách tốt nhất là bạn nên giữ nguyên phần thiết lập breadcrumb mặc định của Yoast sau khi kích hoạt.
Nếu bạn muốn thực hiện một số thay đổi thì bạn có thể thay đổi những thiết lập sau, những phần thiết lập còn lại bạn nên giữ nguyên.
Dấu ngăn cách giữa các liên kết phân cấp trong đường dẫn, mặc định là dấu “>>”.
Prefix cho dường dẫn trên trang Lưu trữ (Archive, là các trang lưu trữ một loạt bài viết như trang blog, chuyên mục, thẻ tag), mặc định là chữ “Lưu trữ cho”.
Prefix cho dường dẫn trên trang Tìm kiếm (Search results, trang trả về kết quả tìm kiếm trong website), mặc định là chữ “Bạn đã tìm”.
Đường dẫn cho trang không tìm thấy 404, mặc định là “Lỗi 404: Không tìm thấy trang”.
Làm đậm cuối đường dẫn (trang hiện tại), mặc định là “Bình thường”.
Khi thực hiện xong, bạn nhớ click vào nút Lưu thay đổi và chuyển sang bước 3.
Bước 3: Thêm code tạo breadcrumb của Yoast vào cuối file header.php trong child theme
Bạn copy đoạn code sau và paste nó vào dòng cuối của file header.php trong child theme (header.php là file mà bạn đã copy từ parent theme sang child theme đã được đề cập phía trên).
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>Lưu ý: tùy vào theme mà bạn đang sử dụng, bạn có thể thêm hoặc không thêm dòng <?php và dòng ?> vào template file. Nếu bạn không chắc thì bạn có thể liên hệ Bác Sĩ SEO để được hỗ trợ tư vấn miễn phí.
Bạn nhớ click vào nút “Cập nhật tập tin” để lưu lại thay đổi.
Nếu bạn đã làm đúng theo các bước hướng dẫn trên, bạn sẽ thấy breadcrumb hiện ra trong trang web.
Nếu bạn thấy breadcrumb xuất hiện ở vị trí không phù hợp, bạn có thể thử đặt đoạn code trên vào vị trí khác trong các template file.
Thêm breadcrumb vào WordPress bằng plugin RankMath
Bước 1: Kích hoạt breadcrumb trong RankMath
Để kích hoạt đường dẫn breadcrumb trong RankMath, trong trang admin của WordPress, bạn click theo thứ tự sau: Cài đặt Rank Math >> General Settings >> Breadcrumbs >> Enable breadcrumbs function.
Bước 2: Thiết lập breadcrumb trong RankMath
Cách tốt nhất là bạn nên giữ nguyên phần thiết lập breadcrumb mặc định của RankMath sau khi kích hoạt.
Nếu bạn muốn thực hiện một số thay đổi thì bạn có thể thay đổi những thiết lập sau, những phần thiết lập còn lại bạn nên giữ nguyên.
Dấu ngăn cách giữa các liên kết phân cấp trong đường dẫn, mặc định là dấu “>>”.
Prefix cho dường dẫn trên trang Lưu trữ (Archive, là các trang lưu trữ một loạt bài viết như trang blog, chuyên mục, thẻ tag), mặc định là chữ “Lưu trữ cho”.
Prefix cho dường dẫn trên trang Tìm kiếm (Search results, trang trả về kết quả tìm kiếm trong website), mặc định là chữ “Bạn đã tìm”.
Đường dẫn cho trang không tìm thấy 404, mặc định là “Lỗi 404: Không tìm thấy trang”.
Khi thực hiện xong, bạn nhớ click vào nút Save Changes và chuyển sang bước 3.
Bước 3: Thêm code tạo breadcrumb của RankMath vào cuối file header.php trong child theme
Bạn copy đoạn code sau và paste nó vào dòng cuối của file header.php trong child theme (header.php là file mà bạn đã copy từ parent theme sang child theme đã được đề cập phía trên).
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>Lưu ý: tùy vào theme mà bạn đang sử dụng, bạn có thể thêm hoặc không thêm <?php và ?> trong đoạn code trên vào template file. Nếu bạn không chắc thì bạn có thể liên hệ Bác Sĩ SEO để được hỗ trợ tư vấn miễn phí.
Bạn nhớ click vào nút “Cập nhật tập tin” để lưu lại thay đổi.
Nếu bạn đã làm đúng theo các bước hướng dẫn trên, bạn sẽ thấy breadcrumb hiện ra trong trang web.
Nếu bạn thấy breadcrumb xuất hiện ở vị trí không phù hợp, bạn có thể thử đặt đoạn code trên vào vị trí khác trong các template file.
Như vậy là bạn đã biết cách thêm breadcrumb vào WordPress sử dụng 1 trong 2 plugin SEO thông dụng nhất là Yoast và RankMath.