Rich snippets

• Šta je Rich snippet i čemu služi? Rich snippet je skup tagova koji se koriste sa ciljem da se na najprecizniji način pretraživačima objasni šta se to zapravo na Vašem sajtu nalazi. Konkretno, u sadržaj web sajta dodaju se mikropodaci koji na prirodan način preciziraju i detaljnije objašnjavaju vrstu sadržaja sajta.
• Šta dobijamo korišćenjem Rich snippet tagova? Kada korisnici otkucaju svoj upit na pretraživač oni ne vole da gube vreme, a Rich snippet im vizuelno govori da će na Vašem sajtu naći baš ono što traže. Kako to vizuelno? Kad korisnik vidi listu rezultata na pretraživaču i potencijano njemu "zanimljive" sajtove, Vaš sajt će se razlikovati od ostalih sajtova na listi koji nemaju rich snippet. Ta razlika može biti u dodatnom tekstu, linkovima ili slikama.

Primeri i tipovi rich snippets-a

Rich snippets - Breadcrumbs

tipovi rich snippets-a

Rich snippets - Breadcrumbs
Primer koda:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">Dresses</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">Real Dresses</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    <span itemprop="title">Real Green Dresses</span>
  </a>
</div>

Rich snippets - Events

Rich snippets

Rich snippets - Events
Primer koda

<div itemscope itemtype="http://data-vocabulary.org/Event">
  ​<a href="http://www.example.com/events/spinaltap" itemprop="url" >
    <span itemprop="summary">Spinal Tap</span>
  </a>
   <img itemprop="photo" src="spinal_tap.jpg" />

  <span itemprop="description">After their highly-publicized search for a new drummer,
   Spinal Tap kicks off their latest comeback tour with a San
   Francisco show.</span>

  When:
  <time itemprop="startDate" datetime="2015-10-15T19:00-08:00">Oct 15, 7:00PM</time>—
  <time itemprop="endDate" datetime="2015-10-15T19:00-08:00">Oct 15, 9:00PM</time>

  Where:
  ​<span itemprop="location" itemscope itemtype="http://data-vocabulary.org/​Organization">
     ​<span itemprop="name">Warfield Theatre</span>
     ​<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
         <span itemprop="street-address">982 Market St</span>, 
         <span itemprop="locality">San Francisco</span>, 
         <span itemprop="region">CA</span>
     </span>
     <span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/​Geo">
        <meta itemprop="latitude" content="37.774929" />
        <meta itemprop="longitude" content="-122.419416" />
     </span>
  </span>

  Category: <span itemprop="eventType">Concert</span>
  <span itemprop="ticketAggregate" itemscope itemtype="http://data-vocabulary.org/Offer-aggregate"> 
    Tickets from $<span itemprop="lowPrice">10.00</span>-$<span itemprop="highPrice">11.00</span>
    <span itemprop="currency" content="USD" /> 
    <span itemprop="offerCount">2,000</span> tickets available
    <a href="http://www.example.com/events/spinaltap/alltickets" itemprop="offerurl">
      http://google.com/ticket</span>See all available tickets</a>
  </span>
  <span itemprop="tickets" itemscope itemtype="http://data-vocabulary.org/Offer"> 
    <a href="http://www.example.com/events/spinaltap/presale" itemprop="offerurl">Presale tickets</a> 
    <span itemprop="price">$10</span><span itemprop="currency" content="USD" /> 
      till <time itemprop="priceValidUntil" datetime="2015-11-10">10 November 2015</time> 
      (<span itemprop="quantity">1000</span> available)  
  </span> 
  <span itemprop="tickets" itemscope itemtype="http://data-vocabulary.org/Offer"> 
    <a href="http://www.example.com/events/spinaltap/tickets" itemprop="offerurl">Full-price tickets</a> 
    <span itemprop="price">$11</span><span itemprop="currency" content="USD" /> 
  </span>
</div>

Rich snippets - Products

Products example

Rich snippets - Products
Primer koda:

<div itemscope itemtype="http://data-vocabulary.org/Product">
 <span itemprop="brand">ACME</span> <span itemprop="name">Executive Anvil</span>
 <img itemprop="image" src="anvil_executive.jpg" />

 <span itemprop="review" itemscope
    itemtype="http://data-vocabulary.org/Review-aggregate">
  Average rating: <span itemprop="rating">4.4</span>, based on
  <span itemprop="count">89</span> reviews
 </span>

 <span itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer-aggregate">
  from $<span itemprop="lowPrice">119.99</span> to 
  $<span itemprop="highPrice">199.99</span>
  <meta itemprop="currency" content="USD" />
 </span>
</div>

Rich snippets - Recipes

recipe rich snippet example

Rich snippets - Recipes
Primer koda

