Breadcrumbs là gì? Tạo breadcrumb cho wordpress bằng Yoast Seo

Breadcrumbs là gì? Theo định nghĩa breadcrumb là tập hợp các đường link phân cấp giúp khách truy cập biết mình đang ở vị trí nào của website, chuyên mục nào từ đó có thể di chuyển thuận lợi từ trang này trang khác trong 1 website. Nhằm giúp điều hướng tốt bọ tìm kiếm, cũng như giúp người dùng hiểu mình đang ở vị trí nào trên website.

Breadcrumbs là gì? có bao nhiêu cách làm Breadcrumbs

Hiện nay có rất nhiều cách làm Breadcrumbs, tuỳ theo từng mã code mà đối tượng lập trình, hay người thiết kế website sử dụng cho riêng mình. Thông thường đối với những phiên bản website làm bằng code PHP, ASP.NET thông thường hay sử dụng code để làm Breadcrumbs và sau đó dùng Breadcrumbs CSS sao cho đẹp mắt nhất.

Hoặc người thiết kế website kết hợp giữa việc sử dụng breadcrumb bootstrap kết hợp với css 3 và kết hợp với code động để tạo cho mình một breadcrumb đẹp mắt. Còn đối với những bạn chuyên dùng wordpress thì việc tạo breadcrumb thường làm theo 2 cách, 1 là dùng code, hay là tận dụng chức năng có sẵn breadcrumb Yoast Seo.

Breadcrumbs gồm có những loại

Có 3 loại breadcrumbs chính điển hình được sử dụng nhiều là

Breadcrumbs theo cấp bậc

Breadcrumbs sẽ đi từ danh mục có cấp bậc cao hơn đến thấp hơn. Nó đi từ cấp bậc “Trang chủ” (cấp 1 – cấp cao nhất) đến “Cafe Trung Nguyên” (cấp 2) rồi đến vị trí người dùng đang đọc “Cà phê cao cấp Trung Nguyên” (cấp 3). Loại breadcrumbs này cho bạn biết bạn đang đọc mục nào trên website.

Chèn hình

Breadcrumbs theo thuộc tính

Loại breadcrumbs này dựa trên những đặc tính chung của mặt hàng mà doanh nghiệp đang kinh doanh để thiết lập. Thường được sử dụng trong những trang web thương mại điện tử có nhiều sản phẩm. Chẳng hạn như website Điện máy xanh sẽ có dạng breadcrumbs như sau: Tivi > Tivi Samsung > 14 Tivi Samsung trên 50 triệu.

Đây là loại breadcrumbs theo đặc tính tivi Samsung có giá trên 50 triệu. Loại này cho người dùng biết họ đang tìm kiếm sản phẩm đúng tiêu chí hay chưa, để tiết kiệm thời gian tham khảo.

Breadcrumbs theo lịch sử

Loại này cho phép người dùng theo dõi lịch sử các trang trên website họ đã tham khảo, để giúp người dùng trở về các trang này một cách dễ dàng. Tuy nhiên hiện nay loại này đang được ít người sử dụng, vì khi các trình duyệt web nổi tiếng như Cốc Cốc, Google,… đều có hỗ trợ người dùng trở về trang trước bằng nút “Back. Loại Breadcrumbs này thường được thấy trong các website tin tức hoặc blog.

Ưu điểm của breadcrumbs trên website của bạn

Breadcrumbs cải thiện trải nghiệm người dùng

Giúp người dùng dễ dàng nhận biết vị trí của mình trên website, từ đó họ có thể điều hướng đến đúng trang trên website trong thời gian ngắn nhất. Ngoài ra, một website có breadcrumbs sẽ giúp người dùng giữ chân khách hàng lâu hơn trên website, tạo nên chỉ số session cao giúp website đạt thứ hạng cao hơn trên các công cụ tìm kiếm.

Được Google đánh giá cao

Google thích một website thân thiện với người dùng và yếu tố xếp hạng của website. Với breadcrumbs cũng thế, website sẽ giúp người dùng hiểu rõ mình đang ở đâu, giúp họ trải nghiệm trên website dễ dàng và thuận tiện hơn. Đây là điều mà Google luôn muốn hướng tới.

Ngoài ra, giúp website của bạn có đầy đủ cơ sở để đạt một thứ hạng tốt trên Google bằng việc nhận diện các danh mục trên website.

Tỷ lệ thoát thấp hơn

