Hướng dẫn Schema Markup và Structured Data theo từng loại Site


Structured data có thể giúp bạn gửi các tín hiệu về doanh nghiệp và nội dung của bạn đến công cụ tìm kiếm. Nhưng bạn sẽ bắt đầu từ đâu? Trong bài viết này tôi sẽ hướng dẫn bạn một cách đầy đủ để làm việc đó.

Có thể bạn đã nghe nói đến việc tận dụng schema markup (hoặc Structured data) có thể giúp công cụ tìm kiếm hiểu rõ hơn về nội dung của bạn cũng như tăng cường khả năng hiển thị thông qua rich snippets, featured snippets and kết quả Knowledge Graph. Structured data là một cách tuyệt vời để tạo ra tín hiệu thân thiện với công cụ tìm kiếm nhiều hơn, nó gián tiếp ảnh hưởng đến thứ hạng tìm kiếm.

Gần đây, John Mueller đã tuyên bố rằng gã khổng lồ tìm kiếm có thể thêm markup structured data như là một yếu tố xếp hạng. Vì vậy, việc cần thiết là phải tập trung nỗ lực để thực thi schema markup trên website của bạn, vì điều này đang trở nên quan trọng hơn với Google.

Tuy nhiên, nó có thể gây nhầm lẫn khi sử dụng schema trên website của bạn. Có rất nhiều những quyết định cần phải đưa ra và nó khiến người dùng gặp khó khăn. Dưới đây, tôi đã liệt kê ra một số schema có thể được sử dụng bởi các loại website cụ thể. Một số có thể được sử dụng trên tất cả các loại website.

Loại schema markup dưới đây có thể và nên được sử dụng với tất cả loại site khác nhau.

Schema Markup các tổ chức

Schema markup tổ chức giúp tạo ra các tín hiệu thương hiệu để tăng cường Knowledge Graph của bạn và website snippet có mặt trong các trang kết quả tìm kiếm.

Hãy xác định logo của bạn, link profile social và thông tin liên hệ của công ty. Ví dụ như của Apple
 

Huong dan Schema Markup va Structured Data theo tung loai Site ​

Ví dụ (sử dụng JSON-LD)

HTML:
<script type="application/ld+json">{ "@context" : "http://schema.org",  "@type" : "Organization",  "legalName" : "Elite SEM",  "url" : "http://elitesem.com/",  "contactPoint" : [{    "@type" : "ContactPoint",    "telephone" : "+1-646-350-2789",    "contactType" : "customer service"  }]  "logo" : "http://elitesem.com/wp-content/uploads/2014/03/Elite_SEM_Logo_2014.png",  "sameAs" : [ "http://www.facebook.com/EliteSEM",    "http://www.twitter.com/elitesem",    "http://plus.google.com/+Elitesem",    "https://www.youtube.com/user/EliteSEMInc",    "http://www.linkedin.com/company/elite-sem",    "https://www.wikidata.org/wiki/Q20736641"]}</script>


Google Resource Page: Customizing Your Knowledge Graph.

Schema Markup website

Schema markup website giúp tạo ra tính năng Sitelinks Search Box đối với thương hiệu SERP và có thể giúp tên site của bạn xuất hiện trong kết quả tìm kiếm. Tuy nhiên, bạn phải có một site tìm kiếm trên website của bạn để kích hoạt yếu tố Sitelinks Search Box.

Huong dan Schema Markup va Structured Data theo tung loai Site 2 ​

Ví dụ (sử dụng JSON-LD)

HTML:
<script type="application/ld+json">{  "@context" : "http://schema.org",  "@type" : "WebSite",  "name" : "Elite SEM",  "url" : "http://elitesem.com/",  "potentialAction" : {    "@type" : "SearchAction",    "target" : "http://elitesem.com/?s={search_term}",    "query-input" : "required name=search_term"  }             }</script>

Google Resource Pages: Sitelinks Search BoxInclude Your Site Name in Search Results.

