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

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ạ:

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ạ:

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ạ:

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ạ:

2. Rich Snippets Breadcrumb link (navigation link):

Tham khảo: http://igoo.vn/breadcrumb-link-navigation-link-trong-seo.html

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ạ:

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é.

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.