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

Skills trong Claude Code: biến quy trình thành lệnh tái dùng

Hướng dẫn dùng skills trong Claude Code: cấu trúc SKILL.md, vị trí lưu cho cá nhân và team, kiểm soát ai được gọi skill, và các

Plan mode Claude Code: bắt AI lập kế hoạch trước khi viết code

Bài giải thích plan mode trong Claude Code: cách bật bằng Shift+Tab hoặc /plan, Claude được làm gì khi chỉ-đọc, checklist đọc plan trước khi duyệt,

Checkpoint trong Claude Code: quay lại khi AI sửa hỏng code

Bài giải thích cơ chế checkpoint của Claude Code, cách dùng /rewind để khôi phục code và hội thoại, những trường hợp checkpoint không cứu được,

Permission mode trong Claude Code: chọn mức quyền an toàn

Bài giải thích 6 permission mode của Claude Code, cách đổi chế độ bằng Shift+Tab và cờ khởi động, cùng nguyên tắc chọn mức quyền an

Sửa code bằng Claude Code: quy trình an toàn cho người mới

Bài hướng dẫn quy trình sửa code bằng Claude Code an toàn cho người mới: cách viết yêu cầu, duyệt quyền, kiểm tra thay đổi, kiểm

CLAUDE.md là gì? Cách ghi quy tắc dự án để Claude Code làm đúng

Bài giải thích CLAUDE.md là gì, file này load từ đâu, nên ghi nội dung nào và cách bảo trì để Claude Code làm đúng quy

7 lệnh Claude Code cần biết: /help, /clear, /compact và cách dùng

Bài hướng dẫn 7 lệnh Claude Code quan trọng nhất cho người mới bắt đầu, kèm ví dụ thực tế và thời điểm nên dùng từng

Claude Code là gì? Hướng dẫn cài đặt và chạy dự án đầu tiên

Bài giải thích Claude Code là gì, cách cài đặt đúng trên macOS, Windows và Linux, cùng quy trình chạy dự án đầu tiên an toàn

Prompt vibe coding: mẫu brief để AI hiểu rõ sản phẩm

Prompt vibe coding hiệu quả bắt đầu từ một brief rõ, không phải một câu lệnh dài. Mẫu này giúp bạn mô tả sản phẩm, giới

@wordpress/build là gì? Tooling mới cho plugin WordPress

@wordpress/build là hướng tooling mới cho plugin WordPress: build nhanh hơn, convention-based, hỗ trợ script modules và tự tạo file PHP registration.

WordPress cho developer 2026: những thay đổi cần kiểm tra

Bài viết tóm tắt các thay đổi WordPress cho developer 2026 đáng chú ý trong tháng 5: Gutenberg, REST API, block editor, theme và kiểm thử

Docker sandbox AI coding agent: cấu hình an toàn

Bài viết hướng dẫn lập trình viên cấu hình Docker sandbox AI coding agent để giảm rủi ro khi agent đọc repo, sửa file và chạy