Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rich snippets make easier search engine to read your web page by Sameera Thilakasiri

Rich snippets make easier search engine to read your web page by Sameera Thilakasiri

Rich snippets are search results that have been enhanced using structured data from your webpages. This feature has been launched for shopping sites, and the new format shows price, availability, and product reviews on pages offering a product for sale. Right now, shopping rich snippets appear on search results pages supported on a global scale.

Sameera Thilakasiri

February 04, 2013
Tweet

More Decks by Sameera Thilakasiri

Other Decks in Technology

Transcript

  1. Secrets of Rich Snippets for SEO Rich snippets make easier

    search engine to read your web page by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 1
  2. Introduction Rich snippets are search results that have been enhanced

    using structured data from your webpages. This feature has been launched for shopping sites, and the new format shows price, availability, and product reviews on pages offering a product for sale. Right now, shopping rich snippets appear on search results pages supported on a global scale. Rich snippets help you to: • Attract potential buyers while they are searching for items to buy on Google. • Submit your product listings for free. • Control your product information. You can maintain the accuracy and freshness of your 2 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
  3. This article provides examples The following HTML code describes an

    ACME-brand anvil, attractively priced at $119.99 and sold by the online retailer Executive Objects. ACME Executive Anvil <img src="anvil_executive.jpg"/> Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height. Category: Anvils Product #: 925872 Average rating: 4.4, based on 89 reviews Regular price: $179.99 Sale: $119.99 (Sale ends 5 November!) Available from: Executive Objects Condition: Previously owned, in excellent condition In stock! Order now! 3 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
  4. How it works Here is the same content, marked up

    with Product and Offer properties. The example consists of a Product (the ACME Executive Anvil) with a nested Offer. If you prefer, you could instead create an Offer with a nested Product. <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="description">Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height. </span> Category: <span itemprop="category" content="Hardware > Tools > Anvils">Anvils</span> Product #: <span itemprop="identifier" content="mpn:925872"> 925872</span> <span itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate"> <span itemprop="rating">4.4</span> stars, based on <span itemprop="count">89 </span> reviews </span> <span itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer"> Regular price: $179.99 <meta itemprop="currency" content="USD" /> $<span itemprop="price">119.99</span> (Sale ends <time itemprop="priceValidUntil" datetime="2020-11-05"> 5 November!</time>) Available from: <span itemprop="seller">Executive Objects</span> Condition: <span itemprop="condition" content="used">Previously owned, in excellent condition</span> <span itemprop="availability" content="in_stock">In stock! Order now!</span> </span> </div> 4 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
  5. Here's how this example works. • On the first line,

    <itemscope itemtype="http://data- vocabulary.org/Product">indicates that the HTML enclosed in the <div> represents a Product. itemscope indicates that the content of the <div> describes an item, and itemtype="http://data- vocabulary.org/Product" indicates that the item is a Product. • The sample describes properties of the Product, such as its name, brand, and price. To label product properties, each element containing one of these properties (such as <div> or <span>) is assigned anitemprop attribute indicating a property. For example, <span itemprop="brand">. • The sample also includes a nested Review-aggregate itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review- aggregate") and a nested Offer (itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer"), which describes specific information including the price, condition, and availability. 5 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
  6. Product identifiers Specify both type (for example, SKU or MPN)

    and value in the content attribute, separated by a colon, like this: <span itemprop="identifier" content="mpn:12345-6789"> The manufacturer's part number is 12345-6789</span> 6 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
  7. Non-visible text In general, Google will use only marked-up data

    that is visible to the user. Hidden data will be ignored. However, in a few circumstances, it can be useful to provide both a machine-readable and a human-readable version of your content. For example, while the text string "Elvis's birthday" is significant to a great many human readers, it's not as meaningful to search engines as 1935- 01-08. Similarly, human readers can infer the meaning of the $ symbol, but it can be useful to specifically tell search engines whether your prices are in pesos or dollars. 7 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
  8. Google recognizes Google recognizes specific machine-readable values for the following

    Product tags: • category • priceValidUntil • currency • price • identifier • condition The following example describes the condition of an item, providing Google with the machine-readable valueused while displaying a text equivalent (Previously owned but in excellent condition) to the human reader. 8 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
  9. <span itemprop="condition" content="used">Previously owned but in excellent condition</span> Use the

    meta tag to specify content that is not visible on the page in any way. For example, to indicate to Google that your price is in USD, do this: <meta itemprop="currency" content="USD" /> For dates and times, specify the date in ISO date format in the time element, like this: <time itemprop="priceValidUntil" datetime="2020-11-05">5 November 2020</time> 9 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
  10. Google also announced that Google’s Rich Snippets Testing Tool has

    also been updated to support HTML input. “We heard from many users that they wanted to be able to test their HTML source without having to publish it to a web page,” he says. Google rich snippets testing tool 10 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
  11. Author Sameera Thilakasiri is a website designer based in Colombo.

    Specialist in UI,UX, SEO, IA, IxD, RWD. He is blogging technical areas while is leisure. He canbe reached by http://www.sameerast.com 11 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast