Hướng dẫn sử dụng Rich Snippets toàn tập

Thứ bảy, 16/06/2012 - 01:12

Hướng dẫn sử dụng Rich Snippets toàn tập

Thảo theo yêu cầu tim hiểu về Rich Snippets của anh em.

Bài viết này tôi sẽ tổng hợp những  Rich Snippets phổ biến nhất

Công cụ Test Rich Snippets: http://www.google.com/webmasters/tools/richsnippets

Hướng dẫn:

- itemscope: Định nghĩa khối có tác dụng.

- itemtype: Khai báo cho Google biết định nghĩa và nhận dạng data cho thuộc tính itemprop.
 
- itemprop: Khai báo định dạng cấu trúc mà itemtype cung cấp

 

Nguồn: http://schema.org/docs/schemas.html và http://www.data-vocabulary.org

 

1. Rich Snippets xếp hạng, bình chọn, bỏ phiếu:

HTML:

<div itemscope itemtype="http://schema.org/Recipe">
    <span itemprop="name">Cộng đồng Google Việt Nam</span>
    <img itemprop="image" src="http://igoo.vn/Source/images/logo.png" alt="Cộng đồng Google Việt Nam">
    <div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
        <span itemprop="ratingValue">9</span>/<span itemprop="bestRating">10</span>
        <span itemprop="ratingCount">99</span> bình chọn
    </div>
</div>

Minh hoạ:

Rich Snippets AggregateRating 1

HTML:

<div itemscope itemtype="http://schema.org/Recipe">
    <span itemprop="name">Cộng đồng Google Việt Nam</span>
    <img itemprop="image" src="http://igoo.vn/Source/images/logo.png" alt="Cộng đồng Google Việt Nam">
    <div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
        <span itemprop="ratingValue">9</span>/<span itemprop="bestRating">10</span>
        <span itemprop="reviewCount">999</span> bài đánh giá
    </div>
</div>
 
Minh hoạ:
Rich Snippets AggregateRating 2
HTML:
 
<div itemscope itemtype="http://data-vocabulary.org/Recipe">
<span itemprop="name">Cộng đồng Google Việt Nam</span>
    <img itemprop="photo" src="/images/logo.jpg" alt="Cộng đồng Google Việt Nam" />
    <div itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
        <span itemprop="rating">2</span>
        <span itemprop="count">10</span>
    </div>
</div>
 
Minh hoạ:
Rich Snippets Review-aggregate 1
HTML:
 
<div itemscope itemtype="http://data-vocabulary.org/Recipe">
<span itemprop="name">Cộng đồng Google Việt Nam</span>
    <img itemprop="photo" src="/images/logo.jpg" alt="Cộng đồng Google Việt Nam" />
    <div itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
        <span itemprop="rating">2</span>
        <span itemprop="votes">15/span>
    </div>
</div>
 
Minh hoạ:
Rich Snippets Review-aggregate 2
 
 
2. Rich Snippets Breadcrumb link (navigation link):
 
 
HTML:
 
<ul itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <li><a itemprop="url" href="/" title="Trang chủ"><span itemprop="title">Trang chủ</span></a></li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="/trang1" title="Trang 1"><span itemprop="title">Trang 1</span></a></li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="/trang2" title="Trang 2"><span itemprop="title">Trang 2</span></a></li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="/trang3" title="Trang 3"><span itemprop="title">Trang 3</span></a></li>
</ul>
 
Minh hoạ:
Rich Snippets Breadcrumb
 
 
3. Xác nhận Google+ Pages với Website:
 
 
4. Xác nhận tác giả bài viết bằng Google+:
 
B1: Copy thẻ <a> vào bài viết:
<a rel="author" href="https://plus.google.com/[ID Google+]?rel=author">[Tác giả]</a>
ví dụ: <a rel="author" href="https://plus.google.com/116602647998496576269?rel=author">Bình Nguyễn</a>
B2: Đăng nhập Google+ -> sửa tiểu sử của bạn -> thêm website của bạn vào mục Cộng tác viên để xác nhận bạn đang làm việc với Website
B3: Đăng ký email để xác nhận quyền tác giả tại: http://plus.google.com/authorship
B4: Upload lại avatar chú ý avatar G+ phải là cái mặt mình :D ko là ko được nhé.
 
Rich Snippets Author
 
 
Kết luận: Các  bạn chỉ cần nhìn và phân tích chút là oki vì nó cũng rất đơn giản.
 
Chúc các bạn thành công!
 
Bình Nguyễn - iGoo.vn

 

Url Link

5 26

Bình luận (26)

Ảnh cá nhân của item[

ha nhat

3 năm trước

cái này là đánh giá tự động à , đánh giá như thế có bị google để ý không ạ, vi đánh giá như thế là ảo không thật

tai game danh bai

Ảnh cá nhân của item[

Nam Hải

4 năm trước

Làm sao để hiển thị được 3 rich snippet trên google search như trang hả bác chủ thớt? muốn hiển thị 3 cái: Author, Breadcrumbs, Review mà nó chỉ hiện thị được mỗi 2 cái:
- ở các bài viết nếu hiển thị: Breadcrumbs, Review thì lại không có Author
- Ở trang chủ thì hiển thị được: Author
Không biết sao đây bác.?
Ảnh cá nhân của item[

Tiep Nguyen

4 năm trước

chèn code vào trong joomla thì chèn chỗ nào hả mọi người
Ảnh cá nhân của item[

Phạm Tiến Vinh

4 năm trước

Mấy anh cho em hỏi trong phần 1. Rich Snippets xếp hạng, bình chọn, bỏ phiếu. Mình thích ghi nhiêu phiếu đánh giá cũng được à. thấy toàn html mà, hay có 1 trang nào đó đánh giá web mình. Mong mấy anh chỉ giáo
Ảnh cá nhân của item[

ManhToan

4 năm trước

nếu một website có người làm snipet này.Khi mình muốn làm nhưng nó báo có rồi thì sao ???
Anh em cho ý kiếm dùm em :D
Ảnh cá nhân của item[

Tim Challies

4 năm trước

cảm ơn bác em đang cần
Ảnh cá nhân của item[

Dinh Vantan

5 năm trước

cái này làm có trang hiện trang không, không phải tất cả đều hiện ra cả đâu. Có khi chẳng thấy hiện luôn nữa, khổ quá đi
Ảnh cá nhân của item[

Diễn đàn y tế

5 năm trước

k biết sử dụng cái này có bị giảm vị trí từ khóa không mọi người
Ảnh cá nhân của item[

Dũng Đinh Hữu

5 năm trước

E đã thử và được một time thì nó lại mất :(
Ảnh cá nhân của item[

Seo Tùng

5 năm trước

Logo hiện là ok rồi, thêm cái sao sao gì nữa là chuẩn

Gửi bình luận của bạn

Đăng nhập hoặc Đăng ký ngay để đăng nhận xét!