[Hướng dẫn] Tạo breadcrumb cho blogspot

Blogger SEO SEO Blogspot Thủ thuật

{ 6 comments }
Tạo Breadcrumb cho blogspot

Breadcrumb in search Results

Tạo Breadcrumb cho blogspot là một trong những tiêu chí mà Google đưa ra để xếp blog, website của bạn thân thiện hơn với searcher và các search engine (Friendly Site)

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ỉ bla bla?

Breadcrumb có tác dụng gì?

Breadcrumb chính là cách giúp điều hướng khách truy cập tốt hơn khi giúp cho khách truy cập biết được mình đang ở đâu và nhắm tới mục tiêu mà khách truy cập tìm kiếm.

Breadcrumb còn giúp google đánh giá cao hơn mức độ thân thiện với website của bạn.

Breadcrumb giúp điều hướng khách truy cập ngay trên các công cụ tìm kiếm.

Và hiển nhiên với các tác dụng trên Breadcrumb sẽ giúp bạn seo bài viết tốt hơn –>> khả năng seo cho website, blog sẽ tăng lên 😛

Hình ảnh demo:

Google Breadcrumb

Google Breadcrumb

Mình là người mới mò mẫm bước vào thế giới blogspot và cũng đang ấp ủ dự định viết một series về Blogger Developmenthướng dẫn tạo template cho blogspot và chia sẻ những thủ thuật mà mình tìm kiếm và sưu tầm được bấy lâu trên thế giới blog cho mọi người.

Xem thêm  Bài 07: Tính cá nhân tác động lên kết quả tìm kiếm

Trong các bài viết trước mình đã lần lượt giới thiệu về cách tạo sitemap cho blogspot, hiển thị bài viết trong một nhãn (label) bất kì hay trang trí bài viết bằng cách sử dụng font awesome, hôm nay mình sẽ tiếp tục giới thiệu với các bạn cách tạo breadcrumb cho blogspot ở một vị trí bất kì. Mà cụ thể ở đây là breadcrumb sẽ hiển thị ngay trên tiêu đề bài viết.

Tạo Breadcrumb cho blogspot gồm mấy bước?

Có nhiều cách để tạo Breadcrumb cho một website nhưng đối với blogspot chúng ta không thể sử dụng Microdata để tạo breadcrumb theo đúng chuẩn được mà phải làm theo một hướng khác vì blogspot không chấp nhận thuộc tính itemscope để trống.

Chúng ta có thể tạo breadcrumb theo những bước sau.

Bước 1: Login vào blogger chọn blog muốn thêm sau đó chọn menu Mẫu (Template) và chọn Chỉnh sửa HTML (Edit HTML)

Bước 2: tìm đoạn code

<b:include data='top' name='status-message'/>

Thêm vào bên dưới

<b:include data='posts' name='breadcrumb'/>

Bước 3: Tìm tiếp đoạn code

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

Thêm vào bên trên

<b:includable id='breadcrumb' var='posts'>
                                <b:if cond='data:blog.homepageUrl == data:blog.url'>
                            <!-- No breadcrumb on home page -->
                     <b:else/>
          <b:if cond='data:blog.pageType == &quot;item&quot;'><!-- breadcrumb for the post page --><a href="http://www.tohaitrieu.net"></a><p class='breadcrumbs'> <span class='post-navigation'><a expr:href='data:blog.homepageUrl' rel='tag'> Home </a>
                                        <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;'>
                                              
                                                <a expr:href='data:label.url' rel='tag'>
                                                  <data:label.name/>
                                                </a>
                                              </b:if>
                                            </b:loop>
                                            <b:else/>
                                            Unlabelled
                                          </b:if>
                                        
                                          <span>
                                            <data:post.title/>
                                          </span>
                                        </b:loop>
                                      </span>
                                    </p>
                                    <b:else/>
                                    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
                                      <!-- breadcrumb for the label archive page and search pages.. -->
                                      <p class='breadcrumbs'>
                                        <span class='post-labels post-navigation'>
                                          <a expr:href='data:blog.homepageUrl'>
                                            Home
                                          </a>
                                           Archives for
                                          <data:blog.pageName/>
                                        </span>
                                      </p>
                                      <b:else/>
                                      <b:if cond='data:blog.pageType == &quot;index&quot;'>
                                        <p class='breadcrumbs'>
                                          <span class='post-labels post-navigation'>
                                            <b:if cond='data:blog.pageName == &quot;&quot;'>
                                              <a expr:href='data:blog.homepageUrl'>
                                                Home
                                              </a>
                                               All posts
                                              <b:else/>
                                              <a expr:href='data:blog.homepageUrl'>
                                                Home
                                              </a>
                                               <span>Posts filed under
                                                 <data:blog.pageName/></span>
                                            </b:if>
                                          </span>
                                        </p>
                                      </b:if>
                                    </b:if>
                                </b:if>
                          </b:if>
        </b:includable>

Tuy nhiên nếu để vậy thì breadcrumb cũng chỉ hiện các link nhìn khá xấu xí.

Xem thêm  Tạo trang Blogspot - blogger với url đẹp và các loại trang cần phải có

Làm sao để trang trí cho breadcrumb?

Điều này yêu cầu bạn phải hiểu một chút về css. Tuy nhiên nếu không biết bạn vẫn có thể sử dụng một trong 2 đoạn css có sẵn sau để thêm vào.
Cách thêm css trang trí cho breadcrumb:
Tìm đoạn code:

]]></b:skin>

Thêm vào phía trên một trong 2 style cho breadcrum sau:

Style breadcrumb 1

.breadcrumbs {

margin: 0px 0px 15px 0px;
font-size:95%;

}
.post-navigation > a:after, .post-navigation > a:before {
    border-bottom: 13px solid transparent;
    border-left: 11px solid #B7B7B7;
    border-top: 13px solid transparent;
    content: "";
    display: inline-block;
    left: 100%;
    position: absolute;
    top: -2%;
    z-index: 1;
}
.post-navigation > a:after {
    border-left-color: #F2F2F2;
    left: 99%;
}.post-navigation > a:hover {
    padding-left: 23px;
}
.post-navigation > a {
    background: none repeat scroll 0 0 #F2F2F2;
    border: 1px solid #B7B7B7;
    color: #000000;
    padding: 4px 12px;
    position: relative;
    text-decoration: none;
transition: all 0.2s ease 0s;-moz-transition: all 0.2s ease 0s;-webkit-transition: all 0.2s ease 0s;
}
.post-navigation > span {
    padding-left: 14px;
}

Style breadcrumb 2 (dạng google :P)

.breadcrumbs a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-position: 100% 0;
    background-repeat: no-repeat;
    border-color: #D9D9D9;
    border-image: none;
    border-style: solid;
    border-width: 1px 0 1px 1px;
    color: #666666;
    display: block;
    float: left;
    font-size: 95%;
    padding: 7px 16px 7px 19px;
    position: relative;
    text-decoration: none;
    z-index: 1;
}
.breadcrumbs a:hover {
    border-bottom-color: #C4C4C4;
    border-top-color: #C4C4C4;
    box-shadow: 0 2px 2px #E8E8E8;
    color: #333333;
}
.breadcrumbs a:first-child, .breadcrumbs a:first-child:hover {
    border-top-left-radius: 5px;
    z-index: 30 !important;
}.breadcrumbs {
    margin: 0px 0px 15px 0px;
    font-size:95%;
    }

Như vậy là các bạn đã có thể có một breadcrumb đẹp rồi. Sau khi làm xong các bạn có thể sử dụng Google Rich Snippet Testing Tools để kiểm tra nhé.

Góp ý cho Tô Triều

  • Blog Du lịch 17/05/2015, 22:45

    Bạn Hải Triều ơi mình làm theo cách của bạn nhưng Breadcum không hiển thị được, nó thiếu một đoạn code nữa. Tuy nhiên mình lại học được của bạn cách để tạo danh mục bài liên quan ở bên phải của bài viết, trông nó rất đẹp và chuyên nghiệp – nhưng mình cho sang bên trái để cân đối hơn, bạn có thể check http://www.daisudulich.vn

    Các phông chữ của bạn nhìn rất đẹp, mọi thứ đều đẹp. Bạn có thể giúp cho mình 1 theme miễn phí với giao diện nhìn đơn giản như thế này, chữ to và vuông thế này được ko? Mình sẽ để lại text link tác giả của bạn ở footer…

    Reply
  • Nguyễn Tri Khánh 07/08/2014, 11:05

    Triều mình hỏi, trang blog mình đã có breadcrums nhưng khi mình click vào một nhãn trên đường dẫn thì chỉ thấy đường dẫn nào đến nhãn như khi click vào bài viết nữa. Bạn giải thích nó gặp sự cố gì được không?
    Trang blog của mình: http://hocmai-ntkhanh.blogspot.com
    Cảm ơn triều đã hổ trợ cho mình!

    Reply
  • Sách tâm linh 22/04/2014, 11:36

    Chào bạn sao mình tạo nó hiện rồi mà sao check richsnip nó không hiện nhie
    Demo: http://www.blogtamlinh.com/2014/04/sach-bua-ngai-suu-tam-linh-phu.html

    Reply
    • Hải Triều 22/04/2014, 11:48

      Blog bạn còn hai lỗi này:
      Error: Missing required field “updated”.
      Error: Missing required hCard “author”.
      Bạn làm theo hướng dẫn tại đây để khắc phục.

      Ngoài ra bạn cần thêm chút thời gian để cập nhật và hiển thị nhé
      Tham khảo thêm hướng dẫn từ Google tại đây

  • hoà 15/01/2014, 02:53

    hic, sao mình làm như bạn xong rồi cũng có thấy gì khác biệt đâu nhỉ

    Reply