April 17, 2024
Why add a reviews section to your Webflow food recipe blog?
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.
How can I enable recipe reviews on Webflow?
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👇:
1. Copy and paste a reviews component
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.
2. Adapt the design of the Webflow reviews component
All of Supersparks' components are customizable in the Webflow Designer, so you can redesign them to your liking or remove any unwanted elements.
3. Copy & paste code snippet
Copy & paste the code of the Supersparks app into the <head> tag of your CMS's page settings and click save.
4. Publish your site and test!
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)
5. Manage settings and reviews
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.
How can I create a recipes schema from my Webflow blog?
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.
How can I preview average rating data inside the collection list element?
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
