Connect with us

WORDPRESS

Your Complete Guide to Review Structured Data in 2024

Published

on

Your Complete Guide to Review Structured Data in 2024

Want to add review schema to your site, but don’t know where to start?

No problem.

Because in this guide, you’ll learn everything you need to know about this underrated, CTR boosting technique for your site.

We’ll cover:

  • What review schema is
  • What it can be used for
  • Best ways to add review schema
  • And more

Keep reading.

Want to add review schema to your WordPress site fast? We recommend using RankMath because it provides an all-in-one solution for SEO and helps you add 20+ schema types quickly and easily to your pages.

Advertisement

What is Review Schema?

Review schema is a type of code you add to your site that instructs Google to show ratings and other stats in your search results.

For example, customer review ratings for a product you sell on your eCommerce site:

Product Review Schema

Or recipe details when searching for something to cook:

Review Schema for RecipesReview Schema for Recipes

This extra information enhances the appearance of your search results, potentially improving click-through rates.

Here’s what the code (also known as Schema Markup) looks like:

<script type="application/ld+json"> 
{ 
 "@context": "http://schema.org", 
 "@type": "Review", 
 "itemReviewed": { 
   "@type": "Product", 
   "name": "Weighted Blanket" 
 }, 
 "author": { 
   "@type": "Person", 
   "name": "John Smith" 
 }, 
 "datePublished": "01-30-2024", 
 "reviewRating": { 
   "@type": "Rating", 
   "ratingValue": "4.5", 
   "bestRating": "5", 
   "worstRating": "1" 
 }, 
 "reviewBody": "I really love this product! Arrived quickly too, thanks!" 
} 
</script>

In the above example, the code lets the search engine know that someone has left a review and a star rating of 4.5.

ratingValue = “4.5”
reviewBody = “I really love this product! Arrived quickly too, thanks!”

Other information includes the product name, name of the reviewer (author), and the publication date.

Advertisement

The code is what instructs Google to show this information in the search result snippet.

What are the Benefits of Review Schema?

Using review schema markup on your site provides search engines with a deeper understanding of your site’s content.

This can help in many ways. One benefit is improving CTR in SEO. This is down to search results standing out more to the searcher, encouraging more people to click through.

Another benefit is it can increase organic traffic due to several factors. These are mainly down to a combination of higher CTR, search rankings visibility, credibility, and improved on-site engagement.

Here are some more advantages of adding review structured data to your site:

  • Provides search engines with more data, adding better context and comprehension of user intent.
  • Enhances the Google search result of product reviews by including things like star ratings, drawing attention, and providing credibility.
  • Increases the potential for higher click-through rates as reviews with star ratings are more noticeable.
  • Improves trust by showing genuine customer feedback in the SERPs.
  • Supports local SEO by highlighting reviews for local businesses.
  • Assists in distinguishing your products or services from competitors.
  • Contributes to more informative rich snippets that can increase engagement and more time on site.

Review Schema Markup vs Structured Data?

Structured data is the general term used to describe additional information about a webpage’s content.

And review schema is a specific type of structured data.

Advertisement
Term   Description  
Structured Data This is the general term that refers to data organized in a structured format.
Schema Markup This is the specific deployment of structured data using a predefined set of schemas, provided by schema.org.
Review Schema Markup This subset of schema markup is specifically used for adding structured data about reviews on a webpage.

Review Schema vs AggregateRating?

There are two types of schema for reviews: Review and AggregateRating.

Review Schema:

  • Review schema is used for individual reviews or ratings of a product or service.
  • It includes properties such as the reviewer’s name, the review’s date, the review text, and the rating the reviewer gives (as in the example shown above).

AggregateRating Schema:

  • AggregateRating schema is used for the overall rating of an item based on multiple reviews.
  • This allows users to see an average product rating and the total number of reviews.

AggregateRating looks like this:

<script type="application/ld+json"> 
{ 
 "@context": "http://schema.org", 
 "@type": "AggregateRating", 
 "itemReviewed": "Car Polish", 
 "ratingValue": 4.5, 
 "reviewCount": 100 
} 
</script>

Review Rich Snippet Content Types

Various content types can be used for review markup. Here’s a brief overview of the most common types and why they’re beneficial.

Books

Book review snippet schema enhances the visibility of book reviews, making them stand out to the user.

Elements you can add for book reviews include the author, review body, review stars, name of the book, and date published.

This can help people search for things like the best audiobooks for business or other genres and find trusted reviews before they buy.

Advertisement

Courses

Course review structured data highlights details about online courses. This can be a course sales page, such as on Udemy, or when a blogger reviews a course.

