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

Ngày: 01-04-2020 bởi: Tùng Bùi Xem: 461 lượt

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ì

Breadcrumbs là gì?

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.

bradcrumbs theo cấp bậc

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

ưu điểm của breadcrumbs

ưu điểm của breadcrumbs

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.

Breadcrumb có vai trò gì đối với seo?

Breadcrumb tiện dụng với người dùng

- Tiện dụng cho người dùng: Breadcrumb chính là công cụ dùng để hỗ trợ để người dùng điều hướng một trang web. Đối với những website lớn có nhiều nội dung thì breadcrumb sẽ giúp cho người dùng định vị bản thân so với cấu trúc toàn site

- Giảm số click chuột và thao tác để quay trở lại các trang cấp cao: Thay vì sử dụng nút "Back" hoặc top menu của trang đó để quay trở lại trang cấp cao hơn, bạn có thể dùng breadcrumb và dễ dàng di chuyển đến các category (chuyên mục) hoặc tổ chức các cấp cao hơn trong website.

- Giảm bounce rate: Các điều hướng của breadcrumb là một phương pháp rất hữu hiệu để khuyến khích người dùng truy cập kiểm tra nội dung của một trang web sau khi đã xem trang đích. Các liên kết của breadcrumb sẽ dẫn người dùng đến các phân trang khác và cung cấp những thông tin liên quan. Điều này giúp làm giảm tỷ lệ thoát trang nói chung.

Breadcrumb có tác dụng đặc biệt với SEO

Hiện nay có rất nhiều người làm dịch vụ seo giá rẻ đều dùng breadcrumb như một cách để có thể tăng lượng anchor text có gắn keyword trên trang website; tuy nhiên nếu bạn lạm dụng, kĩ thuật này có thể sẽ làm giảm UX (trải nghiệm người dùng), và việc này thì không bao giờ là tốt. Quan trọng hơn, trong một vài trường hợp, breadcrumb của bạn có thể hiện lên trên kết quả tìm kiếm (SERPs), giúp tăng khả năng người dùng click vào kết quả của bạn so với những kết quả tìm kiếm khác của các đối thủ.

Breadcrumb có tác dụng đặc biệt với SEO

Tại sao nên sử dụng Breadcrumbs?

Chắc hẳn các bạn đã biết được bradcrumbs là gì rồi phải không nào? Ngoài những lợi ích tuyệt vời mà tungphat.com đã kể ở trên, bạn nên sử dụng Breadcrumbs cho trang website vì những lý do sau đây:

  • Breadcrumbs sẽ giúp cho website của bạn có cấu trúc mạch lạc, dễ dàng tìm kiếm hơn rất nhiều.
  • Điều hướng khách truy cập tốt hơn.
  • Giúp Google dễ dàng nhận thấy sự liên quan giữa các nội dung trên website.

Tối ưu Breadcrumbs cho website

Yếu tố đầu tiên mà bạn cần quan tâm khi tạo một Breadcrumbs đó chính là phải vì lợi ích người dùng

Breadcrumbs có vai trò rất lớn cho việc sự tăng trưởng của một website. Tuy nhiên nếu bạn không biết cách sử dụng thì bạn sẽ không thể nào đạt được những hiệu quả như mong đợi được. Và sau đây là một số lưu ý mà bạn cần phải thuộc nằm lòng để có thể tối ưu hóa Breadcrumbs cho website:

Breadcrumbs phải hướng đến người dùng

Khi tạo Breadcrumbs, bạn cần phải đặt lợi ích của người dùng lên hàng đầu. Nếu nó có tốt cho SEO thì đó chỉ là lợi ích thêm vào sau đó mà thôi. Tuyệt đối không nên lạm dụng Breadcrumbs và nhồi nhét từ khóa một cách vô tội vạ, quá đà. Điều này sẽ gây ảnh hưởng trực tiếp đến trải nghiệm của người dùng và gây ra rất nhiều hệ lụy không nhỏ cho website của bạn như: tăng tỷ lệ thoát trang, giảm lượt click chuột, giảm lượng truy cập,…

Vị trí của Breadcrumbs ở đâu?

Thường thì Breadcrumbs nên được đặt ở ngay phía đầu trang, ở trên page title và dưới top navigation bar (nếu có) vì đây là vị trí mà người truy cập dễ dàng nhìn thấy và sẽ click vào ngay mỗi khi cần.

Thiết kế Breadcrumbs là làm gì?

Bạn nên thiết kế Breadcrumbs với kích thước hợp lý, phù hợp với tổng thể của một website. Ngoài ra, Breadcrumbs không nên chiếm nhiều diện tích hoặc quá nổi bật vì chúng sẽ lấy đi sự chú ý của người xem đối với top menu và page title.

Ngoài ra, không nên link Breadcrumbs đến chính nó. Ở vị trí trang hiện tại, bạn có thể ghi đề mục vài in đậm để người dùng nhận biết.

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’] = ‘’; // 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 = ‘ » ‘; // delimiter between crumbs
$before = ‘’; // tag before the current crumb
$after = ‘’; // tag after the current crumb
/* === END OF OPTIONS === */

global $post;
$homeLink = get_bloginfo(‘url’) . ‘/’;
$linkBefore = ‘’;
$linkAfter = ‘’;
$linkAttr = ”;
$link = $linkBefore . ‘%2$s’ . $linkAfter;
if (is_home() || is_front_page()) {
if ($showOnHome == 1) echo ‘

’;
} else {
echo ‘
’ . 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(‘ $cats = str_replace(‘’, ‘’ . $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(‘ $cats = str_replace(‘’, ‘’ . $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(‘ $cats = str_replace(‘’, ‘’ . $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(‘ $cats = str_replace(‘’, ‘’ . $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 ‘

’;

 

}

} // 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é.

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 .

yoast seo dashboard advanced disabled

YOAST SEO DASHBOARD ADVANCED DISABLED

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

yoast seo advanced

YOAST SEO 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.

bật hoặc tắt breadcrumbs

BẬT HOẶC TẮT BREADCRUMBS

 

 

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ị

’,‘

‘); } ?>

 

Đâ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!

 

 

Bài viết tương tự của Breadcrumbs là gì? Tạo breadcrumb cho wordpress bằng Yoast Seo

Hướng dẫn thay đổi hình ảnh Slider bằng UX theme Flatsome
Tùng Bùi
Tùng Bùi Tùng Phát CEO. Đam mê SEO website, thiết kế website, đá bóng, offline cùng mọi người.
Facebook Youtube
Gọi điện thoại
0902.313.677

CSKH 24/7: 028.7776.8789

0902313677Zalo

Email hỗ trợ: info@tungphat.com

info@tungphat.com Email

Top