Hướng dẫn chèn Breadcrumbs cho Website WordPress với plugin Yoast Seo

Hôm nay ThemeTOT sẽ hướng dẫn chèn Breadcrumbs Yoast SEO được thao tác trên theme Flatsome nhé! Do đó, trong quá trình hướng dẫn của mình, một số thao tác có thể sẽ không giống đối với các theme khác. Tuy nhiên, về cơ bản các bạn chỉ cần tìm đúng file .php của trang mà bạn muốn hiển thị Breadcrumbs trong theme là được!

Breadcrumbs là gì?

Breadcrumbs là một tính năng hữu ích giúp người dùng dễ dàng điều hướng trang web và cũng cải thiện SEO cho trang web của bạn. Plugin Yoast SEO là một trong những công cụ phổ biến nhất để thêm Breadcrumbs vào trang web WordPress của bạn. Dưới đây là hướng dẫn chi tiết cách chèn Breadcrumbs cho Website WordPress với plugin Yoast SEO.

Chèn Breadcrumbs Yoast Seo cho Website WordPress

Bước 1: Mở tính năng Breadcrumbs trong Yoast SEO

Có thể bạn đã cài plugin Yoast SEO trước đó rồi hoặc nếu chưa cài thì tải plugin về và cài đặt tại đây Sau khi cài đặt xong, các bạn vào Quản trị > SEO > Advanced và mở Enable Breadcrumbs (phiên bản 5.7.1) Đối với phiên bản Yoast SEO 7.9 trở lên, cài đặt Breadcrumbs sẽ hơi khác một chút như sau: Ngay từ bây giờ website của bạn đã sẵn sàng tính năng hiển thị Breadcrumbs rồi nhé. Tuy nhiên, không phải chỉ ấn Enable là nó hiện luôn, mà việc quan trọng nhất là mình phải chèn một đoạn code PHP bỏ vào đúng vị trí cho nó hiển thị trong theme nữa. Mời bạn tiếp tục bước 2:

Bước 2: Chèn code hiển thị Breadcrumbs trong theme

Bây giờ chỉ cần chèn đoạn code PHP bên dưới vào bất kỳ vị trí nào trong theme để nó hiển thị.

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

Tuy nhiên, theo thói quen điều hướng của người dùng, chúng ta chỉ nên chèn breadcrumbs vào đầu các trang đơn (page.php) + trang bài viết (single.php). Mình sẽ hướng dẫn các bạn thực hiện lần lượt từng trang một trong theme Flatsome nhé!

Chèn Breadcrumbs vào trang đơn

Trang đơn của theme Flatsome có nhiều kiểu style (template-page) khác nhau. Do đó, theo ý kiến cá nhân của mình thì chỉ nên chèn Breadcrumbs vào trang đơn có bố cục sidebar trái hoặc sidebar phải, vì nó hiển thị tương đương như trong bài viết nên sẽ đẹp và hữu dụng hơn. Các bạn không nên chèn Breadcrumbs vào các kiểu trang khác, đặc biệt là kiểu full-width.
Các bạn vào File Manager trong hosting, truy cập thư mục wp-content > themes > flatsome > page-right-sidebar.php hoặc page-left-sidebar.php.

Bây giờ mình sẽ thực hiện chèn Breadcrumbs vào trang đơn có sidebar bên phải nhé! Mở file page-right-sidebar.php.

Chèn đoạn code mình gửi bên trên đó vào ngay sau <div class=”page-inner”> và ngay trên đoạn <?php if(get_theme_mod(‘default_title’, 0)){ ?>. Các bạn xem kỹ hình trên để copy – paste vào cho chuẩn nhé!

Sau đó, các bạn copy đoạn CSS này bỏ vào phần tùy chọn CSS của theme nhé! Giao diện – Tùy chỉnh – Tùy chỉnh CSS:

.breadcrumbs {
    text–transform: uppercase;
    color: #222;
    font–weight: 700;
    letter–spacing: 0;
    padding: 0;
}
#breadcrumbs {
    margin–bottom: 10px;
    font–size: 14px;
    color: gray;
    text–transform: none;
}
.breadcrumbs a {
    color: #fba646;
    margin–left:0 !important;
    font–weight: 400;
}