Course elements include the course name, provider, reviewer, review date, review rating, and more.

This can help learners decide which courses to enroll in. Plus, it will help you enroll more students when selling online courses.

Events

The event review schema provides people with reviews and details about upcoming events, such as retreats or concerts.

Elements that can be used include the event name, location, reviewer name, body, and star rating.

Local Businesses

The local business review schema enhances the visibility of local business reviews in searches and maps.

Advertisement

Elements available for events include business name, location, type of service, reviewer details, rating, and summary.

These types of reviews are great for boosting credibility and helping businesses rank higher in search results and maps.

Movies

Displays movie reviews in the search results, offering quick insights into the quality of the film.

Elements for movie reviews include movie title, director, release date, reviewer’s name, rating, and the review itself.

Products

The product review schema improves the appearance of products in search results, helping searchers find products faster.

Key elements for product reviews include product name, manufacturer, reviewer, review date, rating score, and more.

Advertisement

Product schema markup is crucial for improving conversion rates and building trust with potential buyers.

Recipes

The recipe review schema makes online recipes easier to digest inside the search listing.

Key elements for recipes include the recipe name, author, cuisine type, review author, rating, and more.

This type of review schema helps searchers find recipes that the community or audience of a website has validated.

How to Add Review Schema to Your Site

There are a couple of ways to add schema markup to your site.

The easiest way is through a plugin such as RankMath if you’re using a WordPress site. Another way is by using a schema generator.

Advertisement

Here’s how to do this step-by-step.

Use a review schema WordPress Plugin

The easiest way to add review schema to your site is through the plugin RankMath.

There are two approaches.

One is when writing on a product review blog, and the other is for customer reviews for WooCommerce.

Both methods require some settings to be changed inside the article or product you’re publishing on your site.

Affiliate product reviews:

Advertisement

Click on the RankMath icon in the right sidebar, then the third icon along:

1707897365 76 Your Complete Guide to Review Structured Data in 20241707897365 76 Your Complete Guide to Review Structured Data in 2024

Click the Schema Generate button, and you’ll see a selection of schema properties to choose from, such as courses, books, etc.

1707897365 255 Your Complete Guide to Review Structured Data in 20241707897365 255 Your Complete Guide to Review Structured Data in 2024

Choose the one that best suits the product you’re reviewing. Fill out the details, select where you want the schema box to display on the page, and click save.

1707897365 563 Your Complete Guide to Review Structured Data in 20241707897365 563 Your Complete Guide to Review Structured Data in 2024

For WooCommerce products, the process is easier. Just click the WooCommerce option in the Schema types:

Your Complete Guide to Review Structured Data in 2024Your Complete Guide to Review Structured Data in 2024

Then, the data will be added automatically when you fill out the product details in WooCommerce.

That’s it!

Be sure to check out our RankMath Pro Review for more details.

Use a review schema Generator

A review schema generator allows you to input details about the product being reviewed.

The tool will generate the schema markup that needs to be added to your page’s HTML.

There are many online schema generators available to choose from. Here are a few popular options.

Advertisement

Honey n Jam :

1707897366 703 Your Complete Guide to Review Structured Data in 20241707897366 703 Your Complete Guide to Review Structured Data in 2024

Internet Marketing Ninjas:

1707897366 710 Your Complete Guide to Review Structured Data in 20241707897366 710 Your Complete Guide to Review Structured Data in 2024

Clouty: This one will also let you generate Aggregate Rating schema markup.

1707897366 616 Your Complete Guide to Review Structured Data in 20241707897366 616 Your Complete Guide to Review Structured Data in 2024

Simply choose one of the tools above, enter your data, and click the button to generate the code.

Hire SEO services on Fiverr

There are hundreds of digital marketing services available on Fiverr, and adding Google review schema is one of them.

This will be the best option if you want to save time or want to outsource this technical process.

A quick search on Fiverr shows tons of people who can add review schema to your site and follow Google’s guidelines.

1707897366 713 Your Complete Guide to Review Structured Data in 20241707897366 713 Your Complete Guide to Review Structured Data in 2024

How to Test Review Schema

Adding review schema to your site is only the first step. It’s also important to check the pages you’ve added schema code to to make sure its code is valid.

One way to do this is through the official Schema Markup Validator. Simply head over to the site and enter your URL:

1707897366 543 Your Complete Guide to Review Structured Data in 20241707897366 543 Your Complete Guide to Review Structured Data in 2024

After the scan, it will show the code on one side and any schema properties found on the other:

1707897367 837 Your Complete Guide to Review Structured Data in 20241707897367 837 Your Complete Guide to Review Structured Data in 2024