Markup Breadcrumbs 

Schema BreadcrumbList cho phép bạn đánh dấu lên breadcrumbs trên site của bạn để tạo ra breadcrumb rich snippets cho site trong SERPs.

Huong dan Schema Markup va Structured Data theo tung loai Site 3 ​

Ví dụ (sử dụng microdata)

HTML:
<ol itemscope itemtype="http://schema.org/BreadcrumbList">  <li itemprop="itemListElement" itemscope      itemtype="http://schema.org/ListItem">    <a itemprop="item" href="https://example.com/">        <span itemprop="name">Home</span></a>    <meta itemprop="position" content="1" />  </li>  ›  <li itemprop="itemListElement" itemscope      itemtype="http://schema.org/ListItem">    <a itemprop="item" href="https://example.com/activewear/">      <span itemprop="name">Activewear</span></a>    <meta itemprop="position" content="2" />  </li>  ›  <li itemprop="itemListElement" itemscope      itemtype="http://schema.org/ListItem">    <a itemprop="item" href="https://example.com/activewear/tops/">      <span itemprop="name">Tops</span></a>    <meta itemprop="position" content="3" />  </li></ol>


Google Resource Page: Breadcrumbs.

Schema Markup Site Navigation 

Markup SiteNavigationElement có thể giúp công cụ tìm kiếm hiểu cấu trúc site và điều hướng của bạn và có thể được sử dụng để ảnh hưởng đến sitelinks tự nhiên.

Huong dan Schema Markup va Structured Data theo tung loai Site 4 ​


Ví dụ (sử dụng microdata)

HTML:
<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/our-advantage">Our Advantage</a></li>  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/our-travel-experts">Travel Experts</a></li>  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/destinations">Destinations</a></li>  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/cruises">Cruises</a></li>  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/interests">Interests</a></li>  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/explore-your-world/interests/hotels-and-resorts">Hotels</a></li>  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/travel-guides">Travel Resources</a></li></ul>

Resource Page: SiteNavigationElement (trên Schema.org)

Schema Markup video 

Một site được nhúng hoặc lưu trữ nội dung video có thể tận dụng schema VideoObject. Chủ yếu là Google hiển thị video rich snippet cho video YouTube nhưng điều này sẽ giúp các video rich snippets xuất hiện trên webpage của bạn trong Google Video Search.
 

Huong dan Schema Markup va Structured Data theo tung loai Site 5 ​


Các thuộc tính bắt buộc:

- Name.
- Description.
- ThumbnailUrl.
- UploadDate.

Ví dụ (sử dụng microdata)

HTML:
<div itemscope itemtype="http://schema.org/VideoObject"><link itemprop="url" href="http://www.ted.com/talks/boaz_almog_levitates_a_superconductor"><meta itemprop="name" content="The levitating superconductor" /><meta itemprop="description" content="How can a super-thin 3-inch disk levitate something 70,000 times its own weight? In a riveting demonstration, Boaz Almog shows how a phenomenon known as quantum locking allows a superconductor disk to float over a magnetic rail — completely frictionlessly and with zero energy loss. Experiment: Prof. Guy Deutscher, Mishael Azoulay, Boaz Almog, of the High Tc Superconductivity Group, School of Physics and Astronomy, Tel Aviv University." /><meta itemprop="uploadDate" content="2015-02-05T08:00:00+08:00" /><meta itemprop="duration" content="PT10M25S"><img itemprop="thumbnailUrl" src="https://tedcdnpi-a.akamaihd.net/r/tedcdnpe-a.akamaihd.net/images/ted/b9693798223a4101be834398af15df5560d3f25c_1600x1200.jpg?quality=95&amp;w=480" /></div>

Google Resource Page: Enabling Rich Snippets for Videos.

Schema Markup ứng dụng phần mềm

