Add Google Rich Snippets on Product Pages on a Laravel Website

The more data you provide Google about your web pages, the more accurately Google will be able to show your pages to your target audience. Google Rich Snippets are one of the many ways Google makes its search results more and more relevant. Today in this article, we will see how we can add Google Product Snippets to the product pages of a multivendor Laravel eCommerce Website I had recently developed for a client.

Types of Google Rich Snippets

Google provides different types of rich snippets that are relevant to different types of content on the web. In our case, we will be using the Product Snippet.

All the available Google Rich Snippets can be found below:

• Article Snippets
• Event Snippets
• Product Snippets
• Recpie Snippets
• Job Prosting Snippets

Rich Snippets are, in their simplest form, nothing but special tags with relevant data passed to them which all the Search Engines and Social Media platforms recognize.

There are multiple ways to add Rich Snippets to a website however, in our case, we are going to use ld+json way of doing it.

The first step to add Rich Product Snippets on the product page is to go to the view that shows each product’s details.

In our case, the said view is located at \project_root\resources\views\product\show.

This is how the beginning of the file looks, before adding the rich snippet data.

In the image above, as you might already see, we are only checking if the passed object ($product) has any data in it before proceeding.

Now, in order to add Rich Snippets data, we have to add the said block in the correct format and ensure it is populated with the correct data for each data point.

Let’s go ahead and do that.

We will add the Product Rich Snippet somewhere before the closing </head>tag. In our case, we will paste the rich snippet within our meta section of the page. Please note that the format here is very important and should be correct for it to effectively work.

The above picture has some custom code in it that is specific to the website in question. However, for simplicity, I am posting the simple version of the product snippet below:

<script type="application/ld+json">
        {
           "@context": "https://schema.org/",
           "@type": "Product",
           "name": "Product_Name",
           "image": "https://www.yourwebsite.com/your_product_image.jpg",
           "description": "Your _product_description",
           "brand": "Product_Company",
           "sku": "Product_SKU",
           "offers": {
              "@type": "Offer",
              "url": "https://www.yourwebsite.com/your_product_image.jpg",
              "priceCurrency": "INR",
              "price": "Product_Price",
              "priceValidUntil": "2022-04-30",
              "availability": "https://schema.org/InStock",
              "itemCondition": "https://schema.org/NewCondition"
       }
    }
</script>

Paste the above snippet at the right place and populate it with the correct data.

Just to verify that your snippet and code are working fine, validate the data by pasting your product page’s URL on Google’s Rich Result Testing page, here.

If all checks out well, you should see a success page as above.

You might see some warnings but that’s generally because you have not provided some more of the optional data points in your snippet.

If you want to generate a valid snippets for other Rich Text Snippets, this is a great tool – https://technicalseo.com/tools/schema-markup-generator/

That’s it!