Tạo ngôi sao và LOGO trên Google dùng Rich Snippets

Cập nhật ngày 15, Tháng Một, 2016, Thuộc Google, SEO

Theo một số yêu cầu, Trung Tâm Tin Học xin hướng dẫn các bạn tạo làm ngôi sao và logo hoặc hình sản phẩm trên trên trang kết quả tìm kiếm của Google bằng cách sử dụng Rich Snippets do Google cung cấp.

Tạo ngôi sao và logo trên kết quả Google
Tạo ngôi sao và logo trên kết quả Google

Cách làm này được khuyến cáo không nên dùng giả nhưng nếu dùng thông tin thật và có vẻ tự nhiên thì cũng không đến nỗi nào.

Dưới đây xin không nói nhiều về Rich Snippets, các bạn hoàn toàn có thể xem tài liệu của Google về vấn đề trang trí nội dung này. Cách  làm này làm cho link hiển thị trên google đẹp với các Ngôi Sao đánh giá – hình ảnh trên trang kết quả tìm kiếm của GOOGLE.

Tôi cũng không có tham vọng giải thích chi tiết từng cách làm vì một khi bạn đã đạt tới trình độ mong muốn và hiểu về Rich Snippet thì có lẽ kết quả demo và đoạn code tương ứng với các kết quả ngôi sao, hình ảnh, logo, menu là quá đủ để bạn thục hành và mở rộng thêm.
Các đoạn code dưới đây là code mẫu (được áp dụng cho website của Shop Quần Áo SI ở Gò Vấp) giúp bạn hiểu cấu trúc và so sánh với kết quả tương ứng, các bạn chỉ cần thay tiêu đề, liên kết trong mã nguồn đi là dùng được.

Hiện menu – Rich snippets Breadcrumbs

Kết quả hiện Rich snippets - Breadcrumbs - Menu trên Google
Kết quả hiện Rich snippets – Breadcrumbs – Menu trên Google

Đoạn code mẫu

<div id=”breadcrumbs Quanaosi”>

<span itemscope=”” itemtype=”http://data-vocabulary.org/Breadcrumb”>

<a href=”http://www.quanaosi.com/” itemprop=”urls”>

<span itemprop=”title”>Home</span></a> ->

</span>

<span itemscope=”” itemtype=”http://data-vocabulary.org/Breadcrumb”>

<a href=”http://www.quanaosi.com/p/lien-he.html” itemprop=”urls”>

<span itemprop=”title”>Shop</span></a> ->

</span>

<span itemscope=”” itemtype=”http://data-vocabulary.org/Breadcrumb”>

<a href=”http://www.quanaosi.com/p/quan-jean-nam.html” itemprop=”urls”>

<span itemprop=”title”>Quần Jean Nam</span></a>

</span>

</div>

Hiện ngôi sao – Rich snippets Rating

Rich Snippets giúp hiện ngôi sao và hình ảnh, logo trên tìm kiếm Google
Rich Snippets giúp hiện ngôi sao và hình ảnh, logo trên tìm kiếm Google

Đoạn code mẫu giúp hiện ngôi sao trên Google

<div itemprop=”aggregateRating” itemscope=”” itemtype=”http://schema.org/AggregateRating”><span itemprop=”Value”>9</span>/<span itemprop=”bestRating”>10</span><span itemprop=”ratingCount”>99</span></div>

Đoạn code mẫu giúp hiện hình ảnh, logo trên Google

<div style=”left:-100px; position: fixed; text-indent: -99999px;” itemscope itemtype=”http://data-vocabulary.org/Recipe” >

<h1 itemprop=”name”>Áo Hawaii</h1>

<img itemprop=”photos” src=”https://lh5.googleusercontent.com/-xlUcQOWx-Sw/UC9VkWEwrGI/AAAAAAAACB8/1d_wF11u8JY/h1600/ao-cay-dua.JPG” />

<span itemprop=”author”>Quần Áo SI</span>

<span itemprop=”summary”>Quần Áo SI HCM</span>

</div>

Có gì thắc mắc vui lòng comment bên dưới.

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

Trần Triệu Phú – TTTH
Vui lòng ghi rõ nguồn khi đăng lại bài viết



Click Xem thêm: , ,