Xin chào các bạn, tiếp tục với serial tạo schema markup cho website. Ở Phần 1 hướng dẫn toàn tập về schema markup , mình đã giới thiệu với các bạn 5 loại schema markup và cách để hiển thị chúng trên google. Ở phần 2 này, mình sẽ hướng dẫn tiếp các dạng schema markup khác(Ở việt nam hay gọi nó là Rich Snippet) ). Let’s go !!!

Schema Software Application

Dạng Schema Markup này rất thích hợp với các dạng website chuyên về ứng dụng di động, game di động. Nó sẽ giúp người tìm kiếm biết là đường link này đang viết về app gì, có đúng app mà họ tìm không…

tạo Schema Software Application

Để hiện thị được như trên, các bạn theo dõi đoạn code ví dụ sau:

<div itemscope itemtype=”http://schema.org/MobileApplication”>
<meta itemprop=”url” content=”https://play.google.com/store/apps/details?id=com.elitesem.calculator”>
<h1 itemprop=”name”>Tên ứng dụng</h1>
Updated: <span itemprop=”datePublished”>thời gian công khai sản phẩm</span>
Size: <span itemprop=”fileSize”>Dung lượng</span>
Requires <span itemprop=”operatingSystem”>hệ điều hành hỗ trợ</span>
Category: <span itemprop=”applicationCategory”>Danh mục ứng dụng</span>
Rating:
<div itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>
<span itemprop=”ratingValue”>4.0</span> (
<span itemprop=”ratingCount”>1</span> rating )
</div>
<div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”><meta content=”0″ itemprop=”price”></div>
</div>

Xem hướng dẫn từ google: Enabling Rich Snippets for Software Apps

E-Commerce Sites

Thường được sử dụng đối với các trang web bán hàng trực tuyến, dạng Rich Snippets này sẽ hiển thị giá cả, tình trạng còn hàng hay đã hết và cả đánh giá của khách hàng nữa.

Các bạn có thể tham khảo đoạn code bên dưới nhé :

<div itemscope itemtype=”http://schema.org/Product”>
<h1 itemprop=”name”>Tên sản phẩm</h1>
<span itemprop=”description”>Đoạn mô tả của bạn</span>
<span itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”>
<meta itemprop=”priceCurrency” content=”USD” />
Buy New: $<span itemprop=”price”>Giá sản phẩm</span>
<link itemprop=”availability” href=”http://schema.org/InStock” />
</span>

Xem hướng dẫn từ google: Enabling Rich Snippets for Products

Schema Rating Markup

Schema Rating Markup là 1 dạng Rich Snippet hiển thị lượt đánh giá của người dùng với website hay sản phẩm của bạn. Nó có tác dụng là gây nổi bật và tạo sự tin cậy đối với website. Tăng tỉ lệ click vào website cao hơn hoặc tỉ lệ chốt đơn hàng.

tạo Schema Rating Markup

Bạn tham khảo đoạn code sau nhé:

<div itemscope itemtype=”http://schema.org/Thing”>
<h2 itemprop=”name”> Tiêu đề </h2>
<div itemprop=”description”>mô tả cho nó</div>
<div itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>
<div>Book rating:
<span itemprop=”ratingValue”>9</span>
<meta itemprop=”bestRating” content=”10“/>
<meta itemprop=”worstRating” content=”1“/>
based on <span itemprop=”ratingCount”>20</span> ratings
</div>
</div>
</div>

Xem hướng dẫn từ google: Enabling Rich Snippets for Reviews and Ratings

Local Business Sites

Hiện nay thì local search đang khá phổ biến đối với người dùng, Nó giúp target vào đúng mục tiêu mà khách hàng cần. Ví dụ như : Bạn đang dùng máy tính có kết nối internet tại Hà Nội và bạn search các địa điểm có món ăn ngon thì google sẽ ưu tiên hiển thị các quán ăn ngon tại Hà Nội chứ không phải là các quán ăn tận Hồ Chí Minh hay Huế.