If there are any errors or warnings, it’ll show up on the card on the right. You can follow the suggestions it gives to fix any syntax issues.

Another tool you can use is the Rich Result Testing Tool by Google. It works similarly to the other tool but with a different user interface.

Advertisement
1707897367 56 Your Complete Guide to Review Structured Data in 20241707897367 56 Your Complete Guide to Review Structured Data in 2024

I find this tool a bit easier to use than the other. It also gives suggestions based on Google’s guidelines.

1707897367 888 Your Complete Guide to Review Structured Data in 20241707897367 888 Your Complete Guide to Review Structured Data in 2024

Review Schema in Conclusion

Adding review schema to your site will help Google understand your content better and display it well in search results.

This has many benefits, such as improved CTR and establishing credibility with Google and search traffic.

If you’re using WordPress, our recommendation is to use RankMath to add review schema. It not only makes the process simple, but it will also improve your site’s SEO altogether.



Source link

Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address

WORDPRESS

10 Amazing WordPress Design Resouces – WordPress.com News

Published

on

By

10 Amazing WordPress Design Resouces – WordPress.com News

Whether you’re a design pro or a total newbie, you’ll find a great tool in this list that will take your website skills to the next level.

Designing a beautiful website from scratch can be difficult for developers of all skill levels. Luckily, in today’s Build and Beyond video, Jamie Marsland reveals his ten favorite WordPress design tools and websites to elevate your next build.

Get inspiration for your next website’s design and then start building with WordPress.com. Ready to get going? Click below to embark on your free trial today:

Here are the sites and resources mentioned in the video:

1713497163 978 10 Amazing WordPress Design Resouces – WordPresscom News

Heikei

Stunning backgrounds and visuals

1713497163 497 10 Amazing WordPress Design Resouces – WordPresscom News
1713497163 315 10 Amazing WordPress Design Resouces – WordPresscom News
1713497163 599 10 Amazing WordPress Design Resouces – WordPresscom News
1713497163 270 10 Amazing WordPress Design Resouces – WordPresscom News

Shots

Easy mockups for products and thumbnails

1713497163 518 10 Amazing WordPress Design Resouces – WordPresscom News
1713497163 631 10 Amazing WordPress Design Resouces – WordPresscom News

Coolors

Generate color palettes with a click

1713497163 689 10 Amazing WordPress Design Resouces – WordPresscom News
1713497163 719 10 Amazing WordPress Design Resouces – WordPresscom News
10 Amazing WordPress Design Resouces – WordPresscom News

Join 110.1M other subscribers

Advertisement

Source link

Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address
Continue Reading

WORDPRESS

[GET] The7 Website And Ecommerce Builder For WordPress

Published

on

By

The7 website and ecommerce builder for wordpress is the most customizable WordPress, Elementor, and WooCommerce theme available on the market up to …

Source link

Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address
Continue Reading

WORDPRESS

Making 43% of the Web More Dynamic with the WordPress Interactivity API – WordPress.com News

Published

on

By

Making 43% of the Web More Dynamic with the WordPress Interactivity API – WordPress.com News

Creating rich, engaging, and interactive website experiences is a simple way to surprise, delight, and attract attention from website readers and users. Dynamic interactivity like instant search, form handling, and client-side “app-like” navigation where elements can persist across routes, all without a full page reload, can make the web a more efficient and interesting place for all.

But creating those experiences on WordPress hasn’t always been the easiest or most straightforward, often requiring complex JavaScript framework setup and maintenance. 

Now, with the Interactivity API, WordPress developers have a standardized way for doing that, all built directly into core. 

The Interactivity API started as an experimental plugin in early 2022, became an official proposal in March 2023, and was finally merged into WordPress core with the release of WordPress 6.5 on April 2, 2024. It provides an easier, standardized way for WordPress developers to create rich, interactive user experiences with their blocks on the front-end.

ELI5: The Interactivity API and the Image Block

Several core WordPress blocks, including the Query Loop, Image, and Search blocks, have already adopted the Interactivity API. The Image block, in particular, is a great way to show off the Interactivity API in action. 

Advertisement

At its core, the Image blocks allow you to add an image to a post or page. When a user clicks on an image in a post or page, the Interactivity API launches a lightbox showing a high-resolution version of the image.

The rendering of the Image block is handled server-side. The client-side interactivity, handling resizing and opening the lightbox, is now done with the new API that comes bundled with WordPress. You can bind the client-side interactivity simply by adding the wp-on--click directive to the image element, referencing the showLightbox action in view.js.

