Cảm nhận tư duy và tổng hợp kiến thức

Thứ Hai, 23 tháng 11, 2015

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 == &quot;item&quot;'>
                    <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>
                        &#187;  
                      </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 == &quot;true&quot;'>
                              <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>
                                &#187; 
                              </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 !


Đừng quên nhấn LIKE Chia Sẻ để ủng hộ Bít Tuốt nếu bài viết có ích !
http://bittuot.blogspot.com
Socializer Widget by Nguyen D. Khanh
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé.

Share:
LIKE and Share this article: :

0 Comments:

Đăng nhận xét

More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa



Thống kê Blogspot

Lưu trữ Blog

Bài có thể xem

Mời tham gia CLB

 
Câu Lạc Bộ Kết bạn & Chia sẻ thông tin
Nhóm Công khai · 1.614 thành viên
Tham gia nhóm
Mục đích phát triển của Câu lạc bộ: - Cảm nhận tư duy và tổng hợp kiến thức.Cùng nhau Kết bạn và chia sẽ những gì tốt đẹp . - Giúp nhau chia sẽ thươn...
 
 
BACK TO TOP