Cách tạo Breadcrumbs cho Blogspot

Cách tạo Breadcrumbs cho Blogspot - Cách tạo breadcrumbs cho Blogger - Cách tạo breadcrumbs cho Blogspot hiện trên kết quả tìm kiếm - Cách hiển thi Breadcrumbs trên kết quả tìm kiếm

Breadcrumb là gì ?

Breadcrumb là tập hợp các đường link 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ừ trang này trang khác trong 1 website. Nếu một website có cấu trúc phức tạp mà lại không có Breadcrumb thì người dùng dễ lâm vào tình trạng : ô mình đang ở trang nào đây, mục nào đây nhỉ?

Lợi ích của Breadcrumbs với người dùng

Giúp người dùng biết được vị trí của mình trên website
Thuận tiện khi di chuyển giữa các trang, không phải quay trở về trang chủ
Giảm tỷ lệ thoát (bound rates) -> tăng chất lượng website & tỷ lệ mua hàng .

Breadcrumbs rất quan trọng đối với Google

Giúp Google đánh giá chính xác PR, PA và keyword relation của một trang web.
Đánh giá được tổng thể cấu trúc của website,
Bạn sẽ có nhiều cơ hội đạt vị trí cao với những từ khóa mong muốn.

Cách tạo Breadcrumbs cho Blogspot

Để tạo Breadcrumbs cho Blogspot bạn cần thực hiện qua các bước sau đây :

Bước 1: Vào Template (Mẫu) => Edit HTML (chỉnh sửa HTML) Tìm tới dòng ]]></b:skin> (dùng tổ hợp phím Ctrl + F để tìm cho nhanh nhé)

Và thêm Code dưới đây ngay trên nó

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

#Breadcrumbs a{color: #000,font-size: 14px}

#Breadcrumbs div{float:left;}

Các bạn có thể tùy chỉnh CSS theo ý của mình nhé

(các bạn có thể tải toàn bộ code của blog về để sửa cho dễ cũng được bằng cách Template (Mẫu) => Sao lưu/Khôi phục => Tải xuống mẫu hoàn chỉnh ,sau khi thực hiện xong các bước thì các bạn up lên là Ok)

Bước 2: Các bạn tìm kiếm đoạn code sau : <b:includable id='post' var='post'> và dán đoạn code dưới đây dưới nó :

<b:if cond='data:blog.pageType == "item"'>
<div id='Breadcrumbs'>
<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrum'>
<a expr:href='data:blog.homepageUrl' itemprop='url' rel='tag'>
<span itemprop='title'>
Tên blog của bạn
</span>
</a>
»
</div>
<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 == "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>
<data:post.title/>
</span>
</b:if>
</b:loop>
</div>
</b:if>

Thay phần chữ màu đỏ "Tên blog của bạn" thành tên bạn cần thay nhé.

Sau đó lưu mẫu lại, vào một bài viết nào đó để thấy kết quả hiển thị của Breadcrumbs !

Bước 3: Để có cơ hội hiển thị Breadcrumbs cho Blogspot trên kết quả tìm kiếm các bạn làm như sau:
Đăng nhập Blog => Cài đặt => Tùy chọn tìm kiếm => Robots.txt tùy chỉnh (bật nó lên) rồi thêm đoạn mã sau vào :

User-agent: Mediapartners-Google
Disallow:

User-agent: *
Allow: /search
Allow: /

Sitemap: http://bittuot.blogspot.com/sitemap.xml

Phần sitemap đổi link http://bittuot.blogspot.com thành link blog của bạn nhé

Chúc các bạn thành công !

Cách tạo Breadcrumbs cho Blogspot