<div class="hrecipe">
   <span class="item">
      <h1 class="fn">Grandma's Holiday Apple Pie</h1>
   </span>
   <img src="apple-pie.jpg" class="photo" />
   By <span class="author">Carol Smith</span>
   Published: <span class="published"> November 5, 2009<span class="value-title" title="2009-11-05"></span></span>
   <span class="summary">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</span>
   <span class="review hreview-aggregate">
      <span class="rating">
         <span class="average">4.0</span> stars based on
         <span class="count">35</span> reviews
      </span> 
   </span>
   Prep time: <span class="preptime">30 min <span class="value-title" title="PT30M"></span></span>
   Cook time: <span class="cooktime">1 hour<span class="value-title" title="PT1H"></span></span>   
   Total time: <span class="duration">1 hour 30 min <span class="value-title" title="PT1H30M"></span></span>
   Yield: <span class="yield">1 9" pie (8 servings)</span>
   <span class="nutrition">
      Serving size: <span class="servingsize">1 medium slice</span>
      Calories per serving: <span class="calories">250</span>
      Fat per serving: <span class="fat">12g</span>
   </span>   
   
   Ingredients:
   <span class="ingredient">
      Thinly-sliced <span class="name">apples</span>:
      <span class="amount">6 cups</span> 
   </span>
   <span class="ingredient">
      <span class="name">White sugar</span>:
      <span class="amount">3/4 cup</span> 
   </span>   

   Directions:
   <span class="instructions">
   1. Cut and peel apples
   2. Mix sugar and cinnamon. Use additional sugar for tart apples.
   ...   
   </span>
</div>

Rich snippets - Review + ratings

Rich Snippets Reviews example

Rich snippets - Review + ratings
Primer koda:

<div>
  <div itemscope itemtype="http://data-vocabulary.org/Review">
    <span itemprop="itemreviewed">L’Amourita Pizza</span>
    Reviewed by <span itemprop="reviewer">Ulysses Grant</span> on
    <time itemprop="dtreviewed" datetime="2009-01-06">Jan 6</time>.
    <span itemprop="summary">Delicious, tasty pizza in Eastlake!</span>
    <span itemprop="description">L'Amourita serves up traditional wood-fired Neapolitan-style pizza, 
      brought to your table promptly and without fuss. An ideal neighborhood pizza joint.</span>
    Rating: <span itemprop="rating">4.5</span>
  </div>
</div>

Rich snippets - Software applications

Rich snippets Software applications - example

Rich snippets - Software applications
Primer koda

<div itemscope itemtype="http://schema.org/SoftwareApplication">

<img itemprop="image" src="https://ssl.gstatic.com/android/market/com.zeptolab.ctr.paid/hi-124-11" />
<span itemprop="name">Angry Birds</span> -
<div itemprop="author" itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://zeptolab.com"><span itemprop="name">Zeptolab</span></a>
</div>

<span itemprop="description">Cut the Rope, catch a star, and feed Om Nom candy in this award-winning game!
The long-awaited hit game has finally arrived at Android!
</span>

CONTENT RATING: <span itemprop="contentRating">Low Maturity</span>
UPDATED: <time itemprop="datePublished" datetime="2011-06-30">June 30, 2011</time>
REQUIRES <span itemprop="operatingSystems">ANDROID</span>: <span itemprop="operatingSystemVersion">1.6</span> 
and up
<link itemprop="SoftwareApplicationCategory" href="http://schema.org/GameApplication"/>
CATEGORY: <span itemprop="SoftwareApplicationSubCategory">Brain & Puzzle</span>
SIZE: 14M
<meta itemprop="fileSize" content="14680064"/>
INSTALLS: <meta itemprop="interactionCount" content=”UserDownloads:100000"/>100,000 - 500,000

RATING:
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
 <span itemprop="ratingValue">4.6</span>(
 <span itemprop="ratingCount">8864</span>)
 <meta itemprop="reviewCount" content="3317" />
</div>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
 Price: <span itemprop="price">$1.00</span>
 <meta itemprop="priceCurrency" content="USD" />
 <link itemprop="availability" href="http://schema.org/InStock" />INSTALL
</div>


Reviews:

<div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
 <span itemprop="reviewRating">3</span> stars -
 <b>"<span itemprop="name">A masterpiece</span>" </b>
 by <span itemprop="author">Winston</span>,
 Written on <time itemprop="publishDate" datetime="2011-07-13">July 13, 2011</time>
 <span itemprop="reviewBody">Finally this amazing game has come to Android! 
Outstanding game and very cheap for how awesome it is. </span>
</div>

<div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
 <span itemprop="reviewRating">5</span> stars -
 <b>"<span itemprop="name">Love this game!</span>" </b>

 by <span itemprop="author">Winston</span>,
 Written on <time itemprop="publishDate" datetime="2011-08-22">August 22, 2011</time>
 <span itemprop="reviewBody">I have three starred every box in this game cuz 
I can't get enough of it. !</span></div>
…


THIS APPLICATION HAS ACCESS TO THE FOLLOWING:
<span itemprop="permissions">YOUR LOCATION. COARSE (NETWORK-BASED) LOCATION
Access coarse location sources such as the cellular network database to determine an approximate 
device location, where available. Malicious applications can use this to determine approximately where you are.</span>
<span itemprop="permissions">NETWORK COMMUNICATION
FULL INTERNET ACCESS
Allows an application to create network sockets.
</span>
<span itemprop="permissions">PHONE CALLS
READ PHONE STATE AND IDENTITY
Allows the application to access the phone features of the device. An application with this permission 
can determine the phone number 
and serial number of this phone, whether a call is active, the number that call is connected to and the like.
</span>

</div>

Ostali tipovi rich snippeta

• Rich snippets - Organizations
• Rich snippets - Music
• Rich snippets - People
• Rich snippets - Videos

Ostale informacije

• I posle urađenog i testiranog Rich snippet-a preko Google test strane, niko ne može da Vam garantuje da ce se Vaš Rich snipet pojaviti na pretraživačima. To zavisi isključivo od pretraživača.
• Vreme koje je obično potrebno da se tagovi (Rich snippets) sa Vaše strane pojave na pretraživačima je u proseku od 1 do 2 meseca.