Chủ Nhật, ngày 22 tháng 5 năm 2016

Hướng Dẫn thêm Rich Snippets Chuẩn HTML5 cho Blogger Blogspot

Đây thực chất là công cụ đánh giá sao cũng như kèm hình ảnh bài viết trên bộ máy công cụ tìm kiếm mà đặc biệt là google. Cách này sẽ khiến cho bài viết của bạn khi tìm kiếm được bắt mắt cũng như chuyên nghiệp hơn và có thể là SEO sẽ tốt và thân thiện hơn hơn
Rich Snippets là đoạn thông tin hiển thị trên kết quả trả về của bộ máy tìm kiếm (Google, Yahoo, Bing, …) được thể hiện dưới dạng sao, hình ảnh, xếp hạng đánh giá,… nhằm làm tăng độ nổi bật của website khi người dùng thực hiện thao tác search với một từ khóa nào đó. Thêm Rich Snippets chuẩn HTML5 cho blogspot !



CÀI ĐẶT RICH SNIPPETS CHUẨN HTML5 CHO BLOGSPOT


- Vào Mẫu > Chỉnh sửa HTML
- Thêm đoạn code sau trên ]]></b:skin>
.hide{position:absolute;top:-9999px;left:-9999px}


- Chèn code sau dưới <body> 
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='hide'>
<div itemscope='' itemtype='http://schema.org/Recipe'>
<span itemprop='name'>CODESEO.NET - Share CODE Template Thủ Thuật Blog/Web/Wap Hay và Tốt Nhất</span>
<img alt='CODESEO.NET - Share CODE Template Thủ Thuật Blog/Web/Wap Hay và Tốt Nhất' itemprop='image' src='https://1.bp.blogspot.com/-awKxVxSzFB4/V0CV7NAlfpI/AAAAAAAADE8/8YhihSEsVnIu12tXi_SAD1ZlQYJiyRLyQCLcB/s1600/web-code.png'/>
<div itemprop='aggregateRating' itemscope='' itemtype='http://schema.org/AggregateRating'>
<span itemprop='ratingValue'>8</span>/<span itemprop='bestRating'>10</span>
<span itemprop='ratingCount'>102</span> bình chọn
</div>
</div>
</div>
</b:if>
- Thay tiêu đề trang, hình ảnh của bạn ở phần name cũng như phần img cái đó sẽ hiển thị trang chủ của bạn trên google


- Tiếp tục tìm đến thẻ 
<div class='post-footer-line post-footer-line-1'>
Hoặc
<div class='post-footer-line post-footer-line-2'>
Hoặc
<div class='post-footer-line post-footer-line-3'>


- Chèn đoạn code sau dưới thẻ vừa tìm 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='hide'>
<div itemscope='' itemtype='http://schema.org/Recipe'>
<span itemprop='name'><data:blog.pageName/></span>
<img expr:alt='data:blog.pageName' expr:src='data:blog.postImageThumbnailUrl' itemprop='image'/>
<div itemprop='aggregateRating' itemscope='' itemtype='http://schema.org/AggregateRating'>
<span itemprop='ratingValue'>8</span>/<span itemprop='bestRating'>10</span>
<span itemprop='ratingCount'>102</span> bình chọn
</div>
</div>
</div>
</b:if>


- Như vậy là bạn đã thêm thành công Rich Snippets cho blogspot rồi.
- Kiểm tra tại xem đã đặt đúng vị trí code chưa tại : https://developers.google.com/structured-data/testing-tool/

Hãy comment bên dưới nếu có gì không hiểu