Hướng Dẫn Tạo Breadcrumbs Cho Blogger

Nói Breadcrumbs, mình lại tất bật đi tìm lịch sử và ý nghĩa của nó. Vì sao vậy? Vì nó là một từ hơi lạ, dịch không nổi đâu nên tất nhiên phải có nguồn gốc tên gọi. Đây nầy, là một tài liệu mà mình tìm thấy trên Blog Thủ thuậtBlogWeb. Có thể sẽ là điều bổ ích cho chúng ta nhiều lắm, nếu như bạn hiểu biết được nhiều điều khá tường tận.

1. Câu chuyện lịch sử

Ý nghĩa của Breadcrumbs này xuất phát từ một câu chuyện cổ tích kể rằng một gia đình vì quá nghèo không thể nuôi được con phải đưa con đến một nơi rất xa rồi bỏ con ở lại và một cậu bé thông minh đã dùng những mẩu bánh mỳ rải dọc đường để tìm đường về. Những liên kết giống như những mẩu bánh mỳ đánh dấu giúp bạn định vị được mình ở đâu trong website. Kể ra thì dân thiết kế web và làm SEO xứ Mỹ cũng lãng mạn thật, từ những khái niệm khô cứng đã được họ thi vị hóa thành một khái niệm nghe rất vui tai.

2. Breadcrumbs là gì?

Vậy chúng ta có thể định nghĩa rằng 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ừ trang này trang khác trong web. Nếu một website có cấu trúc phức tạp mà lại không có Breadcrumbs 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ỉ?

Breadcrumbs là một thành phần rất quan trọng trong hệ thống navigation của website gần như vào bất cứ website nào bạn cũng thấy sự hiện diện của nó. Vì vậy khi thiết kế website bạn nên chú ý một số vấn đề sau đây:

Theo nghiên cứu của chuyên gia Steven Krug thì breadcrumb nên thể hiện như sau:

- Vị trí tốt nhất đặt breadcrumb là góc trên trái bên dưới menu chính

- Trước các link nên dùng cụm từ You are here: (ở văn hóa Mỹ thì như vậy nhưng với chúng ta thì chưa biết thế nào)

- Các link ở dạng chữ thường còn text thể hiện trang hiện tại thì in hoa

- Sử dụng dấu > để ngăn cách giữa các link

Một breadcrumbs tốt nhất (theo quan điểm của Steven Krug) có dạng như sau:

Bạn đang ở đây: Trang chủ > Loại sản phẩm > Dòng sản phẩm > Chi tiết sản phẩm

Sử dụng rich snippets để site của bạn hiển thị hay hơn trên SERP của Google

3. Lợi ích của Breadcrumbs

Khi breadcrumbs xuất hiện trên kết quả tìm kiếm của Google nó sẽ giúp bạn có thêm cơ hội người dùng click. Bời vì nhu cầu tìm kiếm của người dùng rất đa dạng nếu thấy link kết quả không phù hợp nhưng nhữnglink trong breadcrumbs phù hợp thì họ sẽ click vào đó, như vậy bạn đã tăng thêm một cơ hội có thêm một visitors.

Hình ảnh trên, chổ vùng được khoanh viền đỏ là do mình tạo trên Blogspot của chính mình.

Để khởi tạo Breadcrumbs cho blogger ta thực hiện từng bước như sau như sau:

Bước 1: Đăng nhập blogspot à Mẫu à Chỉnh Sửa HTML

Bước 2: Chèn đoạn code sau trước thẻ đóng ]]></b:skin>

/*-----Custom Labels Cloud widget by www.3wsolution.blogspot.com----#Breadcrumbs{color: #000;font-size: 13px; margin-bottom:10px; padding:10px;background:#FFCC00; border:2px solid #BBBBBB; font-weight:bold; text-decoration:none; }
#Breadcrumbs a{color: #000,font-size: 13px}
#Breadcrumbs div{float:left;}

Chú ý:

- font-size:13px - Cỡ chữ của dòng Breadcrumbs

- background:#ff9900 - Màu nền khung

Bước 3: Tìm đến thẻ lệnh <b:includable id='post' var='post'> rồi chèn đoạn code bên dưới ngay sau nó:


Code:



<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>

Bạn chỉnh sửa Tên Blog của bạn thành tên blog của bạn. Sau đó click lưu mẫu và trở về trang quản trị,

Bước 4: Cài đặt Robots.txt trong blogspot để chắc rằng Breadcrumbs hiển thị trên google.

Thực hiện như sau:

Vào Tùy chọn tìm kiếm trong Blogger.

Chọn Chỉnh sửa phần Robots.txt tùy chỉnh

(Bạn xem trên hình vẽ, ở những vùng khoang đỏ)

Chép đoạn Code sau dán vào trong khung soạn thảo Code


Code:


User-agent: Mediapartners-Google

Disallow:

User-agent: *

Allow: /

Allow: /search

Disallow: /*?updated-max=*

Disallow: *archive.html


Sitemap: http://hocvalamtinhoc.blogspot.com/feeds/posts/default?orderby=UPDATED