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-navig...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:

Tham khảo: http://igoo.vn/xác-nhận-google-pages...video-seo.html

4. Xác nhận tác giả bài viết bằng Google+:
Bạn chỉ cần thao tác 2 bước đơn giản để khai báo với Google là bài viết đó là của bạn.

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