How to Get Ecommerce Product Snippets to Show up in SERPs

Have you ever searched for a product on Google, only to be presented with a boring list of blue links and text snippets? Compare that with products gleaming atop Google search results, decorated with star ratings, prices, reviews, and images. That’s the power of rich snippets, and they’re not just enticing – they’re a potent recipe for boosting click-through rates, conversions, and even your search ranking.

Implementing structured data markup in your content provides the opportunity to showcase rich product snippets directly in Google search listings. Research shows that rich snippets can boost click-through rates by over 50%, and for ecommerce sites, that translates to more organic traffic and higher conversion potential.

Beyond the UX impact, rich snippets also act as an SEO signal for Google. Pages with rich snippets often outrank competing pages without them. The adoption of snippets is becoming more popular, so brands failing to add them risks losing visibility to competitors in SERPs.

In this article, we’ll cover what rich snippets are, their benefits, how to add schema code to product pages, and how to integrate open graph meta tags for social sharing.

What are Rich Snippets?

Rich snippets are enhancements to the standard blue link look of most search listings. When Google sees the schema markup on a page, it may showcase a more eye-catching preview featuring relevant product attributes like stars, prices, or a review by a customer. Here’s an example of rich snippets from a search for suits in San Francisco:

Instead of just the page title and meta description, you can see pertinent details like the product image, brand name, price, star rating, etc. This extra context helps you determine if it matches your needs without necessarily having to click through—and that’s great for ecommerce SEO because it reduces bounce rates. Google also bumps up the rankings of pages that implement markup, as the enhanced presentation indicates relevancy and attention to quality. 

Rich snippets, like star ratings and reviews, act as social proof for your products, showcasing your brand’s trustworthiness and building user confidence. This can lead to increased brand loyalty and returning customers. They also often translate well to social media platforms, enticing users to share your products with their networks and further amplify your reach and drive organic traffic to your website.

How to Implement Rich Snippets in Structured Data Using Code

Implementing rich snippets in structured data using code involves adding JavaScript Object Notation for Linked Data (JSON-LD) markup to your HTML code. Here’s a step-by-step guide on how to do it:

Step 1: Choosing the Right Snippet

Identify the type of rich snippet you want (e.g., product snippet, recipe snippet, event snippet). Google offers a variety of options suitable for different content types, and these include:

• Product Snippets
• Recipe Snippets
• Job Posting Snippets
• Local Business Snippets
• Article Snippets
• Review Snippets
• Video Snippets

Product snippets are ideal for ecommerce product listings and detail pages. They show the product image, price, star rating, brand, and other details right in search results, helping you stand out and drive conversions.

To add snippets, research the specific data and markup required for each type using Google’s official documentation. For each rich snippet, the right properties are crucial.

Step 2: Create the JSON-LD Markup

You can implement structured data with several methods, including JSON-LD, microdata, and RDFa, but JSON-LD is generally considered the most user-friendly and recommended by Google. You can use tools like Google’s Data Highlighter or online schema generators to create the JSON-LD code for your specific data points. 

Let’s say you want to add a rich snippet for a red t-shirt on your e-commerce website, with the following properties.

Required Properties:

• Name of the product: Red T-Shirt
• Price: $24.99
• Availability: In stock
• Image URL: https://yourwebsite.com/images/red-t-shirt.jpg
• Brand: MyAwesomeBrand
• Rating: 4.5 stars (out of 5)

Here’s what the JSON code will look like:

Here’s a breakdown of each part:

• Context: specifies the context for the structured data, indicating that it follows the schema.org vocabulary.
• Type: indicates the type of structured data, in this case, it’s a product.
• Name: specifies the name of the product.
• Description: provides a description of the product.
• Brand: defines the brand of the product, with a nested object specifying the brand name.
• Offers: describes the offer or price for the product, including the price, currency, and availability.
• Aggregate Rating: represents the aggregate rating of the product, including the rating value and the number of reviews.
• Image: specifies the URL of the product image.

Step 3: Integrate Code into Your Website

Once you’ve generated this code, the next step is integrating it into your e-commerce website. Depending on your platform (e.g., WordPress, Shopify), you can choose the appropriate method to add the code to your product pages. This could involve embedding it directly in <head> section of your product page’s HTML code, using plugins, or leveraging platform-specific tools.

Step 4: Submit and Monitor

Once that is done, you can use Google’s Structured Data Testing Tool or other similar tools to validate your markup. This helps ensure that there are no errors or issues with your structured data, and it gives you confidence that search engines will interpret it correctly. 

After which, you submit your updated URLs to Google Search Console for indexing and use tools like Google Search Console and Rich Results Test to monitor your snippet appearance and track any issues.

Implementing Rich Snippets on Social Media Platforms

While the above method works for Google, it does not have the same effects on social media platforms. When someone shares your product pages on networks like Facebook, LinkedIn, and Twitter, its open graph meta tags control what appears for the link preview rather than the JSON-LD code.

Take this post, for instance:

The shared link preview in the LinkedIn post above shows the relevant page elements – the featured image, title, and domain name. These optimized snippets only appear because the page contains proper Open Graph meta tag markup. Without open graph tags defined, LinkedIn’s crawler would use a less suitable image from the site, an incorrect or suboptimal title, and show more random content for the preview.

To ensure the link was previewed correctly, we used the following markup:

The preview shows how each open graph meta tag seen in the code snippet serves a distinct purpose in optimizing the shared link appearance.  The key open graph metadata needs to be inserted in the HTML head section, allowing platforms like LinkedIn, Facebook, and Twitter to properly interpret and apply them when generating optimized link previews. We talk more about all the tags and what they mean in this article.

Implementing Open Graph meta tags is key to getting much higher click-through rates from social traffic, especially for e-commerce companies who post and advertise on Facebook or Instagram. 

However, if your website is a single-page application (SPA), the Open Graph crawlers of these social media platforms would be unable to perform JS SEO crawling and JS SEO indexing because they can not execute JavaScript. To fix this and get access to the wealth of revenue on these platforms, you need to use Prerender.

Prerender solves this by generating a static snapshot of your fully rendered page for search and social media crawlers. This ensures optimized elements like images, descriptions, and titles display properly when shared on social platforms. 

Without Prerender, JavaScript content would often fail to load rich snippet metadata. Prerender also saves crawl budget through dynamic caching – updated snapshots get created behind the scenes when pages change. The result is seamless social sharing without development overhead, while also achieving website crawl optimization on all platforms.

If you’d like to get all the benefits mentioned above, you can get started with Prerender now and fix all your JavaScript SEO problems.

Conclusion

Implementing structured data markup and open graph tags on product pages provides a clearly effective approach to boost both on-site SEO and social media visibility simultaneously. Beyond benefiting end-users, rich snippets show quality content to search algorithms.

Google itself recommends markup to “make your site stand out in search results.” The increased visibility provides valuable opportunities to reach customers with impressions across multiple high-value keywords.

E-commerce companies need to balance complex and accessible content to provide buyers with insights at every stage while limiting friction. So, adding rich snippets across your product catalog helps establish your store as a reputable authority and also increases visibility and conversions.