How to show product ratings & prices in Google search results using Next.js?
Answered
Giant Angora posted this in #help-forum
Giant AngoraOP
I'm working on an eCommerce site in Next.js and want to display product ratings and prices in Google search results (rich snippets).
I know this requires structured data (JSON-LD), but I'm unsure how to properly implement it in Next.js for SEO.
I know this requires structured data (JSON-LD), but I'm unsure how to properly implement it in Next.js for SEO.
Answered by B33fb0n3
You can set it directly with an script tag like this:
Keep in mind, that google still decides, what to show. What you doing here is just a suggestion for google.
Btw, you can test your rich search text here: https://search.google.com/test/rich-results
export default async function Page({ params }) {
const product = await getProduct((await params).id)
const jsonLd = {
'@context': 'https://schema.org',
'@type': 'Product',
name: product.name,
image: product.image,
description: product.description,
}
return (
<section>
{/* Add JSON-LD to your page */}
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
{/* ... */}
</section>
)
}
Keep in mind, that google still decides, what to show. What you doing here is just a suggestion for google.
Btw, you can test your rich search text here: https://search.google.com/test/rich-results
2 Replies
@Giant Angora I'm working on an eCommerce site in Next.js and want to display product ratings and prices in Google search results (rich snippets).
I know this requires structured data (JSON-LD), but I'm unsure how to properly implement it in Next.js for SEO.
You can set it directly with an script tag like this:
Keep in mind, that google still decides, what to show. What you doing here is just a suggestion for google.
Btw, you can test your rich search text here: https://search.google.com/test/rich-results
export default async function Page({ params }) {
const product = await getProduct((await params).id)
const jsonLd = {
'@context': 'https://schema.org',
'@type': 'Product',
name: product.name,
image: product.image,
description: product.description,
}
return (
<section>
{/* Add JSON-LD to your page */}
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
{/* ... */}
</section>
)
}
Keep in mind, that google still decides, what to show. What you doing here is just a suggestion for google.
Btw, you can test your rich search text here: https://search.google.com/test/rich-results
Answer