Hiện thumbnail và đánh giá 5 sao trên google search

By Unknown

Thứ Hai, 15 tháng 9, 2014

Sau khi authorship bị loại bỏ khỏi kết quả  google search một biện pháp thay thế khá chuyên nghiệp là hiện thumbnail và đánh giá 5 để thay thế nó.

Hiện thumbnail và đánh giá 5 sao trên google search

Code tuy đơn giản nhưng khá bắt mắt khi hiện cả thumbnail và đánh giá 5 sao trên kết quả tìm kiếm của google.

Cụ thể các bước tiến hành như sau:
Đầu tiên các bạn đăng nhập vào blogger.com chọn Mẫu >> Chỉnh sửa HTML >> Nhấn Ctrl+F tìm đến thẻ ]]></b:skin> và thêm đoạn CSS bên dưới trước nó.

CSS hrecipe

/*hrecipe*/
.hrecipe{line-height: 1.7em;
font-size: 13px;
margin: 6px 0 0;
padding: 12px;
background: #f8f8f8;border: 1px solid #e2e2e2;
color: #333;
overflow: hidden;}
.deskripsi-artikel a, .hrecipe a{color:#f00;}

Sau khi thêm CSS xong các bạn tìm đến thẻ  <div class='post-footer'> thứ 2 thêm đoạn HTML bên dưới đằng sau nó .

HTML hrecipe

<div class='hrecipe'>
<img class='photo' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' style='float:left;margin-right:10px;'/>
<span class='item'>
    <span class='fn'><data:blog.title/></span><br/>
</span>
  <b>Published:</b> <span class='published'><data:post.timestampISO8601/></span><br/>
  <b>Title:</b><span class='summary'><data:post.title/></span><br/>
  <b>Rating:</b><span class='review hreview-aggregate'>
<span class='rating'>
  <span class='average'>5</span> On
<span class='count'>22</span> reviews
</span>
</span>
             </div>

Bước cuối cùng lưu lại và test kết quả tại https://www.google.com/webmasters/tools/richsnippets
Chọn kích thước nhỏ như hình bên dưới để hiện thumbnail trên google search nhé các bạn.

Chúc các bạn thành công !

Tag : Chia sẻ, CSS