Như chúng ta đã biết breadcrumb là hệ thống điều hướng trang để người dùng hiểu và sử dụng được cấu trúc của website. Google cho phép hiển thị breadcrumb tại kết quả tìm kiếm, vị trí đứng sau tiêu đề. Bài viết này bạn sẽ học được cách hiển thị breadcrumb với SERP (Search engine results page) và tại sao nó lại quan trọng với SEO.
Đã có một thời gian khi bạn tìm kiếm cái gì đó trên google, trang kết quả gồm 10 kết quả đầu tiên, mỗi kết quả hiển thị bao gồm có tiêu đề, mô tả và URL. Và bây giờ khi bạn tìm kiếm với google nó không chỉ đơn giản như trên nữa mà còn hiển thị cả hình ảnh của tác giả , đánh giá xếp hạng sao (star rating reviews), ngày xuất bản và bây giờ là breadcrumb.

Ý kiến trái chiều

Có nhiều người cho rằng nó ảnh hưởng xấu đến SEO, họ cảm thấy rằng sau khi thêm breadcrumb vào kết quả tìm kiếm google không thường trực index các liên kết trang của website nữa. Hơn nữa việc hiển thị breadcrumb trong trang kết quả, các urls được hiển thị không có nghĩa là các url đó bị tụt thứ hạng từ khoá.
Qua quá trình tìm hiểu vấn đề này trên mạng, mình rút ra kết luận giải thích ở trên là hoàn toàn sai về các bước thực hiện để hiển thị breadcrumb trên SERP. Hãy nhớ rằng google luôn đi trước một bước trong vấn đề tìm kiếm. Hơn 80% số người hài lòng bởi tìm kiếm của google bao gồm cả bạn đó là lý do vì sao bạn đang đọc bài viết này.
Những gì google nói về breadcrumb?
“Một cải tiến thay thế URL trong trang tìm kiếm với một hệ thống phân cấp, chỉ ra vị trí chính xác của trang trên website. Một số địa chỉ web giúp bạn hiểu cấu trúc của trang web và làm thế nào các page cụ thể khớp với hệ thống phân cấp tầng của site. Tuy nhiên, các URL quá dài, quá ngắn hoặc quá mơ hồ với ngụ ý bổ xung thêm thông tin mà không cung cấp nhiều thông tin khác thuộc chủ đề về trang web.”

Cách hiển thị breadcrumbs trong kết quả tìm kiếm sử dụng blogger.

thực các bước sau để có được kết quả giống như thế này:

1. Tìm đoạn code sau trong blogger template.

<b:include data='top' name='status-message'></b:include>

2. Thay thế bởi:

<b:include data='top' name='status-message'></b:include> 
<b:include data='posts' name='breadcrumb'></b:include>

3. Tìm tiếp.

<b:includable id='post' var='post'>
</b:includable>

4. Thay thế bởi:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else></b:else>
</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' itemprop='url' rel='tag'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url' rel='tag'><span itemprop='title'><data:label .name></data:label></span></a></span>
</b:if>
</b:loop>
<b:else></b:else>
&#187;Unlabelled
</b:if>
&#187; <span><data:post .title></data:post></span>
</b:loop>
</span>
</p>
<b:else></b:else>
</b:if><b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; Archives for <data:blog .pageName></data:blog>
</span>
</p>
<b:else></b:else>
</b:if><b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; All posts
<b:else></b:else>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; Posts filed under <data:blog .pageName></data:blog>
</b:if>
</span>
</p>
</b:if>
 
 
 
</b:includable>

5. Bạn có thể thêm CSS để tô vẽ breadcrumb. Thêm đoạn css sau vào trước

]]>

.

.breadcrumbs { 
margin: 0px 0px 10px 0px; font-size: 75%;line-height: 1.4em;text-transform: uppercase;
}

6. Lưu template.
7. Kiểm tra kết quả trên công cụ google rich snippet tool.

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook