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.

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.