.svg){kind=small}
Create your own custom designed reviews section on your recipe blog. Improve SEO by indexing your recipes with average rating data via a schema.
Adding reviews to your recipe blog is a powerful method for improving SEO, as it unlocks the ability to feature average rating data with your recipe's search results via a Schema markup. The social proof from showing ratings on your recipe's Google results via a Schema (like the below examples) can improve the chances of a user clicking on your recipe over others. Especially if your recipe is rated the best 😋. And this is just the beginning of the SEO and audience engagement benefits reviews can bring to your Webflow sites.
So if you are thinking of building your own recipe blog or migrating an existing one from Wordpress, now is a great time to build this with Webflow because of the following reviews solution.
The tool we are going to use in this tutorial is Supersparks, which can enable reviews on your food recipe blog in 2 minutes and is 100% no-code. After signing up, you can get started with the installation by doing the following👇:
Copy a component of your choosing and paste it into the CMS collection page of your recipe blog. We recommend the 'Recipe' component for this use case, which comes pre-installed with nested replies.
All of Supersparks' components are customizable in the Webflow Designer, so you can redesign them to your liking or remove any unwanted elements.
Copy & paste the code of the Supersparks app into the <head> tag of your CMS's page settings and click save.
Once your site is published, visitors will now be able to write and leave reviews for recipes on your website. Reviews and average ratings will then be unique to each recipe's page.
.webp)
Once your reviews section is live, you can can view, approve, and delete reviews from the Supersparks dashboard.
There are also multiple settings that can be custom configured for your reviews section. One we recommend is memberships, which allows you to automatically connect registered user data (from Webflow or Memberstack) with reviews. So if a logged in user leaves a review, data like name, username, and profile image automatically gets displayed with their reviews.
Once you've set up your reviews section in the previous steps, you can sync the average rating & total reviews data required for a Schema into your CMS collection via Supersparks. After creating fields for the average rating & total reviews in your CMS collection, go to Supersparks to switch on the setting and connect your Webflow CMS collections and fields. Once configured, data will automatically sync into & publish your CMS items whenever a new review is added.
You can then get started creating a custom Schema. There are many ways to customize a markup schema, but as a starting point, we suggest pasting the Recipe On Search JSON-LD provided by Google into the body of your page CMS page's settings. Using the 'add field' function, connect CMS fields to relevant pieces of data in the schema, such as name, images, and ingredients. The average rating and total reviews data should be added in the aggregateRating section like in the below example. After publishing, Webflow will create a schema for each recipe by dynamically pulling in the relevant field data for each CMS item.
Now that average rating and total reviews data is being synced, you can show this data inside Webflow's collection list element, so users can see the rating of each recipe before clicking on them. Below is an example of this for a movie reviews site.
---
Thanks for reading. If you have any questions, get in touch with us at hello@supersparks.io
Create a custom-designed comments & reviews sections in the Webflow Designer. 2 minute installation!
Get started for freeSign up to get a 7 day free trial on this app. No credit card required!
Get Started For Free