|
| 1 | +--- |
| 2 | +title: How to implement JSON-LD in your Next.js application |
| 3 | +nav_title: JSON-LD |
| 4 | +description: Learn how to add JSON-LD to your Next.js application to describe your content to search engines and AI. |
| 5 | +--- |
| 6 | + |
| 7 | +[JSON-LD](https://json-ld.org/) is a format for structured data that can be used by search engines and AI to to help them understand the structure of the page beyond pure content. For example, you can use it to describe a person, an event, an organization, a movie, a book, a recipe, and many other types of entities. |
| 8 | + |
| 9 | +Our current recommendation for JSON-LD is to render structured data as a `<script>` tag in your `layout.js` or `page.js` components. For example: |
| 10 | + |
| 11 | +```tsx filename="app/products/[id]/page.tsx" switcher |
| 12 | +export default async function Page({ params }) { |
| 13 | + const { id } = await params |
| 14 | + const product = await getProduct(id) |
| 15 | + |
| 16 | + const jsonLd = { |
| 17 | + '@context': 'https://schema.org', |
| 18 | + '@type': 'Product', |
| 19 | + name: product.name, |
| 20 | + image: product.image, |
| 21 | + description: product.description, |
| 22 | + } |
| 23 | + |
| 24 | + return ( |
| 25 | + <section> |
| 26 | + {/* Add JSON-LD to your page */} |
| 27 | + <script |
| 28 | + type="application/ld+json" |
| 29 | + dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} |
| 30 | + /> |
| 31 | + {/* ... */} |
| 32 | + </section> |
| 33 | + ) |
| 34 | +} |
| 35 | +``` |
| 36 | + |
| 37 | +```jsx filename="app/products/[id]/page.js" switcher |
| 38 | +export default async function Page({ params }) { |
| 39 | + const { id } = await params |
| 40 | + const product = await getProduct(id) |
| 41 | + |
| 42 | + const jsonLd = { |
| 43 | + '@context': 'https://schema.org', |
| 44 | + '@type': 'Product', |
| 45 | + name: product.name, |
| 46 | + image: product.image, |
| 47 | + description: product.description, |
| 48 | + } |
| 49 | + |
| 50 | + return ( |
| 51 | + <section> |
| 52 | + {/* Add JSON-LD to your page */} |
| 53 | + <script |
| 54 | + type="application/ld+json" |
| 55 | + dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} |
| 56 | + /> |
| 57 | + {/* ... */} |
| 58 | + </section> |
| 59 | + ) |
| 60 | +} |
| 61 | +``` |
| 62 | + |
| 63 | +You can validate and test your structured data with the [Rich Results Test](https://search.google.com/test/rich-results) for Google or the generic [Schema Markup Validator](https://validator.schema.org/). |
| 64 | + |
| 65 | +You can type your JSON-LD with TypeScript using community packages like [`schema-dts`](https://www.npmjs.com/package/schema-dts): |
| 66 | + |
| 67 | +```tsx |
| 68 | +import { Product, WithContext } from 'schema-dts' |
| 69 | + |
| 70 | +const jsonLd: WithContext<Product> = { |
| 71 | + '@context': 'https://schema.org', |
| 72 | + '@type': 'Product', |
| 73 | + name: 'Next.js Sticker', |
| 74 | + image: 'https://nextjs.org/imgs/sticker.png', |
| 75 | + description: 'Dynamic at the speed of static.', |
| 76 | +} |
| 77 | +``` |
0 commit comments