Vì thế , nếu bạn muốn target vào đối tượng tại 1 khu vực cụ thể nào đó thì hãy thêm đoạn code sau vào nhé:

<div itemscope itemtype=”http://schema.org/LocalBusiness”>
<h1 itemprop=”name”>Tên</h1>
<p itemprop=”descripton”>Đoạn mô tả</p>
<p>Open: <time itemprop=”openingHours” datetime=”Mo-Fi 09:00-17:00(Thời gian bắt đầu làm việc)“>Monday-Friday 9am-5pm</time></p>
<p>Phone: <span itemprop=”telephone” content=”+16463502789(Số điện thoại)”>646-350-2789</span></p>
<address itemscope itemtype=”http://schema.org/PostalAddress” itemprop=”address”>
<span itemprop=”streetAddress”>142 W 36th St, Fl 11(Địa Chỉ)</span>
<span itemprop=”addressLocality”>New York</span>,
<span itemprop=”addressRegion”>NY</span> <span itemprop=”postalCode”>mã bưu điện (hà nội là 100000)</span>
</address>
</div>

Xem hướng dẫn khác:

Events Sites

Cũng tương tự như sitelink nhưng dạng schema markup này mang tính theo thời gian hơn là sitelinks. Nó giúp hiển thị nhanh chóng các event đang có trên website cùng thời gian, như vậy sẽ giúp khách hàng hiểu rõ hơn về website trước khi họ truy cập

tạo schema Events Sites

Các bạn tham khảo đoạn code sau nhé :

<script type=”application/ld+json”>
{
“@context”: “http://schema.org”,
“@type”: “MusicEvent”,
“name”: “AC/DC“,
“image”: “http://s1.ticketm.net/tm/en-us/dbimages/199365a.jpg“,
“startDate”: “2015-09-25T19:45:00-07:00“,
“url”: “http://www.ticketmaster.com/acdc-san-francisco-california-09-25-2015/event/“,
“location” : {
“@type”: “Place”,
“name”: “AT&T Park“,
“sameAs”: “http://www.ticketmaster.com/AT-T-Park-tickets-San-Francisco/venue/229585“,
“address” : {
“@type”: “PostalAddress”,
“streetAddress”: “24 Willie Mays Plaza“,
“addressLocality”:”San Francisco“,
“addressRegion”:”CA“,
“postalCode”:”100000“,
“addressCountry”:”US
}
},
“offers” : {
“@type” : “Offer”,
“url”:”http://www.ticketmaster.com/acdc-san-francisco-california-09-25-2015/event/1C004E43C5D25EDC
}
}
</script>

Recipe Schema Markup

Thích hợp với các trang web có chủ đề về nấu ăn, hướng dẫn nấu ăn ngon. Nó sẽ hiển thị một phần hình ảnh của món ăn và một đoạn công thức món ăn để bạn có thể tìm được đúng thứ mà mình cần.

Recipe Schema Markup

Các bạn tham khảo đoạn code sau nhé :

<div itemscope itemtype=”http://schema.org/Recipe”>
<link itemprop=”url” href=”http://allrecipes.com/recipe/12682/apple-pie-by-grandma-ople/” />
<meta itemprop=”mainEntityOfPage” content=”True” />
<img src=”http://images.media-allrecipes.com/userphotos/720×405/736203.jpg” alt=”Apple Pie by Grandma Ople” title=”Apple Pie by Grandma Ople” itemprop=”image” />
<h1 itemprop=”name”>Tên</h1>
<div itemprop=”description”>”Mô tải cho nó“</div>

Prep Time: <time itemprop=”prepTime” datetime=”PT30M“>30 min</time>
Cook Time: <time itemprop=”cookTime” datetime=”PT1H“>1 hour</time>
Total Time: <time itemprop=”totalTime” datetime=”PT1H30M“>1 hour 30 min</time>
Yield: <span itemprop=”recipeYield”>1 9pie (8 servings)</span>