Sau khi dán đoạn code vào đúng vị trí và update CSS cho nó, các bạn lưu lại để nó có hiệu lực nhé, và đây là kết quả.

Chèn Breadcrumbs vào bài viết

Chèn breadcrumbs vào bài viết cũng gần tương đương như chèn vào trang đơn.

Các bạn truy cập thư mục sau trong File manager: wp-content > themes > flatsome > template-parts > posts.

Đối với theme Flatsome, bài viết có thể tùy chỉnh sidebar trái hoặc sidebar phải, tương ứng với 2 file layout-left-sidebar.php và layout-right-sidebar.php. Các bạn có thể chèn code hiển thị Breadcrumbs vào 2 file đó.

Tuy nhiên, trong theme Flatsome có một file entry-header.php sẽ áp dụng phần đầu trang cho cả 2 layout trên. Do đó, chúng ta sẽ chèn code hiển thị Breadcrumbs tại file này. Bạn cần truy cập đường dẫn sau: wp-content > themes > flatsome > template-parts > posts > partials > entry-header.php

Bạn copy đoạn code hiển thị Breadcrumbs bên trên rồi chèn vào ngay sau <header class=”entry-header”> như hình trên nhé! Sau đó, lưu lại và hưởng thành quả.

Lợi ích của việc sử dụng Breadcrumbs

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

• Dễ dàng điều hướng: Breadcrumbs cung cấp cho người dùng một cách rõ ràng và dễ hiểu để điều hướng giữa các phần của trang web. Người dùng có thể nhanh chóng trở về các trang trước đó mà không cần phải sử dụng nút “Back” của trình duyệt hoặc tìm kiếm lại từ đầu.
• Hiểu cấu trúc trang web: Breadcrumbs giúp người dùng hiểu được vị trí hiện tại của họ trong cấu trúc phân cấp của trang web. Điều này đặc biệt hữu ích trên các trang web lớn với nhiều cấp độ nội dung, như các trang thương mại điện tử hoặc trang web tin tức.
• Giảm tỷ lệ thoát trang: Khi người dùng có thể dễ dàng điều hướng và tìm thấy nội dung họ cần, họ sẽ ít có khả năng rời khỏi trang web một cách nhanh chóng. Điều này giúp giảm tỷ lệ thoát trang (bounce rate).

2. Tối ưu hóa SEO

• Cải thiện khả năng thu thập dữ liệu của các công cụ tìm kiếm: Breadcrumbs cung cấp cho các công cụ tìm kiếm (như Google) một cấu trúc liên kết rõ ràng và dễ hiểu. Điều này giúp các bot của công cụ tìm kiếm dễ dàng thu thập dữ liệu và lập chỉ mục các trang trên trang web của bạn.
• Tăng khả năng hiển thị trên kết quả tìm kiếm: Google và các công cụ tìm kiếm khác thường hiển thị breadcrumbs trong kết quả tìm kiếm. Điều này không chỉ giúp kết quả tìm kiếm của bạn nổi bật hơn mà còn cung cấp cho người dùng thông tin về cấu trúc trang web của bạn ngay trong kết quả tìm kiếm.
• Tăng cường liên kết nội bộ (internal linking): Breadcrumbs tạo ra các liên kết nội bộ đến các trang cấp trên. Điều này không chỉ giúp người dùng mà còn giúp phân bổ PageRank (một yếu tố xếp hạng của Google) trên toàn bộ trang web của bạn.
• Giảm tỷ lệ thoát trang (bounce rate): Tỷ lệ thoát trang thấp hơn không chỉ tốt cho trải nghiệm người dùng mà còn có thể ảnh hưởng tích cực đến SEO, vì Google xem tỷ lệ thoát trang cao như một dấu hiệu của trải nghiệm người dùng kém.

Lời kết

Các bạn thực hiện tuần tự theo các bước chèn Breadcrumbs Yoast SEO mình hướng dẫn nhé! Chúc các bạn làm tốt và có những trải nghiệm thú vị tại ThemeTOT