Nếu một website không có breadcrumbs, thì sẽ làm người dùng thấy khó là nên click tiếp vào đâu để tìm được thông tin thích hợp với mong muốn của mình. Qua đó làm cho người dùng thấy khó chịu và thoát khỏi trang web của bạn, làm tăng bounce rate trên website.

Hướng dẫn sử dụng 2 cách tạo Breadcrumbs wordpress thông dụng nhất

Cách 1: sử dụng code chèn vào file function.php

Đầu tiên nếu bạn biết chút ít về code wordpress thì sử dụng cách này nhé. Đầu tiên bạn mở file funciton.php lên sau đó copy đoạn code này paste vào:

function dimox_breadcrumbs(){
/* === OPTIONS === */
$text[‘home’] = ‘<i class=”fa fa-home”></i>’; // text for the ‘Home’ link
$text[‘category’] = ‘Tin tức từ thể loại “%s”‘; // text for a category page
$text[‘tax’] = ‘Lưu trữ về “%s”‘; // text for a taxonomy page
$text[‘search’] = ‘Kết quả từ khóa “%s”‘; // text for a search results page
$text[‘tag’] = ‘Từ khóa “%s”‘; // text for a tag page
$text[‘author’] = ‘Bài viết của tác giả %s’; // text for an author page
$text[‘404’] = ‘Lỗi 404’; // text for the 404 page
$showCurrent = 1; // 1 – show current post/page title in breadcrumbs, 0 – don’t show
$showOnHome = 0; // 1 – show breadcrumbs on the homepage, 0 – don’t show
$delimiter = ‘ &raquo; ‘; // delimiter between crumbs
$before = ‘<span class=”current”>’; // tag before the current crumb
$after = ‘</span>’; // tag after the current crumb
/* === END OF OPTIONS === */

global $post;
$homeLink = get_bloginfo(‘url’) . ‘/’;
$linkBefore = ‘<span typeof=”v:Breadcrumb”>’;
$linkAfter = ‘</span>’;
$linkAttr = ”;
$link = $linkBefore . ‘<a’ . $linkAttr . ‘ href=”%1$s”>%2$s</a>’ . $linkAfter;
if (is_home() || is_front_page()) {
if ($showOnHome == 1) echo ‘<div id=”crumbs”><a href=”‘ . $homeLink . ‘”>’ . $text[‘home’] . ‘</a></div>’;
} else {
echo ‘<div id=”crumbs”>’ . sprintf($link, $homeLink, $text[‘home’]) . $delimiter;
if ( is_category() ) {
$thisCat = get_category(get_query_var(‘cat’), false);
if ($thisCat->parent != 0) {
$cats = get_category_parents($thisCat->parent, TRUE, $delimiter);
$cats = str_replace(‘<a’, $linkBefore . ‘<a’ . $linkAttr, $cats);
$cats = str_replace(‘</a>’, ‘</a>’ . $linkAfter, $cats);
echo $cats;
}
echo $before . sprintf($text[‘category’], single_cat_title(”, false)) . $after;
} elseif( is_tax() ){
$thisCat = get_category(get_query_var(‘cat’), false);
if ($thisCat->parent != 0) {
$cats = get_category_parents($thisCat->parent, TRUE, $delimiter);
$cats = str_replace(‘<a’, $linkBefore . ‘<a’ . $linkAttr, $cats);
$cats = str_replace(‘</a>’, ‘</a>’ . $linkAfter, $cats);
echo $cats;
}
echo $before . sprintf($text[‘tax’], single_cat_title(”, false)) . $after;
}elseif ( is_search() ) {
echo $before . sprintf($text[‘search’], get_search_query()) . $after;
} elseif ( is_day() ) {
echo sprintf($link, get_year_link(get_the_time(‘Y’)), get_the_time(‘Y’)) . $delimiter;
echo sprintf($link, get_month_link(get_the_time(‘Y’),get_the_time(‘m’)), get_the_time(‘F’)) . $delimiter;
echo $before . get_the_time(‘d’) . $after;
} elseif ( is_month() ) {
echo sprintf($link, get_year_link(get_the_time(‘Y’)), get_the_time(‘Y’)) . $delimiter;
echo $before . get_the_time(‘F’) . $after;
} elseif ( is_year() ) {
echo $before . get_the_time(‘Y’) . $after;
} elseif ( is_single() && !is_attachment() ) {
if ( get_post_type() != ‘post’ ) {
$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
printf($link, $homeLink . ‘/’ . $slug[‘slug’] . ‘/’, $post_type->labels->singular_name);
if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after;
} else {
$cat = get_the_category(); $cat = $cat[0];
$cats = get_category_parents($cat, TRUE, $delimiter);
if ($showCurrent == 0) $cats = preg_replace(“#^(.+)$delimiter$#”, “$1″, $cats);
$cats = str_replace(‘<a’, $linkBefore . ‘<a’ . $linkAttr, $cats);
$cats = str_replace(‘</a>’, ‘</a>’ . $linkAfter, $cats);
echo $cats;
if ($showCurrent == 1) echo $before . get_the_title() . $after;
}

} elseif ( !is_single() && !is_page() && get_post_type() != ‘post’ && !is_404() ) {
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type->labels->singular_name . $after;
} elseif ( is_attachment() ) {
$parent = get_post($post->post_parent);
$cat = get_the_category($parent->ID); $cat = $cat[0];
$cats = get_category_parents($cat, TRUE, $delimiter);
$cats = str_replace(‘<a’, $linkBefore . ‘<a’ . $linkAttr, $cats);
$cats = str_replace(‘</a>’, ‘</a>’ . $linkAfter, $cats);
echo $cats;
printf($link, get_permalink($parent), $parent->post_title);
if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after;
} elseif ( is_page() && !$post->post_parent ) {
if ($showCurrent == 1) echo $before . get_the_title() . $after;
} elseif ( is_page() && $post->post_parent ) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = sprintf($link, get_permalink($page->ID), get_the_title($page->ID));
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
for ($i = 0; $i < count($breadcrumbs); $i++) {
echo $breadcrumbs[$i];
if ($i != count($breadcrumbs)-1) echo $delimiter;
}
if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after;
} elseif ( is_tag() ) {
echo $before . sprintf($text[‘tag’], single_tag_title(”, false)) . $after;
} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo $before . sprintf($text[‘author’], $userdata->display_name) . $after;
} elseif ( is_404() ) {
echo $before . $text[‘404’] . $after;
}
if ( get_query_var(‘paged’) ) {
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘ (‘;
echo __(‘Page’) . ‘ ‘ . get_query_var(‘paged’);
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘)’;

}
echo ‘</div>’;

}

} // end dimox_breadcrumbs()