Ingredients:
<span itemprop=”ingredients”>1 recipe pastry for a 9 inch double crust pie</span>
<span itemprop=”ingredients”>1/2 cup unsalted butter</span>
<span itemprop=”ingredients”>3 tablespoons all-purpose flour</span>
<span itemprop=”ingredients”>1/4 cup water</span>
<span itemprop=”ingredients”>1/2 cup white sugar</span>
<span itemprop=”ingredients”>1/2 cup packed brown sugar</span>
<span itemprop=”ingredients”>8 Granny Smith apples – peeled, cored and sliced</span>

<ol itemprop=”recipeInstructions”>
<li>Preheat oven to 425 degrees F (220 degrees C).</li>
<li>Melt the butter in a saucepan. Stir in flour to form a paste.</li>

</ol>
</div>

Persional Snippets

Một loại Rich Snippet cuối cùng hơi mang tính các nhân đó là Rich Snippet về thông tin bản thân.

Bạn muốn hình ảnh của mình được quảng bá rộng rãi trên google hoặc muốn nguời dùng hiểu kỹ hơn về bạn thì đây là 1 snippet không thể thiếu.

tạo Persional Snippets

Các bạn tham khảo code để làm nhé:

<div itemscope=”” itemtype=”http://schema.org/Person”>
<meta itemprop=”gender” content=”Male“>
<meta itemprop=”birthDate” content=”Nov 11, 199x“>
<meta itemprop=”spouse” content=”Rebecca Kirshner“>
<meta itemprop=”parent” content=”Jack Kirshner“>
<meta itemprop=”jobTitle” content=”CEO of Elite SEM and Coffeeforless“>
<meta itemprop=”email” content=”admin@linkerpt.com“>
<meta itemprop=”url” content=”https://www.linkerpt.com“>
<meta itemprop=”memberOf” content=”Young President’s Organization“>
<meta itemprop=”memberOf” content=”SEMPO“>
<meta itemprop=”image” content=”https://linkerpt.com/wp-content/uploads/2017/06/logo.png“>
<span itemprop=”name”>
<link itemprop=”sameAs” href=”https://www.wikidata.org/wiki/Q19753495“>
<link itemprop=”sameAs” href=”https://www.youtube.com/channel/xxx“>
<link itemprop=”sameAs” href=”https://www.linkedin.com/pub/linkerpt“>
<link itemprop=”sameAs” href=”https://twitter.com/linkerpt_com“>
<link itemprop=”sameAs” href=”https://plus.google.com/b/112397121547466927182/“>Linkerpt</span> is the CEO of Elite SEM Inc. and Coffeeforless.com…
</div>

Xem thêm : Plugins tạo Rich snipet cho wordpress

Như vậy là xong, các bạn đã phần nào hiểu Rich Snippet là gì chưa ?

Và cuối cùng, các bạn vào https://search.google.com/structured-data/testing-tool?hl=vi để kiểm tra xem đã thêm thành công chưa nhé.

Rich Snippet là công cụ khá tốt để nâng cao tỷ lệ click vào trang. Tuy nhiên, không phải ai thêm vào cũng sẽ hiển thị luôn đượcvì google đang làm khá chặt chẽ khoản này, nó còn phụ thuộc vào nhiều yếu tố. Chỉ những trang có nội dung tốt nhất, có 1 độ trust kha khá mới có khả năng được google xem xét để hiển thị, Chúc các bạn thành công!

CHI TIẾT
Ngày đánh giá
Bài đánh giá
Tạo schema markup & structured Data
Tác giả đánh giá
51star1star1star1star1star
Xem thêm bài viết liên quan
Xem thêm KIẾN THỨC INTERNET

Được đề xuất cho bạn

[Hướng dẫn] Phần mềm để xem tivi trên android + VLC PC + List IPTV

Chào mọi người, hôm nay Linkerpt.Com sẽ hướng dẫn mọi người cách cài đặt và sử dụng các ứn…