Hướng dẫn tạo Breadcrumbs cho Blogspot

Breadcrumb là gì và cách tạo Breadcrumb cho Blogspot như thế nào?
Breadcrumb là một đường dẫn đa cấp, nhằm giúp khách truy cập có thể biết được mình đang ở đâu, ở vị trí nào trên trang web, giúp khách truy cập dể dàng hơn trong việc tìm kiếm thông tin mà họ cần và có thể điều hướng khách truy cập di chuyển từ trang này trang khác một cách tiện lợi trên website của bạn.
Breadcrumb còn giúp google đánh giá cao hơn mức độ thân thiện đối với các công cụ tìm kiếm và breadcrumb còn có tác dụng giúp bạn seo bài viết tốt hơn.

Làm thế nào để tạo Breadcrumb cho blogspot?

Để tạo Breadcrumb cho blogspot bạn làm theo các bước sau:
- Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML
- Tìm <b:includable id='backlinks' var='post'>...</b:includable> và thêm đoạn code dưới đây vào sau nó:

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Trang chủ</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url + "?max-results=10"' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Lưu trữ cho <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Tất cả bài viết</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
<div class='clear'/>
</b:if>
</b:includable>

- Với đoạn mã trên Breadcrumb sẽ hiển thị ở trang: chi tiết bài viết, trang tĩnh (Static Pages), trang lưu trữ (Archive), trang Nhãn (Label) trong blog của bạn. - Như vậy là bạn đả hoàn thành việc thêm Breadcrumb cho blogpost, công việc tiếp theo là hiển thị breadcrumb cho blogspot ở vị trí mà bạn mong muốn.

Hiển thị Breadcrumb cho Blogspot

- Breadcrumb thường đặt ở phía trên, trước tiêu đề bài viết. - Tiếp theo, tìm <b:includable id='main' var='top'> và thêm đoạn <b:include data="posts" name="breadcrumb"/> vào phía sau nó tương tự như hình dưới đây

- Lưu template và xem kết quả. Ngoài ra, có thể sử dụng công cụ Google Rich Snippet Testing Tools để kiểm tra.
- Chúc thành công!