Tận dụng chức năng markup SoftwareApplication trên các ứng dụng phần mềm của bạn để kích hoạt ứng dụng rich snippets.
 

Huong dan Schema Markup va Structured Data theo tung loai Site 6 ​

Các thuộc tính bắt buộc: các thuộc tính bắt buộc là "name" nhưng Google chú ý đến rich snippets đang hiển thị cho các ứng dụng bao gồm ít nhất 2 trong số các thuộc tính sau: AggregateRating (bao gồm ratingValue và một trong hai ratingCount hoặc reviewCount). AggregateRating (bao gồm ratingValue và một trong hai ratingCount hoặc reviewCount).

- AggregateRating (bao gồm ratingValue và một trong hai ratingCount hoặc reviewCount )
- Offers.
- OperatingSystem.
- ApplicationCategory.

Ví dụ (sử dụng microdata)

HTML:
<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">SEM Calculator 2.0</h1>  Updated: <span itemprop="datePublished">September 3, 2014</span>  Size: <span itemprop="fileSize">1.9M</span>  Requires <span itemprop="operatingSystem">Android 2.3 and up</span>  Category: <span itemprop="applicationCategory">Business</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>

Google Resource Page: Enabling Rich Snippets for Software Apps.

Site E-Commerce

Schema Product & Markup Offer 

Sử dụng cùng với markup Product và Offer có thể giúp thông tin sản phẩm xuất hiện trong SERPs, bao gồm giá cả và trạng thái thông tin. Lưu ý rằng markup Offer là cần thiết để giá cả xuất hiện trong Google SERPs.

Huong dan Schema Markup va Structured Data theo tung loai Site 7 ​

Các thuộc tính bắt buộc:

- Đối với schema Product, chỉ thuộc tính "name" là bắt buộc
- Đối với schema Offer, thuộc tính "price" và priceCurrency” là bắt buộc.

Ví dụ (sử dụng microdata)

HTML:
<div itemscope itemtype="http://schema.org/Product">  <h1 itemprop="name">Back to the Future 1:1 Scale Hoverboard</h1>  <span itemprop="description">Time traveling to 2015 and back is only the beginning of the adventures found in Back to the Future Part II. The coolest part…was finding the hoverboard! And now the future is finally here and you can have a hoverboard of your own! This replica prop is an exact recreation from the one seen in Back to the Future II. Sure, it doesn't truly hover (come on scientists!) but carrying it around will let everyone know that you've just come back... from the future! Just don't try to use it on water! <i>Back to the Future is a trademark and copyright of Universal Studios and U-Drive Joint Venture. Licensed by Universal Studios Licensing LLC. All Rights Reserved.</i></span>  <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">    <meta itemprop="priceCurrency" content="USD" />    Buy New: $<span itemprop="price">48.99</span>    <link itemprop="availability" href="http://schema.org/InStock" />  </span></div>

Google Resource Page: Enabling Rich Snippets for Products.

Schema Markup Rating

Schema Rating được sử dụng chủ yếu trên các trang web thương mại điện tử nhưng cũng có thể được sử dụng cho một trang web kinh doanh địa phương, chẳng hạn như một nhà hàng. Khi một item có nhiều rating sẽ tạo ra một đánh giá tổng hợp, bạn sẽ muốn sử dụng schema AggregateRating.

(Lưu ý: Google cho rằng bạn sử dụng mô hình 5 điểm, với 1 là tồi nhất và 5 là tốt nhất. Nếu bạn sử dụng bất cứ điều gì khác ngoài khoảng này, bạn sẽ cần phải chỉ ra sự đánh giá cao nhất có thể với thuộc tính “bestRating”). Những markup này sẽ giúp tạo ra tỷ lệ rich snippets trong SERPs.

Ví dụ (sử dụng microdata)

HTML:
<div itemscope itemtype="http://schema.org/Thing">  <h2 itemprop="name"> Super Book </h2>  <div itemprop="description">Ultra interesting. Super impressive.</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>