You might say, “But I could easily do this with some JavaScript!” With the Interactivity API, the code is compact and declarative, and you get the context (local state) to handle the lightbox, resizing, side effects, and all of the other needed work here in the store object.

actions: {
			showLightbox() {
				const ctx = getContext();

				// Bails out if the image has not loaded yet.
				if ( ! ctx.imageRef?.complete ) {
					return;
				}

				// Stores the positons of the scroll to fix it until the overlay is
				// closed.
				state.scrollTopReset = document.documentElement.scrollTop;
				state.scrollLeftReset = document.documentElement.scrollLeft;

				// Moves the information of the expaned image to the state.
				ctx.currentSrc = ctx.imageRef.currentSrc;
				imageRef = ctx.imageRef;
				buttonRef = ctx.buttonRef;
				state.currentImage = ctx;
				state.overlayEnabled = true;

				// Computes the styles of the overlay for the animation.
				callbacks.setOverlayStyles();
			},
...

The lower-level implementation details, like keeping the server and client side in sync, just work; developers no longer need to account for them.

This functionality is possible using vanilla JavaScript, by selecting the element via a query selector, reading data attributes, and manipulating the DOM. But it’s far less elegant, and up until now, there hasn’t been a standardized way in WordPress of handling interactive events like these.

With the Interactivity API, developers have a predictable way to provide interactivity to users on the front-end. You don’t have to worry about lower-level code for adding interactivity; it’s there in WordPress for you to start using today. Batteries are included.

Advertisement

How is the Interactivity API different from Alpine, React, or Vue?

Prior to merging the Interactivity API into WordPress core, developers would typically reach for a JavaScript framework to add dynamic features to the user-facing parts of their websites. This approach worked just fine, so why was there a need to standardize it?

At its core, the Interactivity API is a lightweight JavaScript library that standardizes the way developers can build interactive HTML elements on WordPress sites.

Mario Santos, a developer on the WordPress core team, wrote in the Interactivity API proposal that, “With a standard, WordPress can absorb the maximum amount of complexity from the developer because it will handle most of what’s needed to create an interactive block.”

The team saw that the gap between what’s possible and what’s practical grew as sites became more complex. The more complex a user experience developers wanted to build, the more blocks needed to interact with each other, and the more difficult it became to build and maintain sites. Developers would spend a lot of time making sure that the client-side and server-side code played nicely together.

For a large open-source project with several contributors, having an agreed-upon standard and native way of providing client-side interactivity speeds up development and greatly improves the developer experience.

Five goals shaped the core development team’s decisions as they built the API: 

Advertisement
  1. Block-first and PHP-first: Prioritizing blocks for building sites and server side rendering for better SEO and performance. Combining the best for user and developer experience.
  2. Backward-compatible: Ensuring compatibility with both classic and block themes and optionally with other JavaScript frameworks, though it’s advised to use the API as the primary method. It also works with hooks and internationalization.
  3. Declarative and reactive: Using declarative code to define interactions, listening for changes in data, and updating only relevant parts of the DOM accordingly.
  4. Performant: Optimizing runtime performance to deliver a fast and lightweight user experience.
  5. Send less JavaScript: Reduce the overall amount of JavaScript being sent on the page by providing a common framework that blocks can reuse.  So the more that blocks leverage the Interactivity API, the less JavaScript will be sent overall.

Other goals are on the horizon, including improvements to client-side navigation, as you can see in this PR.

Interactivity API vs. Alpine

The Interactivity API shares a few similarities to Alpine—a lightweight JavaScript library that allows developers to build interactions into their web projects, often used in WordPress and Laravel projects.

Similar to Alpine, the Interactivity API uses directives directly in HTML and both play nicely with PHP. Unlike Alpine, the Interactivity API is designed to seamlessly integrate with WordPress and support server-side rendering of its directives.

With the interactivity API, you can easily generate the view from the server in PHP, and then add client-side interactivity. This results in less duplication, and its support in WordPress core will lead to less architectural decisions currently required by developers. 

So while Alpine and the Interactivity API share a broadly similar goal—making it easy for web developers to add interactive elements to a webpage—the Interactivity API is even more plug-and-play for WordPress developers.

Interactivity API vs. React and Vue

Many developers have opted for React when adding interactivity to WordPress sites because, in the modern web development stack, React is the go-to solution for declaratively handling DOM interactivity. This is familiar territory, and we’re used to using React and JSX when adding custom blocks for Gutenberg.

Loading React on the client side can be done, but it leaves you with many decisions: “How should I handle routing? How do I work with the context between PHP and React? What about server-side rendering?”

Advertisement

Part of the goal in developing the Interactivity API was the need to write as little as little JavaScript as possible, leaving the heavy lifting to PHP, and only shipping JavaScript when necessary.

The core team also saw issues with how these frameworks worked in conjunction with WordPress. Developers can use JavaScript frameworks like React and Vue to render a block on the front-end that they server-rendered in PHP, for example, but this requires logic duplication and risks exposure to issues with WordPress hooks.

For these reasons, among others, the core team preferred Preact—a smaller UI framework that requires less JavaScript to download and execute without sacrificing performance. Think of it like React with fewer calories.

Luis Herranz, a WordPress Core contributor from Automattic, outlines more details on Alpine vs the Interactivity API’s usage of Preact with a thin layer of directives on top of it in this comment on the original proposal.

Preact only loads if the page source contains an interactive block, meaning it is not loaded until it’s needed, aligning with the idea of shipping as little JavaScript as possible (and shipping no JavaScript as a default).

In the original Interactivity API proposal, you can see the run-down and comparison of several frameworks and why Preact was chosen over the others.

Advertisement

What does the new Interactivity API provide to WordPress developers?

In addition to providing a standardized way to render interactive elements client-side, the Interactivity API also provides developers with directives and a more straightforward way of creating a store object to handle state, side effects, and actions.

Graphic from Proposal: The Interactivity API – A better developer experience in building interactive blocks on WordPress.org

Directives

Directives, a special set of data attributes, allow you to extend HTML markup. You can share data between the server-side-rendered blocks and the client-side, bind values, add click events, and much more. The Interactivity API reference lists all the available directives.

These directives are typically added in the block’s render.php file, and they support all of the WordPress APIs, including actions, filters, and core translation APIs. 

Here’s the render file of a sample block. Notice the click event (data-wp-on--click="actions.toggle"), and how we bind the value of the aria-expanded attributes via directives.

<div
	<?php echo get_block_wrapper_attributes(); ?>
	data-wp-interactive="create-block"
	<?php echo wp_interactivity_data_wp_context( array( 'isOpen' => false ) ); ?>
	data-wp-watch="callbacks.logIsOpen"
>
	<button
		data-wp-on--click="actions.toggle"
		data-wp-bind--aria-expanded="context.isOpen"
		aria-controls="<?php echo esc_attr( $unique_id ); ?>"
	>
		<?php esc_html_e( 'Toggle', 'my-interactive-block' ); ?>
	</button>

	<p
		id="<?php echo esc_attr( $unique_id ); ?>"
		data-wp-bind--hidden="!context.isOpen"
	>
		<?php
			esc_html_e( 'My Interactive Block - hello from an interactive block!', 'my-interactive-block' );
		?>
	</p>
</div>

Do you need to dynamically update an element’s inner text? The Interactivity API allows you to use data-wp-text on an element, just like you can use v-text in Vue.

You can bind a value to a boolean or string using wp-bind– or hook up a click event by using data-wp-on–click on the element. This means you can write PHP and HTML and sprinkle in directives to add interactivity in a declarative way.

Advertisement

Handling state, side effects, and actions

The second stage of adding interactivity is to create a store, which is usually done in your view.js file. In the store, you’ll have access to the same context as in your render.php file.

In the store object, you define actions responding to user interactions. These actions can update the local context or global state, which then re-renders and updates the connected HTML element. You can also define side effects/callbacks, which are similar to actions, but they respond to state changes instead of direct user actions.

import { store, getContext } from '@wordpress/interactivity';

store( 'create-block', {
	actions: {
		toggle: () => {
			const context = getContext();
			context.isOpen = ! context.isOpen;
		},
	},
	callbacks: {
		logIsOpen: () => {
			const { isOpen } = getContext();
			// Log the value of `isOpen` each time it changes.
			console.log( `Is open: ${ isOpen }` );
		},
	},
} );

Try it out for yourself

The Interactivity API is production-ready and already running on WordPress.com! With any WordPress.com plan, you’ll have access to the core blocks built on top of the Interactivity API. 

If you want to build your own interactive blocks, you can scaffold an interactive block by running the below code in your terminal:

npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template 

This will give you an example interactive block, with directives and state handling set up. 

You can then play around with this locally, using wp-env, using a staging site, or by uploading the plugin directly to your site running a plugin-eligible WordPress.com plan

Advertisement

If you want a seamless experience between your local dev setup and your WordPress.com site, try using it with our new GitHub Deployments feature! Developing custom blocks is the perfect use case for this new tool.

The best way to learn something new is to start building. To kick things off, you may find the following resources a good starting point:


Join 106.9M other subscribers

Source link

Advertisement
Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address
Continue Reading

Trending

Follow by Email
RSS