» Tài liệu

» Tài liệu SEO

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

Thứ tư - 24/07/2013 16: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ạ:

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