Hướng dẫn cách sử dụng Rich Snippets

Hướng dẫn 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ạ:

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

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

 Trên đây là toàn tập Hướng dẫn cách sử dụng Rich Snippets   của Bình Nguyễn - iGoo.vn

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

Nguồn: igoo.vn/hướng-dẫn-sử-dụng-rich-snippets-toàn-tập.html