Google Resource Page: Enabling Rich Snippets for Reviews and Ratings

Các nhà xuất bản site

Schema Markup Article 

Nếu bạn là một nhà xuất bản website, schema NewsArticle hoặc BlogPosting là được khuyến cáo (chọn một trong hai tùy thuộc vào site/nội dung của bạn).

Tận dụng các đánh dấu phù hợp có thể giúp nội dung của bạn xuất hiện trong Google News và các bài viết sâu sắc được khuyến cáo.

Các thuộc tính bắt buộc:

- Headline.
- Image
- DatePublished.

Huong dan Schema Markup va Structured Data theo tung loai Site 8 ​

Ví dụ (sử dụng JSON-LD)

HTML:
<script type="application/ld+json">{  "@context": "http://schema.org",  "@type": "Article",  "headline": "Emmys 2015: The 5 categories we're most excited to see",  "image": "http://rack.1.mshcdn.com/media/ZgkyMDE1LzA5LzIwLzQ0L2YyOGFiZmM5NmNkLmQ5ZjgxLmpwZwpwCXRodW1iCTEyMDB4NjI3IwplCWpwZw/418b1a9e/940/f28abfc9-6cd9-217b-8bc7-fd48dd3621a9_MM714-21.jpg","keywords": ["television","emmys","uncategorized","entertainment","tv","emmys-2015"],  "datePublished": "2015-09-20T13:39:38Z",  "articleSection": "entertainment",  "creator": "Sandra Gonzalez",  "author": "Sandra Gonzalez",  "articleBody": "The 2015 Emmy Awards are upon us, and while television's biggest night has in several years etc....",  "mainEntityOfPage": "True"}</script>

Google Resource Page: Enabling Rich Snippets for Articles.

Các site doanh nghiệp địa phương

Schema Markup Local Business

Bạn có thể tận dụng schema markup LocalBusiness và PostalAddress để tác động đến danh sách địa phương của bạn. Đánh dấu này có thể được sử dụng để chỉ ra địa chỉ vật lý, giờ mở cửa, các loại hình thanh toán được chấp nhận và nhiều hơn nữa.

(Lưu ý: Hãy nhớ rằng cũng có schema industry-specific, chẳng hạn như AutomotiveBusiness, SelfStorage, travelAgency và nhiều hơn nữa.)

Mã:
<img class=”aligncenter has-border size-full wp-image-231163″ src=”http://searchengineland.com/figz/wp-content/seloads/2015/09/local-schema-markup.jpg” alt=”Local Business Schema Markup” width=”1036″ height=”674″ /> 

Ví dụ (sử dụng microdata)

HTML:
<div itemscope itemtype="http://schema.org/LocalBusiness">  <h1 itemprop="name">Elite SEM</h1>  <p itemprop="descripton">A performance-driven digital marketing agency.</p>  <p>Open: <time itemprop="openingHours" datetime="Mo-Fi 09:00-17:00">Monday-Friday 9am-5pm</time></p>  <p>Phone: <span itemprop="telephone" content="+16463502789">646-350-2789</span></p>  <address itemscope itemtype="http://schema.org/PostalAddress" itemprop="address">    <span itemprop="streetAddress">142 W 36th St, Fl 11</span>    <span itemprop="addressLocality">New York</span>,    <span itemprop="addressRegion">NY</span> <span itemprop="postalCode">10018</span>  </address></div>

Resource Pages:

LocalBusiness (trên Schema.org).
Schema.org examples for location pages (trên Google).

Các site sự kiện

Schema Markup event 


Markup Event có thể được sử dụng cho các trang chuyên tổ chức sự kiện, buổi hòa nhạc, liên hoan nghệ thuật để tạo ra rich snippets.

Huong dan Schema Markup va Structured Data theo tung loai Site 9 ​


Ví dụ (sử dụng JSON-LD)

