Next.js Discord

Discord Forum

How to show product ratings & prices in Google search results using Next.js?

Answered
Giant Angora posted this in #help-forum
Open in Discord
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.
Answered by B33fb0n3
You can set it directly with an script tag like this:
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
View full answer

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.
B33fb0n3
You can set it directly with an script tag like this:
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
B33fb0n3