Are you wondering why your product pages don't stand out in search results like those from Amazon (shown below) or other competing e-commerce websites? These expanded results are commonly known as Rich Snippets (as named by Google) and are the result of having your HTML structured correctly with semantic markup. Whether you’re savvy to HTML5 and the latest design trends, or you haven’t updated your website code in years, this is article will explain why it’s important you structure your data properly utilizing semantic standards.
There are a number of ways to structure your data to make it more relevant to search engines, as well as social media sites. As an e-commerce retailer it is important to understand which of these standards you should consider including in your website. You should take some time to ensure you are implementing semantic markup, and doing it correctly. It has the power to better inform potential customers with upfront knowledge prior to landing on your site. Customers can see product reviews, pricing and stock information, and even images before clicking through to your website. This can lead to increased click-through rates, improve conversions, and generally enhance your SEO objectives.
RDFa, Microformats, and the Evolution of Microdata
What are these semantic formatting methods? A couple years back, in May 2009, Google introduced its Rich Snippets initiative, which formally supported both the hProduct microformat and RDFa markup. Later in July 2009, Yahoo! announced a Product schema based on RDFa standards.
The main problem with microformats is that they have been “in the works” for many years without solid adoption. This is likely due to the fact that they emerged as part of a grassroots movement. Many seem to be indefinitely in “draft” format, with no clear end timeline, including the hProduct specification. As for RDFa, it is very robust, but it also can become very complex. I'll come back to RDFa.
With the evolution of HTML5 and the need for leadership in semantic markups, Google in a joint effort with other major search engines, stepped forward to form schema.org. Again you can learn more details directly from their website, but here is a small blurb from the schema.org FAQ:
“Instead of having webmasters decide between competing formats, we’ve decided to focus on just one format for schema.org. In addition, a single format will improve consistency across search engines relying on the data. There are arguments to be made for preferring any of the existing standards, but we’ve found that microdata strike a balance between the extensibility of RDFa and the simplicity of microformats, so this is the format that we’ve gone with.”
Now back to RDFa. Recently a light-weight version of RDFa, called RDFa Lite, has been proposed and is in the works. RDFa Lite is a small subset consisting of only a few attributes which may be applied to most simple markup scenarios. Note that schema.org generally conforms to RDFa 1.1 and has announced support for the Lite markup. Some early examples have been posted, and more details are likely to come this summer.
What about Facebook's Open Graph?
The first version of Facebook’s Open Graph is a very limited subset of semantic markup, based on RDFa, which works well to structure a limited amount of product information. Beyond that it really wasn’t meant to contain a lot of structured product data. It doesn’t include important information like price or sale price, and can’t take into account cases where multiple offers are on the same page.
With the launch of the second version Open Graph, Facebook has expanded their vocabulary for common types such as Music, Movies, and Books. At this point there has been no formal expansion for the Product type. However, V2 of Open Graph allows for webmasters to define their own namespace and data structures.
Which Should I Choose?
Which markup you choose is entirely up to you or your webmaster. Generally the decision should be based on how much complex product data you wish to include inside your markup. Open Graph is simple to implement, but limited in the amount of data you can include, while RDFa is complex but allows for essentially any amount of data using vocabulary sets.
If you are wondering which type is currently being used the most, I've done a bit of research on the topic. Blekko, a relatively new search engine, has a really neat tool called GREP the Web. It allows anyone to submit text-based queries on small phrases contained within the HTML of a webpage against a large sample of the web. With the help of Blekko CTO Greg Lindahl, I was able to create a basic GREP search to determine which e-commerce product structure formats are most commonly found on the web. I compared Microdata, Microformats, and Open Graph, and the results were quite interesting. The result set showcases that websites with product types have integrated Facebook Open Graph over 4x more than Microformats, and about 7.5x as many as Schema.org’s Microdata.
This isn’t too shocking, as main-stream Microdata formatting is still very new, and Facebook is by far the simplest of semantic methods to implement. Facebook also has the most upfront benefit, which is why it far surpasses others in adoption. It requires no changes to the core HTML code (just the within the <head> tag), and immediately will help improve results from “Like” clicks.
Whichever format you choose, note that it is good practice to only use one type of semantic formatting to structure your product data. It will confuse the search engine if you use multiple markups, and won’t end up helping you. Here is a look at the HTML code on an REI product page:
As you can see both microformats (hProduct) and microdata (schema.org) are used within the same entry. Don't do that! The result of the snippet tester will look like this:
That being said, there is no downside to implementing Facebook Open Graph on your product pages in conjunction with other semantic markup. RedBubble is one example of a major e-tailer that currently implements both schema.org and Open Graph.
Getting Started and Helpful Tools
At this point I haven't mentioned another major role-player in e-commerce semantics, GoodRelations. As the SemanticWeb wiki states "GoodRelations is a lightweight ontology for annotating offerings and other aspects of e-commerce on the Web." Essentially it will allow for additional product details to be encoded in your HTML, and can potentially future-proof your website for next generation e-commerce focused search engines. GoodRelations can be used standalone, based on RDFa standards, or to complement existing Microdata implementations. It has been used by some major e-commerce sites like BestBuy and Sears, as well as various other sites around the web. Check their Quickstart page for more information.
If you are starting from scratch, research which e-commerce platforms include, or have extension modules for, automatically adding semantic markup to your site. GoodRelations provides a list of all platforms that support their vocabulary including Magento, PrestaShop, and other popular platforms.
If you've already got a website running, check out what data Google can extract from your product pages using Google’s Rich Snippets Testing Tool. You should also add simple Open Graph tags if you haven't done so. Implementing Open Graph tags in your website can be accomplished by following this tutorial on the Facebook Developers site.
When Google first announced rich snippets back in 2009, it had RDFa and microformats in mind. In my opinion, the search engines are most likely to phase out support for Microformats over time, and continue progressing with Microdata and derivatives of RDFa 1.1+.
Utilizing schema.org or following other semantic markup procedures can be very beneficial to your SEO initiatives. Some equate SEO to search rankings only. This is very far from the truth. Other factors are also very important, such as click-through ratio and quality of traffic. The richer your results appear within search engines, the more likely a user can make an educated decision about their interest level in your listing. Generally speaking, you can expect to get higher-click through (30% reported here) and higher-conversion ratios by simply enhancing your markup!