Breadcrumbs thân thiện SEO đạt chuẩn HTML5

Breadcrumbs là một trong những thứ tốt nhất giúp cho việc điều hướng của website trở nên tốt hơn. Một website có thanh điều hướng breadcrumbs thông thường cũng sẽ được đánh giá cao hơn ví dụ như: một kết quả tìm kiếm có hiện breadcrumbs thể hiện chuyên nghiệp hơn và từ đó sẽ được tin tưởng và được chọn hơn những kết quả khác trong mắt khách truy cập, ngoài ra các dịch vụ của Google như Adsense sẽ dễ dàng được chấp thuận hơn nếu tồn tại breadcrumbs.

Breadcrumbs thân thiện SEO đạt chuẩn HTML5
Hình ảnh chỉ mang tính chất minh họa

Trước đây thì mình cũng đã có một bài viết hướng dẫn về làm thế nào để tạo thanh điều hướng breadcrumb cho Blogger / Blogspot. Nhưng có một điều là mặc dù đễ khá thân thiện với SEO nhưng nó lại không phù hợp với chuẩn HTML5. Do dó hôm nay sau nhiều ngày tìm hiểu trên mạng, mình đã tìm được một thanh điều hướng khá chuẩn để đem về đây chia sẻ với mọi người.

Breadcrumbs thân thiện SEO đạt chuẩn HTML5

Lần này để chèn thanh điều hướng vào blogger / blogspot công việc sẽ khá tương tự như bài viết trước, bạn tìm đến đoạn mã sau đây
]]></b:skin>
và chèn lên trên nó đoạn css này
.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}
Tiếp tục bạn tìm đến đoạn mã sau đây
<b:includable id='main' var='top'>
và thay thế nó bằng đoạn mã này
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb trang bài viết -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Trang chủ</span></a></span>
<b:loop values='data:post.labels' var='label'>
  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> &#187; <span>Khác</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb cho trang nhãn và trang tìm kiếm.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> &#187; <span>Lưu trữ cho <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> &#187; <span>Tất cả bài viết</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> &#187; <span>Bài viết cho nhãn <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
Nhìn sơ bộ qua bạn sẽ thấy đoạn mã này không giống với cách khai báo cho breadcumbs lần trước không còn sử dụng
xmlns:v='http://rdf.data-vocabulary.org'
thay vào đó chã chuyển thành
itemtype='http://data-vocabulary.org/Breadcrumb'
phù hợp với HTML5 và vẫn hoàn toàn thân thiện với SEO.

Lời kết

Sau khi chèn và lưu thành công bạn đã có cho mình một breadcrumbs thân thiện SEO mà không còn phải lo lắng đến chuẩn HTML5 nữa. Các bài viết sắp tới trên blog của mình sẽ còn nhiều tiện ích, tính năng mới đạt chuẩn HTML5 cho các bạn.

2 bình luận

  1. avatar says

    23:38 Ngày 22 tháng 09 năm 2014

    hình ảnh trong bài viết mình bị lỗi html5 khá nhiều 4HhhPtw/UlqU8rHT_xI/AAAAAAAADF8/TYtzo-ZgEyk/s72-c/thuong+hieu.jpg' width='72'/ >
    mình đã xóa mấy có border rồi mà vẫn bị lỗi dấu đóng

  2. avatar says

    08:28 Ngày 23 tháng 09 năm 2014

    Để tối làm về mình check thử xem nó những cái gì nhé.

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.