Code tạo Breadcrumbs cho WordPress chuẩn Google Rich Snippets

Nội dung

Breadcrumb là gì

Breadcrumb là 1 tập hợp những liên kết 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. Thuật ngữ này gắn với câu chuyện cổ Grimm: Hansel và Gretel, trong đó 2 đứa trẻ đã rải những mẩu bánh mỳ vụn (breadcrumb) dọc đường để tìm về nhà.

Đây cũng chính là nhiệm vụ của breadcrumb trong User Experience của website và SEO. Trong một website có cấu tạo phức tạp hoặc chứa nhiều nội dung, breadcrumb navigation là một cách hiệu quả để giúp người dùng định vị vị trí trong website và giúp việc di chuyển giữa các trang thuận tiện hơn.

Vai trò của Breadcrumb trong SEO

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

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

– Giảm số click 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 website để quay trở lại trang cấp cao hơn, người dùng có thể sử dụng breadcrumb và dễ dàng di chuyển đến các category hoặc tổ chức 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 hữu hiệu để khuyến khích người truy cập kiểm tra nội dung của một website 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.

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

Rất nhiều người làm SEO dùng breadcrumb như một cách tăng lượng anchor text có gắn keyword trên website; tuy nhiên nếu bị lạm dụng, kĩ thuật này có thể 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), tăng khả năng người dùng click vào kết quả của bạn giữa những kết quả tìm kiếm khác

Cài đặt Breadcrumb cho site WordPress của bạn

Đầu tiên các bạn dán code này vào trong functions.php của theme:

CSS: dán xuống cuối file style.css của bạn


Sau đó đặt code vào chỗ cần hiển thị breadcrumbs trên trang:

<?php do_action('vietnamtutor_breadcrumbs); ?>

Kiểm tra tại Google Rich Snippet Test

Truy cập: https://search.google.com/test/rich-results

Dán URL của site bạn sau khi đã thêm breadcrumbs rồi bấm TEST URL

Nếu kết quả ra xanh đẹp như hình là hoàn thành!

Chúc các bạn thành công!

Anthony Nguyễn

Cây bút chính tại VietnamTutor

Bài viết cùng chuyên mục

Git reset revert restore: chọn lệnh đúng

Bài viết so sánh git reset, git revert và git restore theo mục đích sử dụng: sửa staging area, khôi phục file, undo commit chưa push

Git commit vào nhánh sai: cách chuyển an toàn

Bài viết hướng dẫn xử lý git commit vào nhánh sai theo từng tình huống: commit chưa push, đã push, nhiều commit liên tiếp hoặc branch

TypeScript cho website doanh nghiệp: API, form và lỗi

TypeScript cho website doanh nghiệp đáng dùng khi bạn cần kiểm soát API contract, form schema, CMS payload và cấu hình môi trường. Bài này giúp

React Server Components performance: khi nào nên dùng?

React Server Components performance không phải phép màu. Bài này giúp bạn biết khi nào RSC giảm JavaScript thật, khi nào làm kiến trúc phức tạp

Git commit nhầm file: bỏ file khỏi commit an toàn

Bài viết hướng dẫn xử lý git commit nhầm file theo từng tình huống: chưa commit, đã commit chưa push, đã push lên remote, hoặc lỡ

Git reflog: khôi phục commit đã mất an toàn

Bài viết hướng dẫn dùng git reflog để khôi phục commit đã mất sau reset, rebase, amend hoặc xóa nhánh. Bạn sẽ biết cách đọc reflog,

Cloudflare Cache Rules WordPress: kiểm tra cache đúng cách

Hướng dẫn audit Cloudflare Cache Rules WordPress bằng response headers, thứ tự rule và checklist tránh cache nhầm trang động.

Tối ưu ảnh WordPress: danh sách kiểm tra LCP

Checklist tối ưu ảnh WordPress giúp cải thiện LCP mà không làm ảnh mờ, vỡ layout hoặc lazy load sai ảnh quan trọng.

Git pull bị conflict: cách sửa không mất code

Bài viết hướng dẫn cách xử lý git pull bị conflict theo từng bước: kiểm tra trạng thái, sửa file xung đột, test lại và hoàn

Next.js production performance: chọn SSR, SSG, ISR hay Edge

Bài viết giúp developer và tech lead chọn cách render phù hợp để tối ưu Next.js production performance mà không làm kiến trúc phức tạp quá

Cách quét mã độc WordPress: Checklist phát hiện và xử lý sớm

Scan malware WordPress cần kết hợp file integrity, user, redirect và cảnh báo lỗ hổng theo lịch rõ ràng.

Làm gì khi website bị hack? 10 bước cần xử lý ngay trong 24 giờ

Website bị hack cần được cô lập, sao lưu hiện trạng và làm sạch theo quy trình. Đây là checklist xử lý an toàn trong 24