Trong SEO, chúng ta đã từng nghe qua cụm từ breadcrumbs rất nhiều rồi, bởi đây là một phần không thể thiếu đối với SEO tổng thể website, ảnh hưởng phần lớn đến sự thành công của website. Bên cạnh việc hỗ trợ người dùng biết được mình đang ở đâu trên website, SEO cũng hỗ trợ Google đọc hiểu từng thành phần trên website, qua đó thúc đẩy Google đánh giá website cao hơn nữa trên kết quả tìm kiếm.
Breadcrumbs là gì? Đóng tầm quan trọng thế nào đối với SEO? Hãy cùng LovaWeb khám phá nha!
Breadcrumbs là gì?
Breadcrumbs có thể hiểu là một chuỗi liên kết số từ bự đến nhỏ, giúp người dùng thấy được bản thân đang ở mục như thế nào trên website. Đồng thời, phần lớn những chuỗi liên kết trên sẽ hỗ trợ họ trở về trang đầu dễ dàng hơn bao giờ hết với cùng 1 nhấp chuột với một hoặc các liên kết trên chuỗi này. Một thí dụ trên sẽ giúp bạn dễ dàng hiểu thêm về Breadcrumbs.
Bạn có thấy chuỗi Home > Tin tức khác > Tin tức SEO > Công cụ tăng tốc dành cho kết quả tìm kiếm mobile không? Đó là một trong các breadcrumbs tiêu biểu đấy. Bạn đang ở cuối bài đăng "Công cụ tăng tốc dành cho kết quả tìm kiếm mobile", vì vậy bạn có thể nhấp chọn 1 giữa 3 liên kết "Home", "Tin tức khác" hoặc "Tin tức khác" hoặc trở về trang đầu nha!
Một dạng khác của Breadcrumbs là trên SERP của Google. Chẳng hạn khi bạn search cụm từ "LovaWeb" trên Google và đây là kết quả Google hiển thị ra.
Bạn có thể dễ dàng thấy được chuỗi liên kết gồm "Linkedin.com", "Company" và "LovaWeb". Tuy loại này không hỗ trợ bạn nhấp đến những liên kết kiểu linkedin hay company, nhưng nó giúp bạn hiểu được bạn đang ở mục như thế nào trên website Linkedin.
Phân loại các breadcrumbs phổ biến
Để sử dụng breadcrumbs trên website của doanh nghiệp, trước tiên bạn sẽ biết được có mấy loại và cần dùng loại như thế nào là thích hợp với website của bạn. Hãy để LovaWeb tham khảo ngay dưới đây nha!
Breadcrumbs theo các cấp bậc (Hierachy based breadcrumbs)
Trong một văn bản, chúng ta sẽ thấy những heading được phân chia 1,2,3,4. .. Breadcrumbs theo cấp bậc cũng giống như vậy. Nó sẽ bắt đầu với danh mục có cấp bậc cao dần lên danh mục thấp hơn (có thể hiểu là danh mục mẹ và con).
Điển hình về loại trên, chúng ta có thể thấy trên website của Nestle. Nó bắt đầu ở cấp bậc "Trang chủ" (cao nhất, cấp độ 1) rồi sang "Nutrition, Health and Wellness" (cấp 2) cho biết tình trạng sức khoẻ của người dùng, "Introduction" (cấp 3). Loại breadcrumbs này sẽ giúp biết bạn đang đọc thông tin gì trên website, qua đó giúp bạn biết đang ở phần nào trên website để tiện theo dõi và tham khảo.
Breadcrumbs theo các đặc tính (Attribute based breadcrumbs)
Đa phần những website bán điện máy đều áp dụng loại này trên website của mình. Breadcrumbs thường sẽ căn cứ trên các đặc tính cụ thể của từng sản phẩm bạn đang bán mà thiết lập. Chẳng hạn như với website tivi, bạn sẽ thấy breadcrumbs theo đặc tính có hình dạng như sau: Tivi> Tivi Sony> 44-54 inch.
Đây là loại breadcrumbs theo đặc tính tivi Sony có màn 44-54 inch. Loại này sẽ giúp biết người dùng đang tìm kiếm đã đạt tiêu chuẩn hay là không, qua đấy giảm thời hạn tham khảo và kéo dãn thời gian chốt đơn đặt hàng của khách trên website.
Breadcrumbs theo lịch sử (History-based breadcrumbs)
Loại breadcrumbs giúp người dùng theo dõi lịch sử những trang trên website nơi họ đã tham khảo, qua đó giúp họ trở về những trang này được dễ dàng hơn bao giờ hết. Loại này đang rất được phổ biến ngày nay, mặc dù những trình duyệt web lớn từ Google, Cốc Cốc. .. đã có hỗ trợ người dùng trở về trang cũ với tính năng "Back". Bạn chỉ cần nhấp chuột vào là trở về trang cũ, còn nếu muốn trở về nhanh thì bạn có thể nhấp chuột phải rồi lựa chọn trang bạn muốn về lại.
Loại này chủ yếu được thấy trong những blog hoặc website tin tức. Bạn có thể thấy rõ ràng nhất ở mục "Bài Viết Đã Đọc" (nếu có).
Đó là một list tập hợp toàn bộ những bài mà bạn đã đọc qua một thời kì nhất định.
Những lợi ích tuyệt vời khi sử dụng breadcrumbs trên website
Việc sử dụng breadcrumbs trên website không những hỗ trợ người dùng dễ dàng sử dụng còn giúp website được đánh giá cao, giúp nâng tầm thương hiệu và được nhiều người biết đến hơn nữa. Nếu bạn còn không hiểu, LovaWeb sẽ giải đáp giúp bạn ngay thôi!
Website có tích hợp breadcrumbs sẽ được đánh giá cao, nhất là Google
Tất cả những gì Google cần là một website thân thiện với người dùng, được phân loại thông tin hợp lý và có thêm lượt truy vấn đến website mỗi ngày. Với breadcrumbs, website sẽ giúp người dùng hiểu được bản thân đang ở đâu, giúp tương tác của họ trên website trở nên dễ dàng và hiệu quả hơn bao giờ hết. Đó là mục tiêu mà Google đang muốn hướng tới.
Ngoài ra, Google sẽ dễ dàng phân loại từng danh mục trên website, qua đó giúp website của bạn có đủ căn cứ để duy trì vị trí cao trên Google.
Tăng tương tác đối với người dùng website của bạn
Người dùng có thể dễ nhận diện địa chỉ của mình trên website, qua đó giúp họ dễ dàng điều hướng về đúng trang trên website trong thời hạn ngắn nhất (thích hợp với yêu cầu cụ thể của người dùng). Ngoài ra, một website có breadcrumbs sẽ giúp bạn giữ khách lâu dài hơn nữa trên website, hình thành nên chỉ số session cao hơn qua đó khiến website có vị trí cao hơn nữa trên công cụ tìm kiếm.
Giảm tỉ lệ click thoát thấp hơn cho website của bạn
Như đã nói phía trên, nếu một website không có breadcrumbs, người dùng sẽ không biết mình cần click chuột ở đâu nhằm tìm kiếm thấy nội dung đúng với mong muốn của mình. Từ đó khiến nhiều người dùng thấy bực mình và rời ra trang của bạn, gây ra bounce rate trên website.
Hướng dẫn thêm Breadcrumb vào website
Để thêm Breadcrumbs cho website, bạn có thể dùng YoastSEO (với website wordpress) hoặc chèn một đoạn code (với website CMS). Bạn có thể xem cách làm chi tiết ở link:
Giả sử bạn có một dòng code giống dưới đây:
| < ol class= ”breadcrumbs” >
< li > < a href= ”http://www.example.com/books”>Books< /a > < /li > < li > < a href= ”http://www.example.com/sciencefiction”>Science Fiction< /a > < /li > < li > < a href= ”http://www.example.com/books/sciencefiction/awardwinners” >Award Winners< /a > < /li > < ol > |
Bạn sẽ có một breadcrumbs tương tự giống dưới đây:
Books › Science Fiction › Award Winners
Hướng dẫn thông báo Breadcrumbs trên Google
Cách 1: Chèn thêm một đoạn mã code JSON-LD
|
< script type=”application/ld+json” > “@context”: “http://schema.org”, “@type”: “BreadcrumbList”, “itemListElement”: [{ “@type”: “ListItem”, “position”: 1, “name”: “Books”, “item”: “https://example.com/books” }, { “@type”: “ListItem”, “position”: 2, “name”: “Science Fiction”, “item”: “https://example.com/sciencefiction” }, { “@type”: “ListItem”, “position”: 3, “name”: “Award Winners”, “item”: “https://example.com/books/sciencefiction/awardwinners” }] } < /script > |
Cách 2: Convert breadcrumbs trên website về định dạng RDFa
|
< ol vocab=”http://schema.org/” typeof=”BreadcrumbList” > < a property=”item” typeof=”WebPage” href=”https://example.com/books” > < span property=”name” >Books< /span >< /a > < meta property=”position” content=”1″ > < /li > › < li property=”itemListElement” typeof=”ListItem” > < a property=”item” typeof=”WebPage” href=”https://example.com/books/sciencefiction” > < span property=”name”>Science Fiction< /span >< /a > < meta property=”position” content=”2″ > < /li > › < li property=”itemListElement” typeof=”ListItem” > < a property=”item” typeof=”WebPage” href=”https://example.com/books/sciencefiction/awardwinnders” > < span property=”name”>Award Winners< /span >< /a > < meta property=”position” content=”3″ > < /li > < /ol > |
Cách 3: Convert breadcrumbs trên website về định dạng Microdata:
|
< ol itemscope itemtype=”http://schema.org/BreadcrumbList” > itemtype=”http://schema.org/ListItem” > < a itemtype=”http://schema.org/Thing” itemprop=”item” href=”https://example.com/books”> < span itemprop=”name”>Books< /span >< /a > < meta itemprop=”position” content=”1″ / > < /li > › < li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem” > < a itemtype=”http://schema.org/Thing” itemprop=”item” href=”https://example.com/books/sciencefiction” > < span itemprop=”name”>Science Fiction< /span >< /a >
< /li > › < li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem” > < a itemtype=”http://schema.org/Thing” itemprop=”item” href=”https://example.com/books/sciencefiction/ancillaryjustice” > < span itemprop=”name”>Ancillary Justice< /span >< /a > < meta itemprop=”position” content=”3″ / > < /li > < /ol > |
Khi bạn đã thử một trong 3 cách trên, bạn có thể test demo với công cụ Structured Data Testing Tool là ok nhé. Tool sẽ giúp bạn check xem data trong phần code của bạn có đúng hay là không nhằm giúp Google hiện link trên website của bạn nhanh hơn nữa nhé.
Chú ý khi chèn breadcrumbs trên website
- Bạn chỉ cần báo lên Google khi website của bạn có ít nhất 3 liên kết trở lên. Đặc biệt, với website trên thiết bị mobile, nên thêm một liên kết "Back" giúp dẫn hướng trở lại các trang web trước đó của người dùng.
- Nên chèn anchor text của trang web mà người dùng đang truy cập trên breadcrumbs của website.
- Nhớ dùng những ký hiệu quan trọng trong dòng code (> ,/, –, vv. ..) nhằm biểu thị tính phân cấp trong breadcrumbs.
- Đặt tại vị trí người dùng dễ dàng biết như tại đầu trang hoặc ngay phía trên tiêu đề và nội dung bài viết.
- Đừng đặt những link và anchor text trùng nhau.
Breadcrumbs là một công cụ hữu ích, nó giúp Google nâng cao website của bạn và giúp người dùng thao tác trên website của bạn dễ dàng hơn nữa. LovaWeb đã giúp bạn rõ thêm về breadcrumbs cũng như cách cài đặt nó trên website của bạn. Chúng tôi hy vọng tất cả những quản trị website sẽ biết cách làm nhằm giúp cho website của bạn thêm phần thân thiện với người dùng hơn nữa đấy!