Copy code cẩn thận nhé, kẻo bị sai sẽ ảnh hưởng, có khi site bạn không chạy nhé.

Nếu bạn muốn dùng breadcrumbs ở những vị trí nào thì dùng code sau:

<?php  dimox_breadcrumbs(); ?>

Cách 2: Tạo breadcrumb cho wordpress bằng Plugin Yoast Seo

Đầu tiên bạn cần cài đặt plugin yoast seo, Sau đó, vào Cài đặt SEO → Nâng cao → Breadcrumbs và cho phép các breadcrumbs.

1./Đăng nhập vào quản trị website đã thiết kế của bạn. Khi bạn đăng nhập, bạn sẽ ở trong ‘Bảng điều khiển’ của mình. Ở phía bên tay trái, bạn sẽ thấy một menu. Trong trình đơn đó, nhấp vào ‘SEO’.

2./Tiến hành cài đặt ‘SEO’ sẽ mở rộng cung cấp cho bạn các tùy chọn bổ sung. Nếu bạn không nhìn thấy cài đặt ‘Nâng cao’ trong trình đơn ‘SEO’ của mình, trước hết hãy bật cài đặt nâng cao của bạn .

Trình đơn với cài đặt nâng cao bị Vô hiệu hóa
tính năng nâng cao

3./ Nhấp vào ‘Nâng cao’. hoặc Advanced

4./Bật chức năng: Nhấp vào tab ‘Breadcrumbs’ và bật / tắt Breadcrumbsđể bật. Điều chỉnh cài đặt theo sở thích của bạn.

5.Sau đó  ‘Lưu Thay đổi’.

6. Hiển thị breadcrumbs, bạn thêm code sau vào ở vị trí cần hiển thị

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

Đây là 2 cách tạo breadcrumbs đơn giản nhất, bạn có thể lựa chọn 1 trong 2 cách trên để tạo cho site của mình? Việc tìm hiểu breadcrumbs là gì? cũng như việc tạo breadcrumbs là những việc làm hết cần thiết đối với thiết kế website chuẩn seo. Vì đây cũng là 1 tiêu chính đánh giá trong seo. Chúc các bạn thực hiện thành công!