Mã:
<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/1C004E43C5D25EDC?artistid=1170951&majorcatid=10001&minorcatid=200",  "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":"94107",      "addressCountry":"US"      }   },  "offers" : {    "@type" : "Offer",    "url":"http://www.ticketmaster.com/acdc-san-francisco-california-09-25-2015/event/1C004E43C5D25EDC?artistid=1170951&majorcatid=10001&minorcatid=200"  }}</script>

Google Resource Page: Kích hoạt Rich Snippets cho các sự kiện.

Lưu ý: bạn cũng có thể thúc đẩy các sự kiện trong Knowledge Graph của Google, lấy thêm thông tin ở đây: Danh sách các sự kiện của bạn trong Knowledge Graph.

Các site công thức nấu ăn

Schema Markup Recipe


Các website công thức nấu ăn có thể tận dụng schema markup Recipe để kích hoạt công thức rich snippets.

Huong dan Schema Markup va Structured Data theo tung loai Site 10 ​


Các thuộc tính bắt buộc: thuộc tính bắt buộc chỉ là "name" nhưng Google lưu ý rằng rich-snippets chỉ được hiển thị cho công thức nấu ăn mà bao gồm ít nhất 2 trong số các thuộc tính sau:

- Ít nhất một trong prepTime, cookTime, totalTime hoặc ingredients.
- Image.
- NutritionInformation.
- Review.

Ví dụ (sử dụng microdata)

HTML:
<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/720x405/736203.jpg" alt="Apple Pie by Grandma Ople" title="Apple Pie by Grandma Ople" itemprop="image" />  <h1 itemprop="name">Apple Pie by Grandma Ople</h1>  <div itemprop="description">"This was my grandmother's apple pie recipe.  I have never seen another one quite like it.  It will always be my favorite and has won me several first place prizes in local competitions.  I hope it becomes one of your favorites as well!"</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 9" pie (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>

Google Resource Page: Enabling Rich Snippets for Recipes.

Các site cá nhân

Schema Markup Person 


Markup Person có thể được tận dụng để ảnh hưởng đến kết quả Knowledge Graph về một cá nhân.

Huong dan Schema Markup va Structured Data theo tung loai Site 11 ​


Ví dụ từ BenKirshner.com

HTML:
<div itemscope="" itemtype="http://schema.org/Person">  <meta itemprop="gender" content="Male">  <meta itemprop="birthDate" content="March 21, 1978">  <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="ben@elitesem.com">  <meta itemprop="url" content="http://www.benkirshner.com">  <meta itemprop="memberOf" content="Young President's Organization">  <meta itemprop="memberOf" content="SEMPO">  <meta itemprop="image" content="http://www.benkirshner.com/resources/Ben-Kirshner.jpg">  <span itemprop="name">    <link itemprop="sameAs" href="https://www.wikidata.org/wiki/Q19753495">    <link itemprop="sameAs" href="https://www.freebase.com/m/011n3f_r">    <link itemprop="sameAs" href="https://www.youtube.com/channel/UCIHSn0i6CRIk9Fyby2LZ3yw">    <link itemprop="sameAs" href="https://www.linkedin.com/pub/ben-kirshner/0/799/87">    <link itemprop="sameAs" href="https://twitter.com/benkirshner">    <link itemprop="sameAs" href="https://plus.google.com/+BenKirshner1/">Ben Kirshner</span> is the CEO of Elite SEM Inc. and Coffeeforless.com...</div>

Resource Page: Person (trên Schema.org)

Bạn nên sử dụng nguồn tài nguyên dưới đây để theo dõi và kiểm tra Schema và Structured Data Markup của bạn.

Structured Data Testing Tool.
Structured Data Markup Report trong Google Search Console.

Lưu ý rằng site của bạn có thể nhận được hình phạt nếu bạn không làm theo hướng dẫn của Google đối với Structured Data. 

Nguồn thegioiseo.com

 


Có thể bạn quan tâm
06/10/2015
2069