Hướng dẫn tạo Breadcrumbs chuẩn khi tìm kiếm cho Blogspot

Breadcrumbs là một thành phần không thể thiếu trong một website/blog, breadcrumbs là tập hợp các đường liên kết phân cấp giúp người dùng có thể biết được mình đang ở trang nào và từ đó có thể di chuyển thuận lợi từ liên kết này tới các liên kết khác nhanh chóng.

Ngoài ra khi tìm kiếm kết quả hiển thị đường dẫn của website đều phụ thuộc vào breadcrumbs.
Vậy làm sao có thể tạo được một thanh breadcrumbs chuẩn và thân thiện với công cụ tìm kiếm, seo dễ dàng hơn. Bài viết này mình sẽ hướng dẫn cách thêm breadcrumbs vào blogspot hoặc chỉnh sửa làm sao cho chuẩn thanh breadcrumbs này.

Cách tạo breadcrums cho blogspot:

Để thêm breadcrums hoặc chỉnh sửa bạn tìm trong mẫu của bạn từ này breadcrumbs xem trong mẫu của bạn đã có hay chưa (nếu có thì xoá toàn bộ code liên quan đi nhé)
Bạn cần xác định nơi hiển thị của breadcrumbs thường thì nó thuộc cặp thẻ sau đây:

<b:includable id='main' var='top'>...</b:includable>

Sau khi xác định được bạn sử dụng đoạn code sau dán ngay dưới thẻ mở của đoạn thẻ trên:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Để làm đẹp cho breadcrumbs bạn sử dụng đoạn CSS dưới đây:

.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

Cuối cùng lưu mẫu lại.
Nếu bạn muốn kiểm tra xem breadcrumbs đã chuẩn hay chưa bạn sử dụng công cụ kiểm tra dữ liệu cấu trúc của Google tại đây.

Kết luận:

Bài viết trên đây mình đã hướng dẫn các bạn sửa cũng như thêm được breadcrumbs chuẩn. Bạn có thể chờ vài ngày và xem kết quả tìm kiếm trên google để rõ hơn nhé.
Chúc bạn thành công!

Download Here