Cách tạo breadcrumbs cho blogspot giúp cho tối ưu website

Breadcrumbs là gì ?

breadcrumbs

Breadcrumbs là 1 dạng tập hợp các liên kết giúp người xem Website xác định được vị trí của mình trong Site đó

Lợi ích của Breadcrumbs

Người dùng biết được vị trí của mình trên Site
Tạo sự khác biệt và đẹp hơn trên kết quả tìm kiếm
Thuận tiện di chuyển đến các trang mà không phải di chuyển vể trang chủ
Breadcrumbs giúp ích cho việc SEO: giảm tỷ lệ thoát của website.
Google cũng đánh giá thông qua Breadcrumbs của site.
Như vậy việc tạo Breadcrumbs rất cần thiết cho việc SEO website, SEO blogger.

Hướng dẫn tạo breadcrumbs cho blogger (blogspot)

B1: Vào Template (Mẫu) > Edit HTML (chỉnh sửa HTML) chọn Expand the Widget Templates (Mở rộng Mẫu tiện ích)

B2:Thêm mã css sau vào trước ]]></b:skin>

#Breadcrumbs{color: #000;font-size: 14px;margin-bottom:15px;padding:10px;background:#FFF;border:2px solid #BBBBBB; font-weight:bold; text-decoration:none; }
#Breadcrumbs a{color: #000,font-size: 14px}
#Breadcrumbs div{float: left;}

B3: Tìm đoạn code sau:

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

và thêm dưới nó đoạn code:

<b:if cond='data:blog.pageType == "item"'>
<div id='Breadcrumbs'>
<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' rel='tag'> <span itemprop='title'><data:blog.title/></span></a> »</div>
<b:loop values='dataosts' var='post'>
<b:if cond='dataost.labels'>
<b:loop values='dataost.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url' itemprop='url' rel='tag'><span itemprop='title'><data:label.name/></span></a> »</div>
</b:if>
</b:loop>
<span><dataost.title/></span>
</b:if>
</b:loop>
</div>
</b:if>

Bạn có thể thay phần chữ màu kia thành "Home" hay chữ j tùy ý cũng được ko để vậy nó sẽ tự động lấy title của blog bạn chèn vào
Chú ý bạn cần sủa lại file robots.txt của blogspot cho phép nó index cả label nhé