Breadcrumb trong Blogger chuẩn cấu trúc dữ liệu Google Search Console

Anh Trai Nắng
9
Các template khoảng đầu năm 2020 thì hầu như đều bị lỗi chỗ này làm ảnh hưởng đến các tính năng hổ trợ SEO của Google.

Đối với các template mới hiện nay thì đa số không bị lỗi Breadcrumb này, nhưng các template khoảng đầu năm 2020 thì hầu như đều bị lỗi chỗ này làm ảnh hưởng đến các tính năng hổ trợ của Google.

Chính vì vậy hôm nay mình sẽ hướng dẫn các bạn khắc phục lỗi này, cụ thể là thay thế cấu trúc dữ liệu data-vocabulary.org thành Schema.org mới nhất hiện nay.

Breadcrumb trong Blogger chuẩn cấu trúc dữ liệu Google Search Console
Breadcrumb trong Blogger chuẩn cấu trúc dữ liệu Google Search Console.

Từ ngày 6 tháng 4 năm 2020, đánh dấu data-vocabulary.org sẽ không còn đủ điều kiện cho các tính năng kết quả nhiều định dạng của Google nữa. Vì vậy, những template nào còn đang sử dụng Breadcrumb data-vocabulary.org cũ sẽ bị Google Search Consele thông báo lỗi.

Breadcrumb trong Blogger chuẩn cấu trúc dữ liệu Google Search Console
Lỗi Giản đồ data-vocabulary.org không còn hoạt động nữa.

Cách giải quyết lỗi Breadcrumb trong Blogger Search Console

Schema.org là đường dẫn được khuyến nghị bởi các công cụ tìm kiếm như Google và Bing. Và sau đây là các bước để giải quyết vấn đề này:

Bước 1: Đăng nhập Blogger > Chủ đề > Chỉnh sửa HTML và thêm đoạn code dưới đây lên trên <b:includable id='comment-form' var='post'>

<b:includable id='breadcrumb' var='posts'>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:loop values='data:posts' var='post'>
         <b:if cond='data:post.labels'>
            <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
               <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                  <a class='homebread' expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
                  <span itemprop='name'>Home</span></a>
                  <meta content='1' itemprop='position'/>
               </span>
               <svg viewBox='0 0 24 24'>
                  <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
               </svg>
               <b:loop index='num' values='data:post.labels' var='label'>
                  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                     <a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item'>
                        <span itemprop='name'>
                           <data:label.name/>
                        </span>
                     </a>
                     <meta expr:content='data:num+2' itemprop='position'/>
                  </span>
                  <b:if cond='data:label.isLast != &quot;true&quot;'>
                     <svg viewBox='0 0 24 24'>
                        <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
                     </svg>
                  </b:if>
               </b:loop>
               <svg viewBox='0 0 24 24'>
                  <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
               </svg>
               <span>
                  <data:post.title/>
               </span>
            </div>
         </b:if>
      </b:loop>
   </b:if>
</b:includable>

Bước 2: thêm CSS phía trên thẻ đóng </head>

<style type='text/css'>
/* Breadcrumb */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#222;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#222}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#222}
.homebread{margin:0 2px 0 0}
</style>

Bước 3: thệm đoạn code dưới đây nằm dưới <b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>

Sau đó bấm Lưu template

Bước 4: các bạn vào Google Search Console, chọn blog của bạn và nhấp vào Breadcrumb.

Breadcrumb trong Blogger chuẩn định dạng Google Search Console

Nhấp vào phần Lỗi, sau đó nhấp vào nút Validate Fix (Xác thực bản sửa lỗi)

Breadcrumb trong Blogger chuẩn định dạng Google Search Console

Cuối cùng, bạn chỉ cần đợi một tin nhắn sửa chữa sẽ được gửi qua email sau khi được xác nhận.

Lời kết

Với cách làm trên không chỉ giúp bạn giải quyết lỗi Breadcrumb trong Blogger Search Console mà còn giúp hiện thị thêm đầy đủ các Label và tiêu đề ở Breadcrumb trong bài viết.

Hi vọng bài viết mang lại hữu ích cho các bạn. Chúc các bạn thành công!

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

9 Nhận xét

  1. Ảnh gif đánh giá xịn quá anh ơi :v
    EM xin cái liên kết bạn bè nào anh :D

    Trả lờiXóa
  2. ko đc bạn ơi save template báo << The widget with id "Blog1" contains at least two b:includable elements with the same id: "breadcrumb". All b:includable elements should have a unique id for a given widget. >> admin fix dùm mình với !!! thanks

    Trả lờiXóa
    Trả lời
    1. này ko rõ là cấu trúc theme của bạn nó thế nào

      Xóa
  3. https://www.dulichthungnaidaoduahoabinh.vn đay bạn down free trên mạng

    Trả lờiXóa
  4. mới fix lại đang chờ google phản hồi ko biết thế nào

    Trả lờiXóa
Đăng nhận xét

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu