Have you seen the new Next.js newsletter?
Useful Tools
- dub recently launched a useful Free UTM builder! You can use it here
Next SEO
Next SEO is a plugin that makes managing your SEO easier in Next.js projects.
Pull requests are very welcome. Also make sure to check out the issues for feature requests if you are
looking for inspiration on what to add.
Feel like supporting this free plugin?
It takes a lot of time to maintain an open source project so any small contribution is greatly appreciated.
Coffee fuels coding ☕️
next-seo.wallet (ERC20 & SOL)
Note on app directory
This note is only relevant if using the app directory.
For standard meta data (e.g., ,
) then it is highly recommended that you use the built-in <code>generateMetaData</code> method. You can check out the docs <a rel="noreferrer nofollow" target="_blank" href="https://beta.nextjs.org/docs/guides/seo#usage">here</a></p>
<p>For JSON-LD then, the only change needed is to add <code>useAppDir={true}</code> to the JSON-LD component in use. You should add use this component in your <code>page.js</code> and NOT your <code>head.js</code>.</p>
<pre><code><ArticleJsonLd
useAppDir={true}
url="https://example.com/article"
title="Article headline" <- required for app directory
/></code></pre>
<p>If you are using <strong><code>pages</code></strong> directory then <code>NextSeo</code> is <strong>exactly what you need</strong> for your SEO needs!</p>
<h3>Table of Contents</h3>
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
<ul>
<li><a href="#usage">Usage</a>
<ul>
<li><a href="#setup">Setup</a></li>
<li><a href="#add-seo-to-page">Add SEO to Page</a></li>
<li><a href="#default-seo-configuration">Default SEO Configuration</a></li>
<li><a href="#nextseo-options">NextSeo Options</a></li>
<li><a href="#title-template">Title Template</a></li>
<li><a href="#default-title">Default Title</a></li>
<li><a href="#no-index">No Index</a></li>
<li><a href="#dangerouslysetallpagestonoindex">dangerouslySetAllPagesToNoIndex</a></li>
<li><a href="#no-follow">No Follow</a></li>
<li><a href="#dangerouslysetallpagestonofollow">dangerouslySetAllPagesToNoFollow</a></li>
<li><a href="#robotsprops">robotsProps</a></li>
<li><a href="#twitter">Twitter</a></li>
<li><a href="#facebook">Facebook</a></li>
<li><a href="#canonical-url">Canonical URL</a></li>
<li><a href="#alternate">Alternate</a></li>
<li><a href="#additional-meta-tags">Additional Meta Tags</a></li>
<li><a href="#additional-link-tags">Additional Link Tags</a></li>
</ul></li>
<li><a href="#open-graph">Open Graph</a>
<ul>
<li><a href="#open-graph-examples">Open Graph Examples</a></li>
<li><a href="#basic">Basic</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#audio">Audio</a></li>
<li><a href="#article">Article</a></li>
<li><a href="#book">Book</a></li>
<li><a href="#profile">Profile</a></li>
</ul></li>
<li><a href="#json-ld">JSON-LD</a>
<ul>
<li><a href="#json-ld-security">JSON-LD Security</a></li>
<li><a href="#handling-multiple-instances">Handling multiple instances</a></li>
<li><a href="#article-1">Article</a></li>
<li><a href="#breadcrumb">Breadcrumb</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#campground">Campground</a></li>
<li><a href="#recipe">Recipe</a></li>
<li><a href="#sitelinks-search-box">Sitelinks Search Box</a></li>
<li><a href="#course">Course</a></li>
<li><a href="#dataset">Dataset</a></li>
<li><a href="#corporate-contact">Corporate Contact</a></li>
<li><a href="#faq-page">FAQ Page</a></li>
<li><a href="#how-to">How-to</a></li>
<li><a href="#job-posting">Job Posting</a></li>
<li><a href="#local-business">Local Business</a></li>
<li><a href="#logo">Logo</a></li>
<li><a href="#product">Product</a></li>
<li><a href="#social-profile">Social Profile</a></li>
<li><a href="#news-article">News Article</a></li>
<li><a href="#park">Park</a></li>
<li><a href="#video-1">Video</a></li>
<li><a href="#videogame">VideoGame</a></li>
<li><a href="#event">Event</a></li>
<li><a href="#qa">Q&A</a></li>
<li><a href="#collection-page">Collection Page</a></li>
<li><a href="#profile-page">Profile page</a></li>
<li><a href="#carousel">Carousel</a></li>
<li><a href="#default-summary-list">Default (Summary List)</a></li>
<li><a href="#course-1">Course</a></li>
<li><a href="#movie">Movie</a></li>
<li><a href="#recipe-1">Recipe</a></li>
<li><a href="#custom">Custom</a></li>
<li><a href="#software-app">Software App</a></li>
<li><a href="#organization">Organization</a></li>
<li><a href="#brand">Brand</a></li>
<li><a href="#webpage">WebPage</a></li>
<li><a href="#image-metadata">Image Metadata</a></li>
</ul></li>
<li><a href="#contributors">Contributors</a></li>
</ul>
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
<h2>Usage</h2>
<p><code>NextSeo</code> works by including it on pages where you would like SEO attributes to be added. Once included on the page, you pass it a configuration object with the page's SEO properties. This can be dynamically generated at a page level, or in some cases, your API may return an SEO object.</p>
<h3>Setup</h3>
<p>First, install it:</p>
<pre><code class="language-bash">npm install next-seo</code></pre>
<p>or</p>
<pre><code class="language-bash">yarn add next-seo</code></pre>
<h3>Add SEO to Page</h3>
<hr />
<p><strong>Using Next.js app directory introduced in Next.js 13?</strong></p>
<p>If you are using the Next.js app directory, then it is highly recommended that you use the built-in <code>generateMetaData</code> method. You can check out the docs <a rel="noreferrer nofollow" target="_blank" href="https://beta.nextjs.org/docs/guides/seo#usage">here</a></p>
<p>If you are using the <code>pages</code> directory, then <code>NextSeo</code> is exactly what you need for your SEO needs!</p>
<hr />
<p>Then, you need to import <code>NextSeo</code> and add the desired properties. This will render out the tags in the <code><head></code> for SEO. At a bare minimum, you should add a title and description.</p>
<p><strong>Example with just title and description:</strong></p>
<pre><code class="language-jsx">import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo
title="Simple Usage Example"
description="A short description goes here."
/>
<p>Simple Usage</p>
</>
);
export default Page;</code></pre>
<p>But <code>NextSeo</code> gives you many more options that you can add. See below for a typical example of a page.</p>
<p><strong>Typical page example:</strong></p>
<pre><code class="language-jsx">import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo
title="Using More of Config"
description="This example uses more of the available config options."
canonical="https://www.canonical.ie/"
openGraph={{
url: 'https://www.url.ie/a',
title: 'Open Graph Title',
description: 'Open Graph Description',
images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
type: 'image/jpeg',
},
{
url: 'https://www.example.ie/og-image-02.jpg',
width: 900,
height: 800,
alt: 'Og Image Alt Second',
type: 'image/jpeg',
},
{ url: 'https://www.example.ie/og-image-03.jpg' },
{ url: 'https://www.example.ie/og-image-04.jpg' },
],
siteName: 'SiteName',
}}
twitter={{
handle: '@handle',
site: '@site',
cardType: 'summary_large_image',
}}
/>
<p>SEO Added to Page</p>
</>
);
export default Page;</code></pre>
<p><strong>A note on Twitter Tags</strong></p>
<p>Props <code>cardType</code>, <code>site</code>, <code>handle</code> are equivalent to <code>twitter:card</code>, <code>twitter:site</code>, <code>twitter:creator</code>. Documentation can be found <a rel="noreferrer nofollow" target="_blank" href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary">here</a>.</p>
<p>Twitter will read the <code>og:title</code>, <code>og:image</code> and <code>og:description</code> tags for their card. <code>next-seo</code> omits <code>twitter:title</code>, <code>twitter:image</code> and <code>twitter:description</code> to avoid duplication.</p>
<p>Some tools may report this as an error. See <a rel="noreferrer nofollow" target="_blank" href="https://github.com/garmeeh/next-seo/issues/14">Issue #14</a></p>
<h3>Default SEO Configuration</h3>
<p><code>NextSeo</code> enables you to set some default SEO properties that will appear on all pages without needing to include anything on them. You can also override these on a page-by-page basis if needed.</p>
<p>To achieve this, you will need to create a custom <code><App></code>. In your pages directory, create a new file, <code>_app.js</code>. See the Next.js docs <a rel="noreferrer nofollow" target="_blank" href="https://nextjs.org/docs/advanced-features/custom-app">here</a> for more info on a custom <code><App></code>.</p>
<p>Within this file you will need to import <code>DefaultSeo</code> from <code>next-seo</code> and pass it props.</p>
<p>Here is a typical example:</p>
<pre><code class="language-jsx">import App, { Container } from 'next/app';
import { DefaultSeo } from 'next-seo';
// import your default seo configuration
import SEO from '../next-seo.config';
export default class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
return (
<Container>
<DefaultSeo
openGraph={{
type: 'website',
locale: 'en_IE',
url: 'https://www.url.ie/',
siteName: 'SiteName',
}}
twitter={{
handle: '@handle',
site: '@site',
cardType: 'summary_large_image',
}}
/>
<Component {...pageProps} />
</Container>
);
}
}</code></pre>
<p>To work properly, <code>DefaultSeo</code> should be placed above (before) <code>Component</code> due to the behavior of Next.js internals.</p>
<p>Alternatively, you can also create a config file to store default values such as <code>next-seo.config.js</code></p>
<pre><code class="language-js">export default {
openGraph: {
type: 'website',
locale: 'en_IE',
url: 'https://www.url.ie/',
siteName: 'SiteName',
},
twitter: {
handle: '@handle',
site: '@site',
cardType: 'summary_large_image',
},
};</code></pre>
<details><summary>or like this, if you are using TypeScript</summary>
<p>
```ts
import { DefaultSeoProps } from 'next-seo';
const config: DefaultSeoProps = {
openGraph: {
type: 'website',
locale: 'en_IE',
url: 'https://www.url.ie/',
siteName: 'SiteName',
},
twitter: {
handle: '@handle',
site: '@site',
cardType: 'summary_large_image',
},
};
export default config;
```
</p>
</details>
<p>import at the top of <code>_app.js</code></p>
<pre><code class="language-jsx">import SEO from '../next-seo.config';</code></pre>
<p>and the <code>DefaultSeo</code> component can be used like this instead</p>
<pre><code class="language-jsx"><DefaultSeo {...SEO} /></code></pre>
<p>From now on, all of your pages will have the defaults above applied.</p>
<p><strong>Note that <code>Container</code> is deprecated in Next.js v9.0.4 so you should replace that component here with <code>React.Fragment</code> on this version and later - see <a rel="noreferrer nofollow" target="_blank" href="https://github.com/zeit/next.js/blob/master/errors/app-container-deprecated.md">here</a></strong></p>
<h3>NextSeo Options</h3>
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>titleTemplate</code></td>
<td>string</td>
<td>Allows you to set default title template that will be added to your title <a href="#title-template">More Info</a></td>
</tr>
<tr>
<td><code>title</code></td>
<td>string</td>
<td>Set the meta title of the page</td>
</tr>
<tr>
<td><code>defaultTitle</code></td>
<td>string</td>
<td>If no title is set on a page, this string will be used instead of an empty <code>titleTemplate</code> <a href="#default-title">More Info</a></td>
</tr>
<tr>
<td><code>noindex</code></td>
<td>boolean (default false)</td>
<td>Sets whether page should be indexed or not <a href="#no-index">More Info</a></td>
</tr>
<tr>
<td><code>nofollow</code></td>
<td>boolean (default false)</td>
<td>Sets whether page should be followed or not <a href="#no-follow">More Info</a></td>
</tr>
<tr>
<td><code>robotsProps</code></td>
<td>Object</td>
<td>Set the more meta information for the <code>X-Robots-Tag</code> <a href="#robotsprops">More Info</a></td>
</tr>
<tr>
<td><code>description</code></td>
<td>string</td>
<td>Set the page meta description</td>
</tr>
<tr>
<td><code>canonical</code></td>
<td>string</td>
<td>Set the page canonical url</td>
</tr>
<tr>
<td><code>mobileAlternate.media</code></td>
<td>string</td>
<td>Set what screen size the mobile website should be served from</td>
</tr>
<tr>
<td><code>mobileAlternate.href</code></td>
<td>string</td>
<td>Set the mobile page alternate url</td>
</tr>
<tr>
<td><code>languageAlternates</code></td>
<td>array</td>
<td>Set the language of the alternate urls. Expects array of objects with the shape: <code>{ hrefLang: string, href: string }</code></td>
</tr>
<tr>
<td><code>themeColor</code></td>
<td>string</td>
<td>Indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. Must contain a valid CSS color</td>
</tr>
<tr>
<td><code>additionalMetaTags</code></td>
<td>array</td>
<td>Allows you to add a meta tag that is not documented here. <a href="#additional-meta-tags">More Info</a></td>
</tr>
<tr>
<td><code>additionalLinkTags</code></td>
<td>array</td>
<td>Allows you to add a link tag that is not documented here. <a href="#additional-link-tags">More Info</a></td>
</tr>
<tr>
<td><code>twitter.cardType</code></td>
<td>string</td>
<td>The card type, which will be one of <code>summary</code>, <code>summary_large_image</code>, <code>app</code>, or <code>player</code></td>
</tr>
<tr>
<td><code>twitter.site</code></td>
<td>string</td>
<td>@username for the website used in the card footer</td>
</tr>
<tr>
<td><code>twitter.handle</code></td>
<td>string</td>
<td>@username for the content creator / author (outputs as <code>twitter:creator</code>)</td>
</tr>
<tr>
<td><code>facebook.appId</code></td>
<td>string</td>
<td>Used for Facebook Insights, you must add a facebook app ID to your page to for it <a href="#facebook">More Info</a></td>
</tr>
<tr>
<td><code>openGraph.url</code></td>
<td>string</td>
<td>The canonical URL of your object that will be used as its permanent ID in the graph</td>
</tr>
<tr>
<td><code>openGraph.type</code></td>
<td>string</td>
<td>The type of your object. Depending on the type you specify, other properties may also be required <a href="#open-graph">More Info</a></td>
</tr>
<tr>
<td><code>openGraph.title</code></td>
<td>string</td>
<td>The open graph title, this can be different than your meta title.</td>
</tr>
<tr>
<td><code>openGraph.description</code></td>
<td>string</td>
<td>The open graph description, this can be different than your meta description.</td>
</tr>
<tr>
<td><code>openGraph.images</code></td>
<td>array</td>
<td>An array of images (object) to be used by social media platforms, slack etc as a preview. If multiple supplied you can choose one when sharing. <a href="#open-graph-examples">See Examples</a></td>
</tr>
<tr>
<td><code>openGraph.videos</code></td>
<td>array</td>
<td>An array of videos (object)</td>
</tr>
<tr>
<td><code>openGraph.locale</code></td>
<td>string</td>
<td>The locale the open graph tags are marked up in. Of the format language_TERRITORY. Default is en_US.</td>
</tr>
<tr>
<td><code>openGraph.siteName</code></td>
<td>string</td>
<td>If your object is part of a larger web site, the name which should be displayed for the overall site.</td>
</tr>
<tr>
<td><code>openGraph.profile.firstName</code></td>
<td>string</td>
<td>Person's first name.</td>
</tr>
<tr>
<td><code>openGraph.profile.lastName</code></td>
<td>string</td>
<td>Person's last name.</td>
</tr>
<tr>
<td><code>openGraph.profile.username</code></td>
<td>string</td>
<td>Person's username.</td>
</tr>
<tr>
<td><code>openGraph.profile.gender</code></td>
<td>string</td>
<td>Person's gender.</td>
</tr>
<tr>
<td><code>openGraph.book.authors</code></td>
<td>string[]</td>
<td>Writers of the article. <a href="#open-graph-examples">See Examples</a></td>
</tr>
<tr>
<td><code>openGraph.book.isbn</code></td>
<td>string</td>
<td>The <a rel="noreferrer nofollow" target="_blank" href="https://en.wikipedia.org/wiki/International_Standard_Book_Number">ISBN</a></td>
</tr>
<tr>
<td><code>openGraph.book.releaseDate</code></td>
<td>datetime</td>
<td>The date the book was released.</td>
</tr>
<tr>
<td><code>openGraph.book.tags</code></td>
<td>string[]</td>
<td>Tag words associated with this book.</td>
</tr>
<tr>
<td><code>openGraph.article.publishedTime</code></td>
<td>datetime</td>
<td>When the article was first published. <a href="#open-graph-examples">See Examples</a></td>
</tr>
<tr>
<td><code>openGraph.article.modifiedTime</code></td>
<td>datetime</td>
<td>When the article was last changed.</td>
</tr>
<tr>
<td><code>openGraph.article.expirationTime</code></td>
<td>datetime</td>
<td>When the article is out of date after.</td>
</tr>
<tr>
<td><code>openGraph.article.authors</code></td>
<td>string[]</td>
<td>Writers of the article.</td>
</tr>
<tr>
<td><code>openGraph.article.section</code></td>
<td>string</td>
<td>A high-level section name. E.g. Technology</td>
</tr>
<tr>
<td><code>openGraph.article.tags</code></td>
<td>string[]</td>
<td>Tag words associated with this article.</td>
</tr>
</tbody>
</table>
<h4>Title Template</h4>
<p>Replaces <code>%s</code> with your title string</p>
<pre><code class="language-js">title = 'This is my title';
titleTemplate = 'Next SEO | %s';
// outputs: Next SEO | This is my title</code></pre>
<pre><code class="language-js">title = 'This is my title';
titleTemplate = '%s | Next SEO';
// outputs: This is my title | Next SEO</code></pre>
<h4>Default Title</h4>
<pre><code class="language-js">title = undefined;
titleTemplate = 'Next SEO | %s';
defaultTitle = 'Next SEO';
// outputs: Next SEO</code></pre>
<h4>No Index</h4>
<p>Setting this to <code>true</code> will set <code>noindex,follow</code> (to set <code>nofollow</code>, please refer to <a href="#no-follow"><code>nofollow</code></a>). This works on a page by page basis. This property works in tandem with the <code>nofollow</code> property and together they populate the <code>robots</code> meta tag.</p>
<p><strong>Note:</strong> The <code>noindex</code> and the <a href="#no-follow"><code>nofollow</code></a> properties are a little different than all the others in the sense that setting them as a default does not work as expected. This is due to the fact Next SEO already has a default of <code>index,follow</code> because <code>next-seo</code> is a SEO plugin after all. So if you want to globally these properties, please see <a href="#dangerouslySetAllPagesToNoIndex">dangerouslySetAllPagesToNoIndex</a> and <a href="#dangerouslySetAllPagesToNoFollow">dangerouslySetAllPagesToNoFollow</a>.</p>
<p><strong>Example No Index on a single page:</strong></p>
<p>If you have a single page that you want no indexed you can achieve this by:</p>
<pre><code class="language-jsx">import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo noindex={true} />
<p>This page is no indexed</p>
</>
);
export default Page;
/*
<meta name="robots" content="noindex,follow">
*/</code></pre>
<h4>dangerouslySetAllPagesToNoIndex</h4>
<p>It has the prefix <code>dangerously</code> because it will <code>noindex</code> all pages. As this is an SEO plugin, that is kinda dangerous action. It is <strong>not</strong> bad to use this. Just please be sure you want to <code>noindex</code> <strong>EVERY</strong> page. You can still override this at a page level if you have a use case to <code>index</code> a page. This can be done by setting <code>noindex: false</code>.</p>
<p>The only way to unset this is by removing the prop from the <code>DefaultSeo</code> in your custom <code><App></code>.</p>
<h4>No Follow</h4>
<p>Setting this to <code>true</code> will set <code>index,nofollow</code> (to set <code>noindex</code>, please refer to <a href="#no-index"><code>noindex</code></a>). This works on a page-by-page basis. This property works in tandem with the <code>noindex</code> property, and together, they populate the <code>robots</code> meta tag.</p>
<p><strong>Note:</strong> Unlike for the other properties, setting <code>noindex</code> and <code>nofollow</code> by default does not work as expected. This is because Next SEO has a default of <code>index,follow</code>, since <code>next-seo</code> is an SEO plugin after all. If you want to globally allow these properties, see <a href="#dangerouslySetAllPagesToNoIndex">dangerouslySetAllPagesToNoIndex</a> and <a href="#dangerouslySetAllPagesToNoFollow">dangerouslySetAllPagesToNoFollow</a>.</p>
<p><strong>Example No Follow on a single page:</strong></p>
<p>If you have a single page that you want no indexed you can achieve this by:</p>
<pre><code class="language-jsx">import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo nofollow={true} />
<p>This page is not followed</p>
</>
);
export default Page;
/*
<meta name="robots" content="index,nofollow">
*/</code></pre>
<h4>dangerouslySetAllPagesToNoFollow</h4>
<p>It has the prefix of <code>dangerously</code> because it will <code>nofollow</code> all pages. As this is an SEO plugin, that is kinda dangerous action. It is <strong>not</strong> bad to use this. Just please be sure you want to <code>nofollow</code> <strong>EVERY</strong> page. You can still override this at a page level if you have a use case to <code>follow</code> a page. This can be done by setting <code>nofollow: false</code>.</p>
<p>The only way to unset this, is by removing the prop from the <code>DefaultSeo</code> in your custom <code><App></code>.</p>
<table>
<thead>
<tr>
<th><code>noindex</code></th>
<th><code>nofollow</code></th>
<th><code>meta</code> content of <code>robots</code></th>
</tr>
</thead>
<tbody>
<tr>
<td>--</td>
<td>--</td>
<td><code>index,follow</code> (default)</td>
</tr>
<tr>
<td>false</td>
<td>false</td>
<td><code>index,follow</code></td>
</tr>
<tr>
<td>true</td>
<td>--</td>
<td><code>noindex,follow</code></td>
</tr>
<tr>
<td>true</td>
<td>false</td>
<td><code>noindex,follow</code></td>
</tr>
<tr>
<td>--</td>
<td>true</td>
<td><code>index,nofollow</code></td>
</tr>
<tr>
<td>false</td>
<td>true</td>
<td><code>index,nofollow</code></td>
</tr>
<tr>
<td>true</td>
<td>true</td>
<td><code>noindex,nofollow</code></td>
</tr>
</tbody>
</table>
<h4>robotsProps</h4>
<p>In addition to <code>index, follow</code> the <code>robots</code> meta tag accepts more properties to archive a more accurate crawling and serve better snippets for SEO bots that crawl your page.</p>
<p>Example:</p>
<pre><code class="language-jsx">import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo
robotsProps={{
nosnippet: true,
notranslate: true,
noimageindex: true,
noarchive: true,
maxSnippet: -1,
maxImagePreview: 'none',
maxVideoPreview: -1,
}}
/>
<p>Additional robots props in Next-SEO!!</p>
</>
);
export default Page;
/*
<meta name="robots" content="index,follow,nosnippet,max-snippet:-1,max-image-preview:none,noarchive,noimageindex,max-video-preview:-1,notranslate">
*/</code></pre>
<p><strong>Available properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>noarchive</code></td>
<td>boolean</td>
<td>Do not show a <a rel="noreferrer nofollow" target="_blank" href="https://support.google.com/websearch/answer/1687222">cached link</a> in search results.</td>
</tr>
<tr>
<td><code>nosnippet</code></td>
<td>boolean</td>
<td>Do not show a text snippet or video preview in the search results for this page.</td>
</tr>
<tr>
<td><code>max-snippet</code></td>
<td>number</td>
<td>Use a maximum of [number] characters as a textual snippet for this search result. <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/reference/robots_meta_tag?hl=en-GB#directives">Read more</a></td>
</tr>
<tr>
<td><code>max-image-preview</code></td>
<td>'none','standard','large'</td>
<td>Set the maximum size of an image preview for this page in a search results.</td>
</tr>
<tr>
<td><code>max-video-preview</code></td>
<td>number</td>
<td>Use a maximum of [number] seconds as a video snippet for videos on this page in search results. <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/reference/robots_meta_tag?hl=en-GB#directives">Read more</a></td>
</tr>
<tr>
<td><code>notranslate</code></td>
<td>boolean</td>
<td>Do not offer translation of this page in search results.</td>
</tr>
<tr>
<td><code>noimageindex</code></td>
<td>boolean</td>
<td>Do not index images on this page.</td>
</tr>
<tr>
<td><code>unavailable_after</code></td>
<td>string</td>
<td>Do not show this page in search results after the specified date/time. The date/time must be specified in a widely adopted format including, but not limited to RFC 822, RFC 850, and ISO 8601.</td>
</tr>
</tbody>
</table>
<p>For more reference about the <code>X-Robots-Tag</code> visit <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/reference/robots_meta_tag?hl=en-GB#directives">Google Search Central - Control Crawling and Indexing</a></p>
<h4>Twitter</h4>
<p>Twitter will read the <code>og:title</code>, <code>og:image</code> and <code>og:description</code> tags for their card, this is why <code>next-seo</code> omits <code>twitter:title</code>, <code>twitter:image</code> and <code>twitter:description</code> so not to duplicate.</p>
<p>Some tools may report this as an error. See <a rel="noreferrer nofollow" target="_blank" href="https://github.com/garmeeh/next-seo/issues/14">Issue #14</a></p>
<h4>Facebook</h4>
<pre><code class="language-jsx">facebook={{
appId: '1234567890',
}}</code></pre>
<p>Add this to your SEO config to include the fb:app_id meta if you need to enable Facebook insights for your site. Information regarding this can be found in Facebook's <a rel="noreferrer nofollow" target="_blank" href="https://developers.facebook.com/docs/sharing/webmasters/">documentation</a></p>
<h4>Canonical URL</h4>
<p>Add this on a page-per-page basis when you want to consolidate duplicate URLs.</p>
<pre><code class="language-js">canonical = 'https://www.canonical.ie/';</code></pre>
<h4>Alternate</h4>
<p>This link relation is used to indicate a relation between a desktop and a mobile website to search engines.</p>
<p>Example:</p>
<pre><code class="language-jsx">mobileAlternate={{
media: 'only screen and (max-width: 640px)',
href: 'https://m.canonical.ie',
}}</code></pre>
<pre><code class="language-jsx">languageAlternates={[{
hrefLang: 'de-AT',
href: 'https://www.canonical.ie/de',
}]}</code></pre>
<h4>Additional Meta Tags</h4>
<p>This allows you to add any other meta tags that are not covered in the <code>config</code> and
should be used instead of <code>children</code> prop.</p>
<p><code>content</code> is required. Then either <code>name</code>, <code>property</code> or <code>httpEquiv</code>. (Only one on each)</p>
<p>Example:</p>
<pre><code class="language-js">additionalMetaTags={[{
property: 'dc:creator',
content: 'Jane Doe'
}, {
name: 'application-name',
content: 'NextSeo'
}, {
httpEquiv: 'x-ua-compatible',
content: 'IE=edge; chrome=1'
}]}</code></pre>
<p>Invalid Examples:</p>
<p>These are invalid as they contain more than one of <code>name</code>, <code>property</code> and <code>httpEquiv</code> on the same entry.</p>
<pre><code class="language-js">additionalMetaTags={[{
property: 'dc:creator',
name: 'dc:creator',
content: 'Jane Doe'
}, {
property: 'application-name',
httpEquiv: 'application-name',
content: 'NextSeo'
}]}</code></pre>
<p>One thing to note on this is that it currently only supports unique tags unless you use the <code>keyOverride</code> prop to provide a unique <a rel="noreferrer nofollow" target="_blank" href="https://reactjs.org/docs/lists-and-keys.html#keys">key</a> to each additional meta tag.</p>
<p>The default behaviour (without a <code>keyOverride</code> prop) is to render one tag per unique <code>name</code> / <code>property</code> / <code>httpEquiv</code>. The last one defined will be rendered.</p>
<p>For example, if you pass 2 tags with the same <code>property</code>:</p>
<pre><code class="language-js">additionalMetaTags={[{
property: 'dc:creator',
content: 'Joe Bloggs'
}, {
property: 'dc:creator',
content: 'Jane Doe'
}]}</code></pre>
<p>it will result in this being rendered:</p>
<pre><code class="language-html"><meta property="dc:creator" content="Jane Doe" /></code></pre>
<p>Providing an additional <code>keyOverride</code> property like this:</p>
<pre><code class="language-js">additionalMetaTags={[{
property: 'dc:creator',
content: 'Joe Bloggs',
keyOverride: 'creator1',
}, {
property: 'dc:creator',
content: 'Jane Doe',
keyOverride: 'creator2',
}]}</code></pre>
<p>results in the correct HTML being rendered:</p>
<pre><code class="language-html"><meta property="dc:creator" content="Joe Bloggs" />
<meta property="dc:creator" content="Jane Doe" /></code></pre>
<h4>Additional Link Tags</h4>
<p>This allows you to add any other link tags that are not covered in the <code>config</code>.</p>
<p><code>rel</code> and <code>href</code> is required.</p>
<p>Example:</p>
<pre><code class="language-js">additionalLinkTags={[
{
rel: 'icon',
href: 'https://www.test.ie/favicon.ico',
},
{
rel: 'apple-touch-icon',
href: 'https://www.test.ie/touch-icon-ipad.jpg',
sizes: '76x76'
},
{
rel: 'manifest',
href: '/manifest.json'
},
{
rel: 'preload',
href: 'https://www.test.ie/font/sample-font.woof2',
as: 'font',
type: 'font/woff2',
crossOrigin: 'anonymous'
}
]}</code></pre>
<p>it will result in this being rendered:</p>
<pre><code class="language-html"><link rel="icon" href="https://www.test.ie/favicon.ico" />
<link
rel="apple-touch-icon"
href="https://www.test.ie/touch-icon-ipad.jpg"
sizes="76x76"
/>
<link rel="manifest" href="https://github.com/garmeeh/next-seo/blob/master/manifest.json" />
<link
rel="preload"
href="https://www.test.ie/font/sample-font.woof2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/></code></pre>
<h2>Open Graph</h2>
<p>For the full specification please check out <a rel="noreferrer nofollow" target="_blank" href="http://ogp.me/">http://ogp.me/</a></p>
<p>Next SEO currently supports:</p>
<ul>
<li><a href="#basic">basic</a></li>
<li><a href="#video">video</a></li>
<li><a href="#article">article</a></li>
<li><a href="#book">book</a></li>
<li><a href="#profile">profile</a></li>
</ul>
<h3>Open Graph Examples</h3>
<h4>Basic</h4>
<pre><code class="language-jsx">import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo
openGraph={{
type: 'website',
url: 'https://www.example.com/page',
title: 'Open Graph Title',
description: 'Open Graph Description',
images: [
{
url: 'https://www.example.ie/og-image.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
},
{
url: 'https://www.example.ie/og-image-2.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt 2',
},
],
}}
/>
<p>Basic</p>
</>
);
export default Page;</code></pre>
<p><strong>Note</strong></p>
<p>Multiple images are available from next.js version <code>7.0.0-canary.0</code></p>
<p>For versions <code>6.0.0</code> - <code>7.0.0-canary.0</code> you just need to supply a single item array:</p>
<pre><code class="language-js">images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
},
],</code></pre>
<p>Supplying multiple images will not break anything, but only one will be added to the head.</p>
<h4>Video</h4>
<p>Full info on <a rel="noreferrer nofollow" target="_blank" href="http://ogp.me/#type_video">http://ogp.me/</a></p>
<pre><code class="language-jsx">import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo
title="Video Page Title"
description="Description of video page"
openGraph={{
title: 'Open Graph Video Title',
description: 'Description of open graph video',
url: 'https://www.example.com/videos/video-title',
type: 'video.movie',
video: {
// Multiple Open Graph actors is only available in version `7.0.2-canary.35`+ of next
actors: [
{
profile: 'https://www.example.com/actors/@firstnameA-lastnameA',
role: 'Protagonist',
},
{
profile: 'https://www.example.com/actors/@firstnameB-lastnameB',
role: 'Antagonist',
},
],
// Multiple Open Graph directors is only available in version `7.0.2-canary.35`+ of next
directors: [
'https://www.example.com/directors/@firstnameA-lastnameA',
'https://www.example.com/directors/@firstnameB-lastnameB',
],
// Multiple Open Graph writers is only available in version `7.0.2-canary.35`+ of next
writers: [
'https://www.example.com/writers/@firstnameA-lastnameA',
'https://www.example.com/writers/@firstnameB-lastnameB',
],
duration: 680000,
releaseDate: '2022-12-21T22:04:11Z',
// Multiple Open Graph tags is only available in version `7.0.2-canary.35`+ of next
tags: ['Tag A', 'Tag B', 'Tag C'],
},
siteName: 'SiteName',
}}
/>
<h1>Video Page SEO</h1>
</>
);
export default Page;</code></pre>
<p><strong>Note</strong></p>
<p>Multiple images are available from next.js version <code>7.0.0-canary.0</code></p>
<p>For versions <code>6.0.0</code> - <code>7.0.0-canary.0</code> you just need to supply a single item array:</p>
<pre><code class="language-js">images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
},
],</code></pre>
<p>Supplying multiple images will not break anything, but only one will be added to the head.</p>
<h4>Audio</h4>
<p>Full info on <a rel="noreferrer nofollow" target="_blank" href="https://ogp.me/#structured">http://ogp.me/</a></p>
<pre><code class="language-jsx">import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo
title="Audio Page Title"
description="Description of audio page"
openGraph={{
title: 'Open Graph Audio',
description: 'Description of open graph audio',
url: 'https://www.example.com/audio/audio',
audio: [
{
url: 'http://examples.opengraphprotocol.us/media/audio/1khz.mp3',
secureUrl: 'https://d72cgtgi6hvvl.cloudfront.net/media/audio/1khz.mp3',
type: "audio/mpeg"
},
{
url: 'http://examples.opengraphprotocol.us/media/audio/250hz.mp3',
secureUrl: 'https://d72cgtgi6hvvl.cloudfront.net/media/audio/250hz.mp3',
type: "audio/mpeg"
},
]
site_name: 'SiteName',
}}
/>
<h1>Audio Page SEO</h1>
</>
);
export default Page;</code></pre>
<h4>Article</h4>
<pre><code class="language-jsx">import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo
openGraph={{
title: 'Open Graph Article Title',
description: 'Description of open graph article',
url: 'https://www.example.com/articles/article-title',
type: 'article',
article: {
publishedTime: '2017-06-21T23:04:13Z',
modifiedTime: '2018-01-21T18:04:43Z',
expirationTime: '2022-12-21T22:04:11Z',
section: 'Section II',
authors: [
'https://www.example.com/authors/@firstnameA-lastnameA',
'https://www.example.com/authors/@firstnameB-lastnameB',
],
tags: ['Tag A', 'Tag B', 'Tag C'],
},
images: [
{
url: 'https://www.test.ie/images/cover.jpg',
width: 850,
height: 650,
alt: 'Photo of text',
},
],
}}
/>
<p>Article</p>
</>
);
export default Page;</code></pre>
<p><strong>Note</strong></p>
<p>Multiple images, authors, and tags are available from next.js version <code>7.0.0-canary.0</code></p>
<p>For versions <code>6.0.0</code> - <code>7.0.0-canary.0</code> you just need to supply a single item array:</p>
<p><code>images:</code></p>
<pre><code class="language-js">images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
},
],</code></pre>
<p><code>authors:</code></p>
<pre><code class="language-js">authors: [
'https://www.example.com/authors/@firstnameA-lastnameA',
],</code></pre>
<p><code>tags:</code></p>
<pre><code class="language-js">tags: ['Tag A'],</code></pre>
<p>Supplying multiple of any of the above will not break anything, but only one will be added to the head.</p>
<h4>Book</h4>
<pre><code class="language-jsx">import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo
openGraph={{
title: 'Open Graph Book Title',
description: 'Description of open graph book',
url: 'https://www.example.com/books/book-title',
type: 'book',
book: {
releaseDate: '2018-09-17T11:08:13Z',
isbn: '978-3-16-148410-0',
authors: [
'https://www.example.com/authors/@firstnameA-lastnameA',
'https://www.example.com/authors/@firstnameB-lastnameB',
],
tags: ['Tag A', 'Tag B', 'Tag C'],
},
images: [
{
url: 'https://www.test.ie/images/book.jpg',
width: 850,
height: 650,
alt: 'Cover of the book',
},
],
}}
/>
<p>Book</p>
</>
);
export default Page;</code></pre>
<p><strong>Note</strong></p>
<p>Multiple images, authors, and tags are available from next.js version <code>7.0.0-canary.0</code></p>
<p>For versions <code>6.0.0</code> - <code>7.0.0-canary.0</code> you just need to supply a single item array:</p>
<p><code>images:</code></p>
<pre><code class="language-js">images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
},
],</code></pre>
<p><code>authors:</code></p>
<pre><code class="language-js">authors: [
'https://www.example.com/authors/@firstnameA-lastnameA',
],</code></pre>
<p><code>tags:</code></p>
<pre><code class="language-js">tags: ['Tag A'],</code></pre>
<p>Supplying multiple of any of the above will not break anything, but only one will be added to the head.</p>
<h4>Profile</h4>
<pre><code class="language-jsx">import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo
openGraph={{
title: 'Open Graph Profile Title',
description: 'Description of open graph profile',
url: 'https://www.example.com/@firstlast123',
type: 'profile',
profile: {
firstName: 'First',
lastName: 'Last',
username: 'firstlast123',
gender: 'female',
},
images: [
{
url: 'https://www.test.ie/images/profile.jpg',
width: 850,
height: 650,
alt: 'Profile Photo',
},
],
}}
/>
<p>Profile</p>
</>
);
export default Page;</code></pre>
<p><strong>Note</strong></p>
<p>Multiple images are available from next.js version <code>7.0.0-canary.0</code></p>
<p>For versions <code>6.0.0</code> - <code>7.0.0-canary.0</code> you just need to supply a single item array:</p>
<pre><code class="language-js">images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
},
],</code></pre>
<p>Supplying multiple images will not break anything, but only one will be added to the head.</p>
<h2>JSON-LD</h2>
<p>Next SEO now has the ability to set JSON-LD a form of structured data. Structured data is a standardized format for providing information about a page and classifying the page content.</p>
<p>Google has excellent content on JSON-LD -> <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/docs/data-types/article">HERE</a></p>
<p><strong>If using the app directory then please ensure to add <code>useAppDir={true}</code> prop and that you are using the component in the <code>page.js</code></strong></p>
<p>Below you will find a very basic page implementing each of the available JSON-LD types:</p>
<ul>
<li><a href="#article-1">Article</a></li>
<li><a href="#breadcrumb">Breadcrumb</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#campground">Campground</a></li>
<li><a href="#recipe">Recipe</a></li>
<li><a href="#sitelinks-search-box">Sitelinks Search Box</a></li>
<li><a href="#course">Course</a></li>
<li><a href="#dataset">Dataset</a></li>
<li><a href="#corporate-contact">Corporate Contact</a></li>
<li><a href="#faq-page">FAQ Page</a></li>
<li><a href="#how-to">How-to</a></li>
<li><a href="#job-posting">Job Posting</a></li>
<li><a href="#local-business">Local Business</a></li>
<li><a href="#product">Product</a></li>
<li><a href="#social-profile">Social Profile</a></li>
<li><a href="#news-article">News Article</a></li>
<li><a href="#park">Park</a></li>
</ul>
<p>Pull requests are very welcome to add any from the list <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/docs/data-types/article">found here</a></p>
<h4>JSON-LD Security</h4>
<p>Just a quick note on security. To get JSON-LD onto the page it needs to be in a script tag. <code>next-seo</code> achieves this by using a script tag with <code>dangerouslySetInnerHTML</code>.</p>
<p>So if passing anything directly from a URL to one of the components below please ensure you sanitize it first if needed.</p>
<p>View <code>toJson.tsx</code> for implementation detail.</p>
<h4>Handling multiple instances</h4>
<p>If your page requires multiple instances of a given JSON-LD component, you can specify unique <code>keyOverride</code> properties, and <code>next-seo</code> will handle the rest.</p>
<p>This comes in handy for blog rolls, search results, and overview pages.</p>
<p>Please fully research when you should and shouldn't add multiple instances of JSON-LD.</p>
<pre><code class="language-jsx"><ExampleJsonLd keyOverride="my-new-key" /></code></pre>
<h3>Article</h3>
<pre><code class="language-jsx">import { ArticleJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Article JSON-LD</h1>
<ArticleJsonLd
useAppDir={false}
url="https://example.com/article"
title="Article headline"
images={[
'https://example.com/photos/1x1/photo.jpg',
'https://example.com/photos/4x3/photo.jpg',
'https://example.com/photos/16x9/photo.jpg',
]}
datePublished="2015-02-05T08:00:00+08:00"
dateModified="2015-02-05T09:00:00+08:00"
authorName={[
{
name: 'Jane Blogs',
url: 'https://example.com',
},
{
name: 'Mary Stone',
url: 'https://example.com',
},
]}
publisherName="Gary Meehan"
publisherLogo="https://www.example.com/photos/logo.jpg"
description="This is a mighty good description of this article."
isAccessibleForFree={true}
/>
</>
);
export default Page;</code></pre>
<h3>Breadcrumb</h3>
<pre><code class="language-jsx">import { BreadcrumbJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Breadcrumb JSON-LD</h1>
<BreadcrumbJsonLd
itemListElements={[
{
position: 1,
name: 'Books',
item: 'https://example.com/books',
},
{
position: 2,
name: 'Authors',
item: 'https://example.com/books/authors',
},
{
position: 3,
name: 'Ann Leckie',
item: 'https://example.com/books/authors/annleckie',
},
{
position: 4,
name: 'Ancillary Justice',
item: 'https://example.com/books/authors/ancillaryjustice',
},
]}
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>itemListElements</code></td>
<td></td>
</tr>
<tr>
<td><code>itemListElements.position</code></td>
<td>The position of the breadcrumb in the breadcrumb trail. Position 1 signifies the beginning of the trail.</td>
</tr>
<tr>
<td><code>itemListElements.name</code></td>
<td>The title of the breadcrumb displayed for the user.</td>
</tr>
<tr>
<td><code>itemListElements.item</code></td>
<td>The URL to the webpage that represents the breadcrumb.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<h3>Blog</h3>
<pre><code class="language-jsx">import { ArticleJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Blog JSON-LD</h1>
<ArticleJsonLd
type="BlogPosting"
url="https://example.com/blog"
title="Blog headline"
images={[
'https://example.com/photos/1x1/photo.jpg',
'https://example.com/photos/4x3/photo.jpg',
'https://example.com/photos/16x9/photo.jpg',
]}
datePublished="2015-02-05T08:00:00+08:00"
dateModified="2015-02-05T09:00:00+08:00"
authorName="Jane Blogs"
description="This is a mighty good description of this blog."
/>
</>
);
export default Page;</code></pre>
<h3>Campground</h3>
<pre><code class="language-jsx">import { CampgroundJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Campground JSON-LD</h1>
<CampgroundJsonLd
id="https://www.example.com/campground/rip-van-winkle-campground"
name="Rip Van Winkle Campgrounds"
url="https://www.example.com/campground"
telephone="+18452468114"
images={['https://example.com/photos/1x1/photo.jpg']}
address={{
streetAddress: '149 Blue Mountain Rd',
addressLocality: 'Saugerties',
addressRegion: 'NY',
postalCode: '12477',
addressCountry: 'US',
}}
description="Description about Rip Van Winkle Campgrounds"
geo={{
latitude: '42.092599',
longitude: '-74.018580',
}}
openingHours={[
{
opens: '09:00',
closes: '17:00',
dayOfWeek: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday',
],
validFrom: '2019-12-23',
validThrough: '2020-04-02',
},
]}
petsAllowed
rating={{
ratingValue: '5',
ratingCount: '18',
}}
amenityFeature={{
name: 'Showers',
value: true,
}}
priceRange="$$"
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@id</code></td>
<td>Globally unique ID of the specific campground in the form of a URL.</td>
</tr>
<tr>
<td><code>address</code></td>
<td>Address of the specific campground location</td>
</tr>
<tr>
<td><code>address.addressCountry</code></td>
<td>The 2-letter ISO 3166-1 alpha-2 country code</td>
</tr>
<tr>
<td><code>address.addressLocality</code></td>
<td>City</td>
</tr>
<tr>
<td><code>address.addressRegion</code></td>
<td>State or province, if applicable.</td>
</tr>
<tr>
<td><code>address.postalCode</code></td>
<td>Postal or zip code.</td>
</tr>
<tr>
<td><code>address.streetAddress</code></td>
<td>Street number, street name, and unit number.</td>
</tr>
<tr>
<td><code>name</code></td>
<td>Campground name.</td>
</tr>
<tr>
<td><code>description</code></td>
<td>Campground description.</td>
</tr>
</tbody>
</table>
<p><strong>Supported properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>geo</code></td>
<td>Geographic coordinates of the campground.</td>
</tr>
<tr>
<td><code>geo.latitude</code></td>
<td>The latitude of the campground location</td>
</tr>
<tr>
<td><code>geo.longitude</code></td>
<td>The longitude of the campground location</td>
</tr>
<tr>
<td><code>images</code></td>
<td>An image or images of the campground. Required for valid markup depending on the type</td>
</tr>
<tr>
<td><code>telephone</code></td>
<td>A campground phone number meant to be the primary contact method for customers.</td>
</tr>
<tr>
<td><code>url</code></td>
<td>The fully-qualified URL of the specific campground.</td>
</tr>
<tr>
<td><code>openingHours</code></td>
<td>Opening hour specification of the campground. You can provide this as a single object, or an array of objects with the properties below.</td>
</tr>
<tr>
<td><code>openingHours.opens</code></td>
<td>The opening hour of the place or service on the given day(s) of the week.</td>
</tr>
<tr>
<td><code>openingHours.closes</code></td>
<td>The closing hour of the place or service on the given day(s) of the week.</td>
</tr>
<tr>
<td><code>openingHours.dayOfWeek</code></td>
<td>The day of the week for which these opening hours are valid. Can be a string or array of strings. Refer to <a rel="noreferrer nofollow" target="_blank" href="https://schema.org/DayOfWeek">DayOfWeek</a></td>
</tr>
<tr>
<td><code>openingHours.validFrom</code></td>
<td>The date when the item becomes valid.</td>
</tr>
<tr>
<td><code>openingHours.validThrough</code></td>
<td>The date after when the item is not valid.</td>
</tr>
<tr>
<td><code>isAccessibleForFree</code></td>
<td>Whether or not the campground is accessible for free.</td>
</tr>
<tr>
<td><code>petsAllowed</code></td>
<td>Whether or not the campgroud allows pets.</td>
</tr>
<tr>
<td><code>amenityFeature</code></td>
<td>An amenity feature (e.g. a characteristic or service) of the campground.</td>
</tr>
<tr>
<td><code>amenityFeature.name</code></td>
<td>The name of the amenity.</td>
</tr>
<tr>
<td><code>amenityFeature.value</code></td>
<td>The value of the amenity.</td>
</tr>
<tr>
<td><code>priceRange</code></td>
<td>The price range of the campground, for example $$$.</td>
</tr>
<tr>
<td><code>rating</code></td>
<td>The average rating of the campground based on multiple ratings or reviews.</td>
</tr>
<tr>
<td><code>rating.ratingValue</code></td>
<td>The rating for the content.</td>
</tr>
<tr>
<td><code>rating.ratingCount</code></td>
<td>The count of total number of ratings.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<h3>Recipe</h3>
<pre><code class="language-jsx">import { RecipeJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Recipe JSON-LD</h1>
<RecipeJsonLd
name="Party Coffee Cake"
description="This coffee cake is awesome and perfect for parties."
datePublished="2018-03-10"
authorName={['Jane Blogs', 'Mary Stone']}
prepTime="PT20M"
cookTime="PT30M"
totalTime="PT50M"
keywords="cake for a party, coffee"
yields="10"
category="Dessert"
cuisine="American"
calories={270}
images={[
'https://example.com/photos/1x1/photo.jpg',
'https://example.com/photos/4x3/photo.jpg',
'https://example.com/photos/16x9/photo.jpg',
]}
ingredients={[
'2 cups of flour',
'3/4 cup white sugar',
'2 teaspoons baking powder',
'1/2 teaspoon salt',
'1/2 cup butter',
'2 eggs',
'3/4 cup milk',
]}
instructions={[
{
name: 'Preheat',
text: 'Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan.',
url: 'https://example.com/party-coffee-cake#step1',
image: 'https://example.com/photos/party-coffee-cake/step1.jpg',
},
]}
aggregateRating={{
ratingValue: '5',
ratingCount: '18',
}}
video={{
name: 'How to make a Party Coffee Cake',
description: 'This is how you make a Party Coffee Cake.',
contentUrl: 'http://www.example.com/video123.mp4',
embedUrl: 'http://www.example.com/videoplayer?video=123',
uploadDate: '2018-02-05T08:00:00+08:00',
duration: 'PT1M33S',
thumbnailUrls: [
'https://example.com/photos/1x1/photo.jpg',
'https://example.com/photos/4x3/photo.jpg',
'https://example.com/photos/16x9/photo.jpg',
],
expires: '2019-02-05T08:00:00+08:00',
hasPart: {
'@type': 'Clip',
name: 'Preheat oven',
startOffset: 30,
url: 'http://www.example.com/example?t=30',
},
watchCount: 2347,
publication: {
'@type': 'BroadcastEvent',
isLiveBroadcast: true,
startDate: '2020-10-24T14:00:00+00:00',
endDate: '2020-10-24T14:37:14+00:00',
},
regionsAllowed: ['IT', 'NL'],
}}
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>name</code></td>
<td>The name of the recipe</td>
</tr>
<tr>
<td><code>description</code></td>
<td>A description of the recipe</td>
</tr>
<tr>
<td><code>authorName</code></td>
<td>The name of the recipe author. Can be a string or array of strings.</td>
</tr>
<tr>
<td><code>ingredients</code></td>
<td>A list of ingredient strings</td>
</tr>
<tr>
<td><code>instructions</code></td>
<td>-</td>
</tr>
<tr>
<td><code>instructions.name</code></td>
<td>The name of the instruction step.</td>
</tr>
<tr>
<td><code>instructions.text</code></td>
<td>The directions of the instruction step.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<h3>Sitelinks Search Box</h3>
<pre><code class="language-jsx">import { SiteLinksSearchBoxJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Sitelinks Search Box JSON-LD</h1>
<SiteLinksSearchBoxJsonLd
url="https://www.example.com"
potentialActions={[
{
target: 'https://query.example.com/search?q',
queryInput: 'search_term_string',
},
{
target: 'android-app://com.example/https/query.example.com/search/?q',
queryInput: 'search_term_string',
},
]}
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>url</code></td>
<td>URL of the website associated with the sitelinks searchbox</td>
</tr>
<tr>
<td><code>potentialActions</code></td>
<td>Array of one or two SearchAction objects. Describes the URI to send the query to, and the syntax of the request that is sent</td>
</tr>
<tr>
<td><code>potentialActions.target</code></td>
<td>For websites, the URL of the handler that should receive and handle the search query; for apps, the URI of the intent handler for your search engine that should handle queries</td>
</tr>
<tr>
<td><code>potentialActions.queryInput</code></td>
<td>Placeholder used in target, gets substituted for user given query</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<p>Read the <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/docs/appearance/structured-data/sitelinks-searchbox">documentation</a></p>
<h3>Course</h3>
<pre><code class="language-jsx">import { CourseJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Course JSON-LD</h1>
<CourseJsonLd
courseName="Course Name"
description="Introductory CS course laying out the basics."
provider={{
name: 'Course Provider',
url: 'https//www.example.com/provider',
}}
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>courseName</code></td>
<td>The title of the course.</td>
</tr>
<tr>
<td><code>description</code></td>
<td>A description of the course. Display limit of 60 characters.</td>
</tr>
<tr>
<td><code>provider.name</code></td>
<td>The course provider name.</td>
</tr>
<tr>
<td><code>provider.url</code></td>
<td>The course provider name url.</td>
</tr>
</tbody>
</table>
<p><strong>Recommended properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>providerUrl</code></td>
<td>The url to the course provider.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<h3>Dataset</h3>
<pre><code class="language-jsx">import { DatasetJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Dataset JSON-LD</h1>
<DatasetJsonLd
description="The description needs to be at least 50 characters long"
name="name of the dataset"
license="https//www.example.com"
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>description</code></td>
<td>A short summary describing a dataset. Needs to be between 50 and 5000 characters.</td>
</tr>
<tr>
<td><code>name</code></td>
<td>A license under which the dataset is distributed.</td>
</tr>
</tbody>
</table>
<p><strong>Recommended properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>license</code></td>
<td>The url to the course provider.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<h3>Corporate Contact</h3>
<pre><code class="language-jsx">import { CorporateContactJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Corporate Contact JSON-LD</h1>
<CorporateContactJsonLd
url="http://www.your-company-site.com"
logo="http://www.example.com/logo.png"
contactPoint={[
{
telephone: '+1-401-555-1212',
contactType: 'customer service',
email: 'customerservice@email.com',
areaServed: 'US',
availableLanguage: ['English', 'Spanish', 'French'],
},
{
telephone: '+1-877-746-0909',
contactType: 'customer service',
email: 'servicecustomer@email.com',
contactOption: 'TollFree',
availableLanguage: 'English',
},
{
telephone: '+1-877-453-1304',
contactType: 'technical support',
contactOption: 'TollFree',
areaServed: ['US', 'CA'],
availableLanguage: ['English', 'French'],
},
]}
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>url</code></td>
<td>Url to the home page of the company's official site.</td>
</tr>
<tr>
<td><code>contactPoint</code></td>
<td></td>
</tr>
<tr>
<td><code>contactPoint.telephone</code></td>
<td>An internationalized version of the phone number, starting with the "+" symbol and country code</td>
</tr>
<tr>
<td><code>contactPoint.contactType</code></td>
<td>Description of the purpose of the phone number i.e. <code>Technical Support</code>.</td>
</tr>
</tbody>
</table>
<p><strong>Recommended ContactPoint properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>contactPoint.areaServed</code></td>
<td><code>String</code> or <code>Array</code> of geographical regions served by the business. Example <code>"US"</code> or <code>["US", "CA", "MX"]</code></td>
</tr>
<tr>
<td><code>contactPoint.availableLanguage</code></td>
<td>Details about the language spoken. Example <code>"English"</code> or <code>["English", "French"]</code></td>
</tr>
<tr>
<td><code>contactPoint.email</code></td>
<td>Email asscosiated with the business`</td>
</tr>
<tr>
<td><code>gecontactPointo.contactOption</code></td>
<td>Details about the phone number. Example <code>"TollFree"</code></td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<h3>FAQ Page</h3>
<pre><code class="language-jsx">import { FAQPageJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>FAQ Page JSON-LD</h1>
<FAQPageJsonLd
mainEntity={[
{
questionName: 'How long is the delivery time?',
acceptedAnswerText: '3-5 business days.',
},
{
questionName: 'Where can I find information about product recalls?',
acceptedAnswerText: 'Read more on under information.',
},
]}
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mainEntity</code></td>
<td></td>
</tr>
<tr>
<td><code>mainEntity.questionName</code></td>
<td>The full text of the question. For example, "How long is the delivery time?".</td>
</tr>
<tr>
<td><code>mainEntity.acceptedAnswerText</code></td>
<td>The full answer to the question.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<h3>How-to</h3>
<pre><code class="language-jsx">import { HowToJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>How-to JSON-LD</h1>
<HowToJsonLd
name="How to tile a kitchen backsplash"
image="https://example.com/photos/1x1/photo.jpg"
estimatedCost={{ currency: 'USD', value: '100' }}
supply={['tiles', 'thin-set', 'mortar', 'tile grout', 'grout sealer']}
tool={['notched trowel', 'bucket', 'large sponge']}
step={[
{
url: 'https://example.com/kitchen#step1',
name: 'Prepare the surfaces',
itemListElement: [
{
type: 'HowToTip',
text: 'Turn off the power to the kitchen and then remove everything that is on the wall, such as outlet covers, switchplates, and any other item in the area that is to be tiled.',
},
{
type: 'HowToDirection',
text: 'Then clean the surface thoroughly to remove any grease or other debris and tape off the area.',
},
],
image: 'https://example.com/photos/1x1/photo-step1.jpg',
},
]}
totalTime="P2D"
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>name</code></td>
<td>Name of the HowTo</td>
</tr>
<tr>
<td><code>step</code></td>
<td>An array of HowToStep elements which comprise the full instructions of the how-to.</td>
</tr>
</tbody>
</table>
<p><strong>Supported properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>estimatedCost</code></td>
<td>The estimated cost of the supplies consumed when performing instructions.</td>
</tr>
<tr>
<td><code>image</code></td>
<td>Image of the completed how-to.</td>
</tr>
<tr>
<td><code>supply</code></td>
<td>A supply consumed when performing instructions or a direction.</td>
</tr>
<tr>
<td><code>tool</code></td>
<td>An object used (but not consumed) when performing instructions or a direction.</td>
</tr>
<tr>
<td><code>totalTime</code></td>
<td>The total time required to perform all instructions or directions (including time to prepare the supplies), in ISO 8601 duration format.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<h3>Job Posting</h3>
<pre><code class="language-jsx">import { JobPostingJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Job Posting JSON-LD</h1>
<JobPostingJsonLd
datePosted="2020-01-06T03:37:40Z"
description="Company is looking for a software developer...."
hiringOrganization={{
name: 'company name',
sameAs: 'www.company-website-url.dev',
}}
jobLocation={{
streetAddress: '17 street address',
addressLocality: 'Paris',
addressRegion: 'Ile-de-France',
postalCode: '75001',
addressCountry: 'France',
}}
title="Job Title"
baseSalary={{
currency: 'EUR',
value: 40, // Can also be a salary range, like [40, 50]
unitText: 'HOUR',
}}
employmentType="FULL_TIME"
jobLocationType="TELECOMMUTE"
validThrough="2020-01-06"
applicantLocationRequirements="FR"
experienceRequirements={{
occupational: {
minimumMonthsOfExperience: 12,
},
educational: {
credentialCategory: 'high school',
},
experienceInPlaceOfEducation: true,
}}
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>datePosted</code></td>
<td>The original date that employer posted the job in ISO 8601 format</td>
</tr>
<tr>
<td><code>description</code></td>
<td>The full description of the job in HTML format</td>
</tr>
<tr>
<td><code>hiringOrganization</code></td>
<td>An object containing information about the company hiring with the following fields or the string <code>'confidential'</code> when hiring anonymously</td>
</tr>
<tr>
<td><code>hiringOrganization.name</code></td>
<td>Name of the company offering the job position</td>
</tr>
<tr>
<td><code>hiringOrganization.sameAs</code></td>
<td>URL of a reference Web page</td>
</tr>
<tr>
<td><code>title</code></td>
<td>The title of the job (not the title of the posting)</td>
</tr>
<tr>
<td><code>validThrough</code></td>
<td>The date when the job posting will expire in <a rel="noreferrer nofollow" target="_blank" href="https://en.wikipedia.org/wiki/ISO_8601">ISO 8601 format</a></td>
</tr>
</tbody>
</table>
<p><strong>Supported properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>applicantLocationRequirements</code></td>
<td>The geographic location(s) in which employees may be located for to be eligible for the remote job</td>
</tr>
<tr>
<td><code>baseSalary</code></td>
<td></td>
</tr>
<tr>
<td><code>baseSalary.currency</code></td>
<td>The currency in which the monetary amount is expressed</td>
</tr>
<tr>
<td><code>baseSalary.value</code></td>
<td>The value of the quantitative value. You can also provide an array of minimum and maximum salaries. .</td>
</tr>
<tr>
<td><code>baseSalary.unitText</code></td>
<td>A string indicating the unit of measurement <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/docs/data-types/job-posting#basesalary">Base salary guideline</a></td>
</tr>
<tr>
<td><code>employmentType</code></td>
<td>Type of employment <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/docs/data-types/job-posting#basesalary">Employement type guideline</a></td>
</tr>
<tr>
<td><code>jobLocation</code></td>
<td>The physical location(s) of the business where the employee will report to work (such as an office or worksite), not the location where the job was posted.</td>
</tr>
<tr>
<td><code>jobLocation.streetAddress</code></td>
<td>The street address. For example, 1600 Amphitheatre Pkwy</td>
</tr>
<tr>
<td><code>jobLocation.addressLocality</code></td>
<td>The locality. For example, Mountain View.</td>
</tr>
<tr>
<td><code>jobLocation.addressRegion</code></td>
<td>The region. For example, CA.</td>
</tr>
<tr>
<td><code>jobLocation.postalCode</code></td>
<td>The postal code. For example, 94043</td>
</tr>
<tr>
<td><code>jobLocation.addressCountry</code></td>
<td>The country. For example, USA. You can also provide the two-letter ISO 3166-1 alpha-2 country code.</td>
</tr>
<tr>
<td><code>jobLocationType</code></td>
<td>A description of the job location <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/docs/data-types/job-posting#job-location-type">Job Location type guideline</a></td>
</tr>
<tr>
<td><code>hiringOrganization.logo</code></td>
<td>Logos on third-party job sites <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/docs/data-types/job-posting#hiring">Hiring Organization guideline</a></td>
</tr>
<tr>
<td><code>experienceRequirements.occupational.minimumMonthsOfExperience</code></td>
<td>The minimum number of months of experience that are required for the job posting. <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/docs/appearance/structured-data/job-posting#education-and-experience-properties-beta">Experience and Education Requirements</a></td>
</tr>
<tr>
<td><code>experienceRequirements.educational.credentialCategory</code></td>
<td>The level of education that's required for the job posting. Use one of the following: <code>high school</code>, <code>associate degree</code>, <code>bachelor degree</code>, <code>professional certificate</code>, <code>postgraduate degree</code></td>
</tr>
<tr>
<td><code>experienceRequirements.experienceInPlaceOfEducation</code></td>
<td>Boolean: If set to true, this property indicates whether a job posting will accept experience in place of its formal educational qualifications. If set to true, you must include both the experienceRequirements and educationRequirements properties.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<h3>Local Business</h3>
<p>Local business is supported with a sub-set of properties.</p>
<pre><code class="language-jsx"><LocalBusinessJsonLd
type="Store"
id="http://davesdeptstore.example.com"
name="Dave's Department Store"
description="Dave's latest department store in San Jose, now open"
url="http://www.example.com/store-locator/sl/San-Jose-Westgate-Store/1427"
telephone="+14088717984"
address={{
streetAddress: '1600 Saratoga Ave',
addressLocality: 'San Jose',
addressRegion: 'CA',
postalCode: '95129',
addressCountry: 'US',
}}
geo={{
latitude: '37.293058',
longitude: '-121.988331',
}}
images={[
'https://example.com/photos/1x1/photo.jpg',
'https://example.com/photos/4x3/photo.jpg',
'https://example.com/photos/16x9/photo.jpg',
]}
sameAs={[
'www.company-website-url1.dev',
'www.company-website-url2.dev',
'www.company-website-url3.dev',
]}
openingHours={[
{
opens: '08:00',
closes: '23:59',
dayOfWeek: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
],
validFrom: '2019-12-23',
validThrough: '2020-04-02',
},
{
opens: '14:00',
closes: '20:00',
dayOfWeek: 'Sunday',
validFrom: '2019-12-23',
validThrough: '2020-04-02',
},
]}
rating={{
ratingValue: '4.5',
ratingCount: '2',
}}
review={[
{
author: 'John Doe',
datePublished: '2006-05-04',
name: 'A masterpiece of literature',
reviewBody:
'I really enjoyed this book. It captures the essential challenge people face as they try make sense of their lives and grow to adulthood.',
reviewRating: {
bestRating: '5',
worstRating: '1',
reviewAspect: 'Ambiance',
ratingValue: '4',
},
},
{
author: 'Bob Smith',
datePublished: '2006-06-15',
name: 'A good read.',
reviewBody: "Catcher in the Rye is a fun book. It's a good book to read.",
reviewRating: {
ratingValue: '4',
},
},
]}
makesOffer={[
{
priceSpecification: {
type: 'UnitPriceSpecification',
priceCurrency: 'EUR',
price: '1000-10000',
},
itemOffered: {
name: 'Motion Design Services',
description:
'We are the expert of animation and motion design productions.',
},
},
{
priceSpecification: {
type: 'UnitPriceSpecification',
priceCurrency: 'EUR',
price: '2000-10000',
},
itemOffered: {
name: 'Branding Services',
description:
'Real footage is a powerful tool when it comes to show what the business is about. Can be used to present your company, show your factory, promote a product packshot, or just tell any story. It can help create emotional links with your audience by showing punchy images.',
},
},
]}
areaServed={[
{
geoMidpoint: {
latitude: '41.108237',
longitude: '-80.642982',
},
geoRadius: '1000',
},
{
geoMidpoint: {
latitude: '51.108237',
longitude: '-80.642982',
},
geoRadius: '1000',
},
]}
action={{
actionName: 'potentialAction',
actionType: 'ReviewAction',
target: 'https://www.example.com/review/this/business',
}}
/></code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@id</code></td>
<td>Globally unique ID of the specific business location in the form of a URL.</td>
</tr>
<tr>
<td><code>type</code></td>
<td>LocalBusiness or any sub-type</td>
</tr>
<tr>
<td><code>address</code></td>
<td>Address of the specific business location</td>
</tr>
<tr>
<td><code>address.addressCountry</code></td>
<td>The 2-letter ISO 3166-1 alpha-2 country code</td>
</tr>
<tr>
<td><code>address.addressLocality</code></td>
<td>City</td>
</tr>
<tr>
<td><code>address.addressRegion</code></td>
<td>State or province, if applicable.</td>
</tr>
<tr>
<td><code>address.postalCode</code></td>
<td>Postal or zip code.</td>
</tr>
<tr>
<td><code>address.streetAddress</code></td>
<td>Street number, street name, and unit number.</td>
</tr>
<tr>
<td><code>name</code></td>
<td>Business name.</td>
</tr>
</tbody>
</table>
<p><strong>Supported properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>description</code></td>
<td>Description of the business location</td>
</tr>
<tr>
<td><code>geo</code></td>
<td>Geographic coordinates of the business.</td>
</tr>
<tr>
<td><code>geo.latitude</code></td>
<td>The latitude of the business location</td>
</tr>
<tr>
<td><code>geo.longitude</code></td>
<td>The longitude of the business location</td>
</tr>
<tr>
<td><code>rating</code></td>
<td>The average rating of business based on multiple ratings or reviews.</td>
</tr>
<tr>
<td><code>rating.ratingValue</code></td>
<td>The rating for the content.</td>
</tr>
<tr>
<td><code>rating.ratingCount</code></td>
<td>The count of total number of ratings.</td>
</tr>
<tr>
<td><code>priceRange</code></td>
<td>The relative price range of the business.</td>
</tr>
<tr>
<td><code>servesCuisine</code></td>
<td>The type of cuisine the restaurant serves.</td>
</tr>
<tr>
<td><code>images</code></td>
<td>An image or images of the business. Required for valid markup depending on the type</td>
</tr>
<tr>
<td><code>telephone</code></td>
<td>A business phone number meant to be the primary contact method for customers.</td>
</tr>
<tr>
<td><code>url</code></td>
<td>The fully-qualified URL of the specific business location.</td>
</tr>
<tr>
<td><code>sameAs</code></td>
<td>An array of URLs that represent this business</td>
</tr>
<tr>
<td><code>openingHours</code></td>
<td>Opening hour specification of business. You can provide this as a single object, or an array of objects with the properties below.</td>
</tr>
<tr>
<td><code>openingHours.opens</code></td>
<td>The opening hour of the place or service on the given day(s) of the week.</td>
</tr>
<tr>
<td><code>openingHours.closes</code></td>
<td>The closing hour of the place or service on the given day(s) of the week.</td>
</tr>
<tr>
<td><code>openingHours.dayOfWeek</code></td>
<td>The day of the week for which these opening hours are valid. Can be a string or array of strings. Refer to <a rel="noreferrer nofollow" target="_blank" href="https://schema.org/DayOfWeek">DayOfWeek</a></td>
</tr>
<tr>
<td><code>openingHours.validFrom</code></td>
<td>The date when the item becomes valid.</td>
</tr>
<tr>
<td><code>openingHours.validThrough</code></td>
<td>The date after when the item is not valid.</td>
</tr>
<tr>
<td><code>review</code></td>
<td>A review of the local business.</td>
</tr>
<tr>
<td><code>review.author</code></td>
<td>The author of this content or rating.</td>
</tr>
<tr>
<td><code>review.reviewBody</code></td>
<td>The actual body of the review.</td>
</tr>
<tr>
<td><code>review.datePublished</code></td>
<td>Date of first broadcast/publication.</td>
</tr>
<tr>
<td><code>review.name</code></td>
<td>The name of the item.</td>
</tr>
<tr>
<td><code>review.rating</code></td>
<td>The rating given in this review</td>
</tr>
<tr>
<td><code>review.rating.ratingValue</code></td>
<td>The rating for the content.</td>
</tr>
<tr>
<td><code>review.rating.reviewAspect</code></td>
<td>This Review or Rating is relevant to this part or facet of the itemReviewed.</td>
</tr>
<tr>
<td><code>review.rating.worstRating</code></td>
<td>The lowest value allowed in this rating system. If worstRating is omitted, 1 is assumed.</td>
</tr>
<tr>
<td><code>review.rating.bestRating</code></td>
<td>The highest value allowed in this rating system. If bestRating is omitted, 5 is assumed</td>
</tr>
<tr>
<td><code>areasServed</code></td>
<td>The geographic area where a service or offered item is provided.</td>
</tr>
<tr>
<td><code>areasServed.GeoCircle</code></td>
<td>A GeoCircle is a GeoShape representing a circular geographic area.</td>
</tr>
<tr>
<td><code>areasServed.GeoCircle.geoMidpoint</code></td>
<td>Indicates the GeoCoordinates at the centre of a GeoShape e.g. GeoCircle.</td>
</tr>
<tr>
<td><code>areasServed.GeoCircle.geoMidpoint.latitude</code></td>
<td>The latitude of a location. For example 37.42242</td>
</tr>
<tr>
<td><code>areasServed.GeoCircle.geoMidpoint.longitude</code></td>
<td>The name of the item.</td>
</tr>
<tr>
<td><code>areasServed.GeoCircle.geoRadius</code></td>
<td>Indicates the approximate radius of a GeoCircle (metres unless indicated otherwise via Distance notation).</td>
</tr>
<tr>
<td><code>makesOffer</code></td>
<td>A pointer to products or services offered by the organization or person.</td>
</tr>
<tr>
<td><code>makesOffer.offer</code></td>
<td>An offer to transfer some rights to an item or to provide a service</td>
</tr>
<tr>
<td><code>makesOffer.offer.priceSpecification</code></td>
<td>One or more detailed price specifications, indicating the unit price and delivery or payment charges.</td>
</tr>
<tr>
<td><code>makesOffer.offer.priceSpecification.priceCurrency</code></td>
<td>The currency of the price, or a price component when attached to PriceSpecification and its subtypes.</td>
</tr>
<tr>
<td><code>makesOffer.offer.priceSpecification.price</code></td>
<td>The offer price of a product, or of a price component when attached to PriceSpecification and its subtypes.</td>
</tr>
<tr>
<td><code>makesOffer.offer.itemOffered</code></td>
<td>An item being offered (or demanded)</td>
</tr>
<tr>
<td><code>makesOffer.offer.itemOffered.name</code></td>
<td>The name of the item</td>
</tr>
<tr>
<td><code>makesOffer.offer.itemOffered.description</code></td>
<td>The description of the item.</td>
</tr>
<tr>
<td><code>action</code></td>
<td>An action performed by a direct agent and indirect participants upon a direct object.</td>
</tr>
<tr>
<td><code>action.target</code></td>
<td>Indicates a target EntryPoint for an Action.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<p><strong>NOTE:</strong></p>
<p>Images are recommended for most of the types that you can use for <code>LocalBusiness</code>; if in doubt, you should add an image. You can check your generated JSON over at Google's <a rel="noreferrer nofollow" target="_blank" href="https://search.google.com/structured-data/testing-tool">Structured Data Testing Tool</a></p>
<h3>Logo</h3>
<pre><code class="language-jsx">import { LogoJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Logo JSON-LD</h1>
<LogoJsonLd
logo="http://www.your-site.com/images/logo.jpg"
url="http://www.your-site.com"
/>
</>
);
export default Page;</code></pre>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>url</code></td>
<td>The URL of the website associated with the logo. <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/docs/data-types/logo#definitions">Logo guidelines</a></td>
</tr>
<tr>
<td><code>logo</code></td>
<td>URL of a logo that is representative of the organization.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<h3>Product</h3>
<pre><code class="language-jsx">import { ProductJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Product JSON-LD</h1>
<ProductJsonLd
productName="Executive Anvil"
images={[
'https://example.com/photos/1x1/photo.jpg',
'https://example.com/photos/4x3/photo.jpg',
'https://example.com/photos/16x9/photo.jpg',
]}
description="Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height."
brand="ACME"
color="blue"
manufacturerName="Gary Meehan"
manufacturerLogo="https://www.example.com/photos/logo.jpg"
material="steel"
slogan="For the business traveller looking for something to drop from a height."
disambiguatingDescription="Executive Anvil, perfect for the business traveller."
releaseDate="2014-02-05T08:00:00+08:00"
productionDate="2015-02-05T08:00:00+08:00"
purchaseDate="2015-02-06T08:00:00+08:00"
award="Best Executive Anvil Award."
reviews={[
{
author: 'Jim',
datePublished: '2017-01-06T03:37:40Z',
reviewBody:
'This is my favorite product yet! Thanks Nate for the example products and reviews.',
name: 'So awesome!!!',
reviewRating: {
bestRating: '5',
ratingValue: '5',
worstRating: '1',
},
publisher: {
type: 'Organization',
name: 'TwoVit',
},
},
]}
aggregateRating={{
ratingValue: '4.4',
reviewCount: '89',
}}
offers={[
{
price: '119.99',
priceCurrency: 'USD',
priceValidUntil: '2020-11-05',
itemCondition: 'https://schema.org/UsedCondition',
availability: 'https://schema.org/InStock',
url: 'https://www.example.com/executive-anvil',
seller: {
name: 'Executive Objects',
},
},
{
price: '139.99',
priceCurrency: 'CAD',
priceValidUntil: '2020-09-05',
itemCondition: 'https://schema.org/UsedCondition',
availability: 'https://schema.org/InStock',
url: 'https://www.example.ca/executive-anvil',
seller: {
name: 'Executive Objects',
},
},
]}
mpn="925872"
/>
</>
);
export default Page;</code></pre>
<p>Also available: <code>sku</code>, <code>gtin8</code>, <code>gtin13</code>, <code>gtin14</code>.</p>
<p>Valid values for <code>offers.itemCondition</code>:</p>
<ul>
<li><a rel="noreferrer nofollow" target="_blank" href="https://schema.org/DamagedCondition">https://schema.org/DamagedCondition</a></li>
<li><a rel="noreferrer nofollow" target="_blank" href="https://schema.org/NewCondition">https://schema.org/NewCondition</a></li>
<li><a rel="noreferrer nofollow" target="_blank" href="https://schema.org/RefurbishedCondition">https://schema.org/RefurbishedCondition</a></li>
<li><a rel="noreferrer nofollow" target="_blank" href="https://schema.org/UsedCondition">https://schema.org/UsedCondition</a></li>
</ul>
<p>Valid values for <code>offers.availability</code>:</p>
<ul>
<li><a rel="noreferrer nofollow" target="_blank" href="https://schema.org/Discontinued">https://schema.org/Discontinued</a></li>
<li><a rel="noreferrer nofollow" target="_blank" href="https://schema.org/InStock">https://schema.org/InStock</a></li>
<li><a rel="noreferrer nofollow" target="_blank" href="https://schema.org/InStoreOnly">https://schema.org/InStoreOnly</a></li>
<li><a rel="noreferrer nofollow" target="_blank" href="https://schema.org/LimitedAvailability">https://schema.org/LimitedAvailability</a></li>
<li><a rel="noreferrer nofollow" target="_blank" href="https://schema.org/OnlineOnly">https://schema.org/OnlineOnly</a></li>
<li><a rel="noreferrer nofollow" target="_blank" href="https://schema.org/OutOfStock">https://schema.org/OutOfStock</a></li>
<li><a rel="noreferrer nofollow" target="_blank" href="https://schema.org/PreOrder">https://schema.org/PreOrder</a></li>
<li><a rel="noreferrer nofollow" target="_blank" href="https://schema.org/PreSale">https://schema.org/PreSale</a></li>
<li><a rel="noreferrer nofollow" target="_blank" href="https://schema.org/SoldOut">https://schema.org/SoldOut</a></li>
</ul>
<p>The property <code>aggregateOffer</code> is also available:
(It is ignored if <code>offers</code> is set)</p>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>lowPrice</code></td>
<td>The lowest price of all offers available. Use a floating point number.</td>
</tr>
<tr>
<td><code>priceCurrency</code></td>
<td>The currency used to describe the product price, in three-letter ISO 4217 format.</td>
</tr>
</tbody>
</table>
<p><strong>Recommended properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>highPrice</code></td>
<td>The highest price of all offers available. Use a floating point number.</td>
</tr>
<tr>
<td><code>offerCount</code></td>
<td>The number of offers for the product.</td>
</tr>
<tr>
<td><code>offers</code></td>
<td>An offer to transfer some rights to an item or to provide a service. You can provide this as a single object, or an array of objects with the properties below.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<p>More info on the product data type can be found <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/docs/data-types/product">here</a>.</p>
<h3>Social Profile</h3>
<pre><code class="language-jsx">import { SocialProfileJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Social Profile JSON-LD</h1>
<SocialProfileJsonLd
type="Person"
name="your name"
url="http://www.your-site.com"
sameAs={[
'http://www.facebook.com/your-profile',
'http://instagram.com/yourProfile',
'http://www.linkedin.com/in/yourprofile',
'http://plus.google.com/your_profile',
]}
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>type</code></td>
<td>Person or Organization</td>
</tr>
<tr>
<td><code>name</code></td>
<td>The name of the person or organization</td>
</tr>
<tr>
<td><code>url</code></td>
<td>The URL for the person's or organization's official website.</td>
</tr>
<tr>
<td><code>sameAs</code></td>
<td>An array of URLs for the person's or organization's official social media profile page(s)</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<p><strong>Google Supported Social Profiles</strong></p>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Google+</li>
<li>Instagram</li>
<li>YouTube</li>
<li>LinkedIn</li>
<li>Myspace</li>
<li>Pinterest</li>
<li>SoundCloud</li>
<li>Tumblr</li>
</ul>
<h3>News Article</h3>
<pre><code class="language-jsx">import { NewsArticleJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>News Article JSON-LD</h1>
<NewsArticleJsonLd
url="https://example.com/article"
title="Article headline"
images={[
'https://example.com/photos/1x1/photo.jpg',
'https://example.com/photos/4x3/photo.jpg',
'https://example.com/photos/16x9/photo.jpg',
]}
section="politic"
keywords="prayuth,taksin"
datePublished="2015-02-05T08:00:00+08:00"
dateModified="2015-02-05T09:00:00+08:00"
authorName="Jane Blogs"
publisherName="Gary Meehan"
publisherLogo="https://www.example.com/photos/logo.jpg"
description="This is a mighty good description of this article."
body="This is all text for this news article"
isAccessibleForFree={true}
/>
</>
);
export default Page;</code></pre>
<h3>Park</h3>
<pre><code class="language-jsx">import { ParkJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Park JSON-LD</h1>
<ParkJsonLd
id="https://www.example.com/park/minnewaska-state-park"
name="Minnewaska State Park"
url="https://www.example.com/park"
telephone="+18452550752"
images={['https://example.com/photos/1x1/photo.jpg']}
address={{
streetAddress: '5281 Route 44-55',
addressLocality: 'Kerhonkson',
addressRegion: 'NY',
postalCode: '12446',
addressCountry: 'US',
}}
description="A wonderful description about Minnewaska State Park"
geo={{
latitude: '41.735149',
longitude: '-74.239037',
}}
openingHours={[
{
opens: '09:00',
closes: '18:00',
dayOfWeek: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday',
],
validFrom: '2019-12-23',
validThrough: '2020-04-02',
},
]}
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@id</code></td>
<td>Globally unique ID of the specific park in the form of a URL.</td>
</tr>
<tr>
<td><code>address</code></td>
<td>Address of the specific park location</td>
</tr>
<tr>
<td><code>address.addressCountry</code></td>
<td>The 2-letter ISO 3166-1 alpha-2 country code</td>
</tr>
<tr>
<td><code>address.addressLocality</code></td>
<td>City</td>
</tr>
<tr>
<td><code>address.addressRegion</code></td>
<td>State or province, if applicable.</td>
</tr>
<tr>
<td><code>address.postalCode</code></td>
<td>Postal or zip code.</td>
</tr>
<tr>
<td><code>address.streetAddress</code></td>
<td>Street number, street name, and unit number.</td>
</tr>
<tr>
<td><code>name</code></td>
<td>Park name.</td>
</tr>
<tr>
<td><code>description</code></td>
<td>Park description.</td>
</tr>
</tbody>
</table>
<p><strong>Supported properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>geo</code></td>
<td>Geographic coordinates of the park.</td>
</tr>
<tr>
<td><code>geo.latitude</code></td>
<td>The latitude of the park location</td>
</tr>
<tr>
<td><code>geo.longitude</code></td>
<td>The longitude of the park location</td>
</tr>
<tr>
<td><code>images</code></td>
<td>An image or images of the park. Required for valid markup depending on the type</td>
</tr>
<tr>
<td><code>telephone</code></td>
<td>A business phone number meant to be the primary contact method for customers.</td>
</tr>
<tr>
<td><code>url</code></td>
<td>The fully-qualified URL of the specific park.</td>
</tr>
<tr>
<td><code>openingHours</code></td>
<td>Opening hour specification of the park. You can provide this as a single object, or an array of objects with the properties below.</td>
</tr>
<tr>
<td><code>openingHours.opens</code></td>
<td>The opening hour of the place or service on the given day(s) of the week.</td>
</tr>
<tr>
<td><code>openingHours.closes</code></td>
<td>The closing hour of the place or service on the given day(s) of the week.</td>
</tr>
<tr>
<td><code>openingHours.dayOfWeek</code></td>
<td>The day of the week for which these opening hours are valid. Can be a string or array of strings. Refer to <a rel="noreferrer nofollow" target="_blank" href="https://schema.org/DayOfWeek">DayOfWeek</a></td>
</tr>
<tr>
<td><code>openingHours.validFrom</code></td>
<td>The date when the item becomes valid.</td>
</tr>
<tr>
<td><code>openingHours.validThrough</code></td>
<td>The date after when the item is not valid.</td>
</tr>
<tr>
<td><code>isAccessibleForFree</code></td>
<td>Whether or not the park is accessible for free.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside oft the app directory. |</p>
<p><a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/docs/data-types/social-profile">Google Docs for Social Profile</a></p>
<h3>Video</h3>
<pre><code class="language-jsx">import { VideoJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Video JSON-LD</h1>
<VideoJsonLd
name="How to make a Party Coffee Cake"
description="This is how you make a Party Coffee Cake."
contentUrl="http://www.example.com/video123.mp4"
embedUrl="http://www.example.com/videoplayer?video=123"
uploadDate="2018-02-05T08:00:00+08:00"
duration="PT1M33S"
thumbnailUrls={[
'https://example.com/photos/1x1/photo.jpg',
'https://example.com/photos/4x3/photo.jpg',
'https://example.com/photos/16x9/photo.jpg',
]}
expires="2019-02-05T08:00:00+08:00"
hasPart={{
name: 'Preheat oven',
startOffset: 30,
url: 'http://www.example.com/example?t=30',
}}
watchCount={2347}
publication={{
isLiveBroadcast: true,
startDate: '2020-10-24T14:00:00+00:00',
endDate: '2020-10-24T14:37:14+00:00',
}}
regionsAllowed={['IT', 'NL']}
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>name</code></td>
<td>The title of the video.</td>
</tr>
<tr>
<td><code>description</code></td>
<td>The description of the video. HTML tags are ignored.</td>
</tr>
<tr>
<td><code>thumbnailUrl</code></td>
<td>A URL pointing to the video thumbnail image file.</td>
</tr>
<tr>
<td><code>uploadDate</code></td>
<td>The date the video was first published, in ISO 8601 format.</td>
</tr>
</tbody>
</table>
<p><strong>Recommended properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>contentUrl</code></td>
<td>A URL pointing to the actual video media file, in one of the supported encoding formats.</td>
</tr>
<tr>
<td><code>duration</code></td>
<td>The duration of the video in ISO 8601 format</td>
</tr>
<tr>
<td><code>embedUrl</code></td>
<td>A URL pointing to a player for the specific video.</td>
</tr>
<tr>
<td><code>expires</code></td>
<td>If applicable, the date after which the video will no longer be available.</td>
</tr>
<tr>
<td><code>interactionStatistic</code></td>
<td>The number of times the video has been watched.</td>
</tr>
<tr>
<td><code>publication</code></td>
<td>If your video is happening live and you want to be eligible for the LIVE badge.</td>
</tr>
<tr>
<td><code>regionsAllowed</code></td>
<td>The regions where the video is allowed.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<h3>VideoGame</h3>
<pre><code class="language-jsx">import { VideoGameJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>VideoGame JSON-LD</h1>
<VideoGameJsonLd
name="Red Dead Redemption 2"
translatorName={['Translator 1', 'Translator 2']}
languageName={['English', 'Kurdish']}
description="Arthur Morgan and the Van der Linde gang are outlaws on the run. With federal agents and the best bounty hunters in the nation massing on their heels, the gang must rob, steal and fight their way across the rugged heartland of America in order to survive."
processorRequirements="4 GHz"
memoryRequirements="16 Gb"
playMode="SinglePlayer"
applicationCategory="Game"
url="https://example.com/rdr2-game"
platformName={['PC game', 'PlayStation 4']}
operatingSystemName="windows"
keywords="outlaw, gang, federal agents"
datePublished="2019-02-05T08:00:00+08:00"
image="https://example.com/photos/1x1/photo.jpg"
publisherName="Vertical Games"
producerName="Rockstar Games"
producerUrl="https//www.example.com/producer"
offers={[
{
price: '119.99',
priceCurrency: 'USD',
priceValidUntil: '2020-11-05',
availability: 'https://schema.org/InStock',
url: 'https://example.net/rdr2-game',
seller: {
name: 'Executive Gaming',
},
},
{
price: '139.99',
priceCurrency: 'CAD',
priceValidUntil: '2020-09-05',
availability: 'https://schema.org/InStock',
url: 'https://example.org/rdr2-game',
seller: {
name: 'Executive Gaming',
},
},
]}
aggregateRating={{
ratingValue: '44',
reviewCount: '89',
ratingCount: '684',
bestRating: '100',
worstRating: '1',
}}
reviews={[
{
author: {
type: 'Person',
name: 'AhmetKaya',
},
publisher: {
type: 'Organization',
name: 'Gam Production',
},
datePublished: '2017-01-06T03:37:40Z',
reviewBody: 'Iki gozum.',
name: 'Rica ederim.',
reviewRating: {
bestRating: '5',
ratingValue: '5',
worstRating: '1',
},
},
]}
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>name</code></td>
<td>The title of the video game.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<p><a rel="noreferrer nofollow" target="_blank" href="https://schema.org/VideoGame">More information about the schema</a></p>
<h3>Event</h3>
<pre><code class="language-jsx">import { EventJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Event JSON-LD</h1>
<EventJsonLd
name="My Event"
startDate="2020-01-23T00:00:00.000Z"
endDate="2020-01-24T00:00:00.000Z"
location={{
name: 'My Place',
sameAs: 'https://example.com/my-place',
address: {
streetAddress: '1600 Saratoga Ave',
addressLocality: 'San Jose',
addressRegion: 'CA',
postalCode: '95129',
addressCountry: 'US',
},
}}
url="https://example.com/my-event"
images={['https://example.com/photos/photo.jpg']}
description="My event @ my place"
offers={[
{
price: '119.99',
priceCurrency: 'USD',
priceValidUntil: '2020-11-05',
itemCondition: 'https://schema.org/UsedCondition',
availability: 'https://schema.org/InStock',
url: 'https://www.example.com/executive-anvil',
seller: {
name: 'John Doe',
},
validFrom: '2020-11-01T00:00:00.000Z',
},
{
price: '139.99',
priceCurrency: 'CAD',
priceValidUntil: '2020-09-05',
itemCondition: 'https://schema.org/UsedCondition',
availability: 'https://schema.org/InStock',
url: 'https://www.example.ca/executive-anvil',
seller: {
name: 'John Doe Sr.',
},
validFrom: '2020-08-05T00:00:00.000Z',
},
]}
performers={[
{
name: 'Adele',
},
{
name: 'Kira and Morrison',
},
]}
organizer={{
type: 'Organization',
name: 'Unnamed organization',
url: 'https://www.unnamed.com',
}}
eventStatus="EventScheduled"
eventAttendanceMode="OfflineEventAttendanceMode"
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>name</code></td>
<td>The name of the event</td>
</tr>
<tr>
<td><code>startDate</code></td>
<td>The start date time of the event in iso8601 format</td>
</tr>
<tr>
<td><code>endDate</code></td>
<td>The end date time of the event in iso8601 format</td>
</tr>
<tr>
<td><code>location</code></td>
<td>Location of the event, can be <code>Place</code> or <code>VirtualLocation</code></td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<p><strong><code>Place</code> type</strong>
Requires <code>address</code> property and <code>name</code>.</p>
<p><strong><code>VirtualLocation</code> type</strong>
Requires <code>url</code> property, doesn't require <code>name</code>.</p>
<p><strong>Supported properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>description</code></td>
<td>Description of the event</td>
</tr>
<tr>
<td><code>location.name</code></td>
<td>Name of the location</td>
</tr>
<tr>
<td><code>location.sameAs</code></td>
<td>URL of a reference web page that identifies location</td>
</tr>
<tr>
<td><code>images</code></td>
<td>An image or images of the event.</td>
</tr>
<tr>
<td><code>url</code></td>
<td>The fully-qualified URL of the event.</td>
</tr>
<tr>
<td><code>offers</code></td>
<td>An offer to transfer some rights to an item or to provide a service. You can provide this as a single object, or an array of objects with the properties below.</td>
</tr>
<tr>
<td><code>performers</code></td>
<td>All artists that perform at this event. You can provide this as a single object, or an array of objects with the properties below.</td>
</tr>
<tr>
<td><code>performers.name</code></td>
<td>The name of the performer</td>
</tr>
<tr>
<td><code>performers.type</code></td>
<td>Either <code>Person</code> or <code>PerformingGroup</code></td>
</tr>
<tr>
<td><code>organizer</code></td>
<td>The organizer of the event</td>
</tr>
<tr>
<td><code>organizer.type</code></td>
<td>Either <code>Organization</code> or <code>Person</code></td>
</tr>
<tr>
<td><code>organizer.name</code></td>
<td>Name of the organizer of the event</td>
</tr>
<tr>
<td><code>organizer.url</code></td>
<td>URL of the organizer of the event</td>
</tr>
<tr>
<td><code>eventStatus</code></td>
<td>Status of the event, type <code>EventStatus</code></td>
</tr>
<tr>
<td><code>eventAttendanceMode</code></td>
<td>Attendance mode of the event, type <code>EventAttendanceMode</code></td>
</tr>
</tbody>
</table>
<p><strong><code>EventStatus</code> type</strong></p>
<ul>
<li>'EventCancelled'</li>
<li>'EventMovedOnline'</li>
<li>'EventPostponed'</li>
<li>'EventRescheduled'</li>
<li>'EventScheduled'</li>
</ul>
<p><strong><code>EventAttendanceMode</code> type</strong></p>
<ul>
<li>'MixedEventAttendanceMode'</li>
<li>'OfflineEventAttendanceMode'</li>
<li>'OnlineEventAttendanceMode'</li>
</ul>
<p><strong><code>offers</code> Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>offers.price</code></td>
<td>The cost of the offer</td>
</tr>
<tr>
<td><code>offers.priceCurrency</code></td>
<td>The currency of the offer</td>
</tr>
</tbody>
</table>
<p><strong><code>offers</code> Recommended properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>offers.priceValidUntil</code></td>
<td>Until when the price of the offer expires</td>
</tr>
<tr>
<td><code>offers.itemCondition</code></td>
<td>The condition of the product or service</td>
</tr>
<tr>
<td><code>offers.availability</code></td>
<td>The availability of this item — for example In stock, Out of stock, Pre-order, etc.</td>
</tr>
<tr>
<td><code>offers.url</code></td>
<td>URL of the item</td>
</tr>
<tr>
<td><code>offers.seller</code></td>
<td>The person who is selling this item</td>
</tr>
<tr>
<td><code>offers.seller.name</code></td>
<td>The name of the person</td>
</tr>
<tr>
<td><code>offers.validFrom</code></td>
<td>Since when the price of the offer is valid</td>
</tr>
</tbody>
</table>
<p>The property <code>aggregateOffer</code> is also available:
(It is ignored if <code>offers</code> is set)</p>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>lowPrice</code></td>
<td>The lowest price of all offers available. Use a floating point number.</td>
</tr>
<tr>
<td><code>priceCurrency</code></td>
<td>The currency used to describe the product price, in three-letter ISO 4217 format.</td>
</tr>
</tbody>
</table>
<p><strong>Recommended properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>highPrice</code></td>
<td>The highest price of all offers available. Use a floating point number.</td>
</tr>
<tr>
<td><code>offerCount</code></td>
<td>The number of offers for the product.</td>
</tr>
</tbody>
</table>
<p>For reference and more info check <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/docs/data-types/event">Google's Search Event DataType</a></p>
<h3>Q&A</h3>
<p>Q&A pages are web pages that contain data in a question-and-answer format, which is one question followed by its answers.</p>
<pre><code class="language-jsx">import { QAPageJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Q&A Page JSON-LD</h1>
<QAPageJsonLd
mainEntity={{
name: 'How many ounces are there in a pound?',
text: 'I have taken up a new interest in baking and keep running across directions in ounces and pounds. I have to translate between them and was wondering how many ounces are in a pound?',
answerCount: 3,
upvoteCount: 26,
dateCreated: '2016-07-23T21:11Z',
author: {
name: 'New Baking User',
url: 'https://example.com/bakinguser',
},
acceptedAnswer: {
text: '1 pound (lb) is equal to 16 ounces (oz).',
dateCreated: '2016-11-02T21:11Z',
upvoteCount: 1337,
url: 'https://example.com/question1#acceptedAnswer',
author: {
name: 'SomeUser',
url: 'https://example.com/someuser',
},
},
suggestedAnswer: [
{
text: 'Are you looking for ounces or fluid ounces? If you are looking for fluid ounces there are 15.34 fluid ounces in a pound of water.',
dateCreated: '2016-11-02T21:11Z',
upvoteCount: 42,
url: 'https://example.com/question1#suggestedAnswer1',
author: {
name: 'AnotherUser',
url: 'https://example.com/anotheruser',
},
},
{
text: `I can't remember exactly, but I think 18 ounces in a lb. You might want to double check that.`,
dateCreated: '2016-11-06T21:11Z',
upvoteCount: 0,
url: 'https://example.com/question1#suggestedAnswer2',
author: {
name: 'ConfusedUser',
url: 'https://example.com/confuseduser',
},
},
],
}}
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mainEntity</code></td>
<td>The Question for this page must be nested under the mainEntity property of the QAPageJsonld component.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<p><strong><code>mainEntity</code> Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>answerCount</code></td>
<td>The total number of answers to the question.</td>
</tr>
<tr>
<td><code>acceptedAnswer</code> or <code>suggestedAnswer</code></td>
<td>To be eligible for the rich result, a question must have at least one answer – either an acceptedAnswer or a suggestedAnswer.</td>
</tr>
<tr>
<td><code>name</code></td>
<td>The full text of the short form of the question.</td>
</tr>
</tbody>
</table>
<p><strong><code>mainEntity</code> Supported properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>author</code></td>
<td>The author of the question.</td>
</tr>
<tr>
<td><code>dateCreated</code></td>
<td>The date at which the question was added to the page, in ISO-8601 format.</td>
</tr>
<tr>
<td><code>text</code></td>
<td>The full text of the long form of the question.</td>
</tr>
<tr>
<td><code>upvoteCount</code></td>
<td>The total number of votes that this question has received.</td>
</tr>
</tbody>
</table>
<p><strong><code>acceptedAnswer</code>/<code>suggestedAnswer</code> Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>text</code></td>
<td>The full text of the answer.</td>
</tr>
</tbody>
</table>
<p><strong><code>acceptedAnswer</code>/<code>suggestedAnswer</code> Supported properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>author</code></td>
<td>The author of the question.</td>
</tr>
<tr>
<td><code>dateCreated</code></td>
<td>The date at which the question was added to the page, in ISO-8601 format.</td>
</tr>
<tr>
<td><code>upvoteCount</code></td>
<td>The total number of votes that this question has received.</td>
</tr>
<tr>
<td><code>url</code></td>
<td>A URL that links directly to this answer.</td>
</tr>
</tbody>
</table>
<p>For reference and more info check <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/docs/data-types/qapage">Google's Search Q&A DataType</a></p>
<h3>Collection Page</h3>
<p>Collection pages are web pages. Every web page is implicitly assumed to be declared to be of type WebPage, so the various properties about that webpage, such as breadcrumb may be used. We recommend explicit declaration if these properties are specified, but if they are found outside of an item scope, they will be assumed to be about the page.</p>
<pre><code class="language-jsx">import { CollectionPageJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Collection Page JSON-LD</h1>
<CollectionPageJsonLd
name="Resistance 3: Fall of Man"
hasPart={[
{
about:
'Britten Four Sea Interludes and Passacaglia from Peter Grimes',
author: 'John Doe',
name: 'Schema.org Ontology',
datePublished: '2021-03-09',
audience: 'Internet',
keywords: 'schema',
thumbnailUrl: 'https://i.ytimg.com/vi/eXSJ3PO9Tas/hqdefault.jpg',
image: 'hqdefault.jpg',
},
{
about: 'Shostakovich Symphony No. 7 (Leningrad)',
author: 'John Smith',
name: 'Creative work name',
datePublished: '2014-10-01T19:30',
},
]}
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>name</code></td>
<td>The name of the item.</td>
</tr>
<tr>
<td><code>hasPart</code></td>
<td>Indicates an item or CreativeWork that is part of this item, or CreativeWork (in some sense).</td>
</tr>
</tbody>
</table>
<p><strong>Supported properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>hasPart.creativeWork</code></td>
<td>The most generic kind of <a rel="noreferrer nofollow" target="_blank" href="https://schema.org/CreativeWork">creative work</a>, including books, movies, photographs, software programs, etc</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<p><strong><code>creativeWork</code> Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>hasPart.creativeWork.author</code></td>
<td>The author of this content or rating. Please note that author is special in that HTML 5 provides a special mechanism for indicating authorship via the rel tag. That is equivalent to this and may be used interchangeably.</td>
</tr>
<tr>
<td><code>hasPart.creativeWork.about</code></td>
<td>The subject matter of the content.</td>
</tr>
<tr>
<td><code>hasPart.creativeWork.datePublished</code></td>
<td>Date of first broadcast/publication.</td>
</tr>
<tr>
<td><code>hasPart.creativeWork.name</code></td>
<td>The name of the item.</td>
</tr>
</tbody>
</table>
<p><strong><code>creativeWork</code> Supported properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>hasPart.creativeWork.audience</code></td>
<td>An intended audience, i.e. a group for whom something was created.</td>
</tr>
<tr>
<td><code>hasPart.creativeWork.keywords</code></td>
<td>Keywords or tags used to describe this content. Multiple entries in a keywords list are typically delimited by commas.</td>
</tr>
<tr>
<td><code>hasPart.creativeWork.thumbnailUrl</code></td>
<td>A thumbnail image relevant to the Thing.</td>
</tr>
<tr>
<td><code>hasPart.creativeWork.image</code></td>
<td>An image of the item. This can be a URL or a fully described ImageObject.</td>
</tr>
</tbody>
</table>
<p>For reference and more info check <a rel="noreferrer nofollow" target="_blank" href="https://schema.org/CollectionPage">Collection Page DataType</a></p>
<h3>Profile page</h3>
<p>Profile pages are web pages. Every web page is implicitly assumed to be declared to be of type WebPage, so the various properties about that webpage, such as breadcrumb may be used. We recommend explicit declaration if these properties are specified, but if they are found outside of an item scope, they will be assumed to be about the page.</p>
<pre><code class="language-jsx">import { ProfilePageJsonLd } from 'next-seo';
const Page = () => (
<>
<h1>Profile page JSON-LD</h1>
<ProfilePageJsonLd
lastReviewed="2014-10-01T19:30"
breadcrumb={[
{
position: 1,
name: 'Books',
item: 'https://example.com/books',
},
{
position: 2,
name: 'Authors',
item: 'https://example.com/books/authors',
},
]}
/>
</>
);
export default Page;</code></pre>
<p><strong>Required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>breadcrumb</code></td>
<td>A set of links that can help a user understand and navigate a website hierarchy represented as string or <a href="#breadcrumb">BreadcrumbList</a>.</td>
</tr>
</tbody>
</table>
<p><strong>Supported properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>lastReviewed</code></td>
<td>Date on which the content on this web page was last reviewed for accuracy and/or completeness.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using new app directory. Not required if outside of app directory. |</p>
<p>For reference and more info check <a rel="noreferrer nofollow" target="_blank" href="https://schema.org/ProfilePage">Profile Page DataType</a></p>
<h3>Carousel</h3>
<p><strong>Required properties of Carousel Component</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>type</code></td>
<td>The type of carousel</td>
</tr>
<tr>
<td><code>data</code></td>
<td>The data in the form of an array for the item list in the carousel</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<h4>Default (Summary List)</h4>
<pre><code class="language-jsx">import React from 'react';
import { CarouselJsonLd } from 'next-seo';
export default () => (
<>
<h1>Carousel Default JSON-LD</h1>
<CarouselJsonLd
ofType="default"
data={[
{ url: 'http://example.com/peanut-butter-cookies.html' },
{
url: 'http://example.com/triple-chocolate-chunk.html',
},
]}
/>
</>
);</code></pre>
<p><strong>Data required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>url</code></td>
<td>URL of the item's detailed page.</td>
</tr>
</tbody>
</table>
<h4>Course</h4>
<pre><code class="language-jsx">import React from 'react';
import { CarouselJsonLd } from 'next-seo';
export default () => (
<>
<h1>Carousel Course JSON-LD</h1>
<CarouselJsonLd
ofType="course"
data={[
{
courseName: 'Course 1',
description: 'Course 1 Description',
providerName: 'Course Provider',
url: 'http://example.com/course-1.html',
},
{
courseName: 'Course 2',
description: 'Course 2 Description',
providerName: 'Course Provider',
url: 'http://example.com/course-2.html',
},
]}
/>
</>
);</code></pre>
<p><strong>Data required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>courseName</code></td>
<td>The title of the course.</td>
</tr>
<tr>
<td><code>description</code></td>
<td>A description of the course. Display limit of 60 characters.</td>
</tr>
<tr>
<td><code>providerName</code></td>
<td>The course provider name.</td>
</tr>
<tr>
<td><code>url</code></td>
<td>URL of the item's detailed page .</td>
</tr>
</tbody>
</table>
<p><strong>Data Recommended properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>providerUrl</code></td>
<td>The url to the course provider.</td>
</tr>
</tbody>
</table>
<h4>Movie</h4>
<pre><code class="language-jsx">import React from 'react';
import { CarouselJsonLd } from 'next-seo';
export default () => (
<>
<h1>Carousel Movie JSON-LD</h1>
<CarouselJsonLd
ofType="movie"
data={[
{
name: 'Movie 1',
url: 'http://example.com/movie-1.html',
image:
'https://i.pinimg.com/originals/96/a0/0d/96a00d42b0ff8f80b7cdf2926a211e47.jpg',
director: {
name: 'John Doe',
},
review: {
author: { type: 'Person', name: 'Ronan Farrow' },
reviewBody:
'Heartbreaking, inpsiring, moving. Bradley Cooper is a triple threat.',
reviewRating: { ratingValue: '5' },
},
},
{
name: 'Movie 2',
url: 'http://example.com/movie-1.html',
image:
'https://i.pinimg.com/originals/96/a0/0d/96a00d42b0ff8f80b7cdf2926a211e47.jpg',
director: [
{
name: 'Mary Doe',
},
{
name: 'John Doe',
},
],
review: {
author: { type: 'Person', name: 'Ronan Farrow' },
reviewBody:
'Heartbreaking, inpsiring, moving. Rowan Atkinson is a triple threat.',
reviewRating: { ratingValue: '5' },
},
},
]}
/>
</>
);</code></pre>
<p><strong>Data required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>name</code></td>
<td>Name of the movie.</td>
</tr>
<tr>
<td><code>image</code></td>
<td>An image that represents the movie.</td>
</tr>
<tr>
<td><code>url</code></td>
<td>URL of the item's detailed page.</td>
</tr>
</tbody>
</table>
<p><strong>Data Recommended properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>director</code></td>
<td>The directors of the movie.</td>
</tr>
<tr>
<td><code>dateCreated</code></td>
<td>The date the movie was released.</td>
</tr>
<tr>
<td><code>aggregateRating</code></td>
<td>Aggregate Rating object for the movie.</td>
</tr>
<tr>
<td><code>review</code></td>
<td>Review for the movie.</td>
</tr>
</tbody>
</table>
<h4>Recipe</h4>
<pre><code class="language-jsx">import React from 'react';
import { CarouselJsonLd } from 'next-seo';
export default () => (
<>
<h1>Carousel Recipe JSON-LD</h1>
<CarouselJsonLd
ofType="recipe"
data={[
{
name: 'Party Coffee Cake',
url: 'http://example.com/recipe-1.html',
images: [
'https://example.com/photos/1x1/photo.jpg',
'https://example.com/photos/4x3/photo.jpg',
'https://example.com/photos/16x9/photo.jpg',
],
authorName: 'Mary Stone',
datePublished: '2018-03-10',
description: 'This coffee cake is awesome and perfect for parties.',
prepTime: 'PT20M',
cookTime: 'PT30M',
totalTime: 'PT50M',
keywords: 'cake for a party, coffee',
yields: '10',
category: 'Dessert',
calories: 270,
cuisine: 'American',
ingredients: [
'2 cups of flour',
'3/4 cup white sugar',
'2 teaspoons baking powder',
'1/2 teaspoon salt',
'1/2 cup butter',
'2 eggs',
'3/4 cup milk',
],
instructions: [
{
name: 'Preheat',
text: 'Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan.',
url: 'https://example.com/party-coffee-cake#step1',
image: 'https://example.com/photos/party-coffee-cake/step1.jpg',
},
{
name: 'Mix dry ingredients',
text: 'In a large bowl, combine flour, sugar, baking powder, and salt.',
url: 'https://example.com/party-coffee-cake#step2',
image: 'https://example.com/photos/party-coffee-cake/step2.jpg',
},
{
name: 'Spread into pan',
text: 'Spread into the prepared pan.',
url: 'https://example.com/party-coffee-cake#step4',
image: 'https://example.com/photos/party-coffee-cake/step4.jpg',
},
{
name: 'Bake',
text: 'Bake for 30 to 35 minutes, or until firm.',
url: 'https://example.com/party-coffee-cake#step5',
image: 'https://example.com/photos/party-coffee-cake/step5.jpg',
},
],
aggregateRating: {
ratingValue: '5',
ratingCount: '18',
},
video: {
name: 'How to make a Party Coffee Cake',
description: 'This is how you make a Party Coffee Cake.',
thumbnailUrls: [
'https://example.com/photos/1x1/photo.jpg',
'https://example.com/photos/4x3/photo.jpg',
'https://example.com/photos/16x9/photo.jpg',
],
contentUrl: 'http://www.example.com/video123.mp4',
embedUrl: 'http://www.example.com/videoplayer?video=123',
uploadDate: '2018-02-05T08:00:00+08:00',
duration: 'PT1M33S',
expires: '2019-02-05T08:00:00+08:00',
},
},
{
name: 'Party Coffee Cake 2',
url: 'http://example.com/recipe-2.html',
images: [
'https://example.com/photos/1x1/photo.jpg',
'https://example.com/photos/4x3/photo.jpg',
'https://example.com/photos/16x9/photo.jpg',
],
authorName: 'Mary Stone 2',
datePublished: '2018-03-10',
description: 'This coffee cake is awesome and perfect for parties.',
prepTime: 'PT20M',
cookTime: 'PT30M',
totalTime: 'PT50M',
keywords: 'cake for a party, coffee',
yields: '10',
category: 'Dessert',
calories: 270,
cuisine: 'American',
ingredients: [
'2 cups of flour',
'3/4 cup white sugar',
'2 teaspoons baking powder',
'1/2 teaspoon salt',
'1/2 cup butter',
'2 eggs',
'3/4 cup milk',
],
instructions: [
{
name: 'Preheat',
text: 'Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan.',
url: 'https://example.com/party-coffee-cake#step1',
image: 'https://example.com/photos/party-coffee-cake/step1.jpg',
},
{
name: 'Mix dry ingredients',
text: 'In a large bowl, combine flour, sugar, baking powder, and salt.',
url: 'https://example.com/party-coffee-cake#step2',
image: 'https://example.com/photos/party-coffee-cake/step2.jpg',
},
{
name: 'Spread into pan',
text: 'Spread into the prepared pan.',
url: 'https://example.com/party-coffee-cake#step4',
image: 'https://example.com/photos/party-coffee-cake/step4.jpg',
},
{
name: 'Bake',
text: 'Bake for 30 to 35 minutes, or until firm.',
url: 'https://example.com/party-coffee-cake#step5',
image: 'https://example.com/photos/party-coffee-cake/step5.jpg',
},
],
aggregateRating: {
ratingValue: '5',
ratingCount: '18',
},
video: {
name: 'How to make a Party Coffee Cake',
description: 'This is how you make a Party Coffee Cake.',
thumbnailUrls: [
'https://example.com/photos/1x1/photo.jpg',
'https://example.com/photos/4x3/photo.jpg',
'https://example.com/photos/16x9/photo.jpg',
],
contentUrl: 'http://www.example.com/video123.mp4',
embedUrl: 'http://www.example.com/videoplayer?video=123',
uploadDate: '2018-02-05T08:00:00+08:00',
duration: 'PT1M33S',
expires: '2019-02-05T08:00:00+08:00',
},
},
]}
/>
</>
);</code></pre>
<p><strong>Data required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>name</code></td>
<td>The name of the dish.</td>
</tr>
<tr>
<td><code>description</code></td>
<td>A description of the recipe</td>
</tr>
<tr>
<td><code>authorName</code></td>
<td>The name of the recipe author</td>
</tr>
<tr>
<td><code>ingredients</code></td>
<td>A list of ingredient strings</td>
</tr>
<tr>
<td><code>instructions</code></td>
<td>-</td>
</tr>
<tr>
<td><code>instructions.name</code></td>
<td>The name of the instruction step.</td>
</tr>
<tr>
<td><code>instructions.text</code></td>
<td>The directions of the instruction step.</td>
</tr>
<tr>
<td><code>url</code></td>
<td>URL of the item's detailed page.</td>
</tr>
</tbody>
</table>
<h4>Custom</h4>
<pre><code class="language-jsx">import React from 'react';
import { CarouselJsonLd } from 'next-seo';
export default () => (
<>
<h1>Carousel Custom JSON-LD</h1>
<CarouselJsonLd
ofType="custom"
url="http://example.com/custom-carousel.html"
name="Carousel Custom"
description="Custom Carousel Description"
data={[
{
position: 1,
type: 'CustomList',
name: 'Custom 1',
},
{
position: 2,
type: 'CustomList',
name: 'Custom 2',
},
]}
/>
</>
);</code></pre>
<p><strong>Data Required Properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>type</code></td>
<td>Type of the item.</td>
</tr>
<tr>
<td><code>name</code></td>
<td>Name of the item.</td>
</tr>
</tbody>
</table>
<p><strong>Data Recommended properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>position</code></td>
<td>Position of the item. If not pass property, it will increase regularly.</td>
</tr>
</tbody>
</table>
<h3>Software App</h3>
<pre><code class="language-jsx">import React from 'react';
import { SoftwareAppJsonLd } from 'next-seo';
export default () => (
<>
<h1>Software App JSON-LD</h1>
<SoftwareAppJsonLd
name="Angry Birds"
price="1.00"
priceCurrency="USD"
aggregateRating={{ ratingValue: '4.6', reviewCount: '8864' }}
operatingSystem="ANDROID"
applicationCategory="GameApplication"
keywords="angrybirds, arcade, slingshot"
/>
</>
);</code></pre>
<p><strong>Data required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>name</code></td>
<td>The name of the app.</td>
</tr>
<tr>
<td><code>price</code></td>
<td>Price of the app. If the app is free of charge, set offers.price to 0</td>
</tr>
<tr>
<td><code>priceCurrency</code></td>
<td>If the app has a price greater than 0, you must include offers.currency.</td>
</tr>
<tr>
<td><code>aggregateRating</code></td>
<td>The average review score of the app. (Not required if review is present.)</td>
</tr>
<tr>
<td><code>review</code></td>
<td>A single review of the app. (Not required if aggregateRating is present.)</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<p><strong>Data Recommended properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>operatingSystem</code></td>
<td>The operating System supported by the game it self.</td>
</tr>
<tr>
<td><code>applicationCategory</code></td>
<td>Desktop Software or Video Game...</td>
</tr>
</tbody>
</table>
<p><strong>Data other properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>keywords</code></td>
<td>Keywords or tags used to describe this content. Multiple entries in a keywords list are typically delimited by commas.</td>
</tr>
</tbody>
</table>
<p>For reference and more info check <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/docs/data-types/software-app">Google docs for Software App</a> and <a rel="noreferrer nofollow" target="_blank" href="https://schema.org/SoftwareApplication">Schema.org docs</a></p>
<h3>Organization</h3>
<pre><code class="language-jsx">import React from 'react';
import { OrganizationJsonLd } from 'next-seo';
export default () => (
<>
<h1>Organization JSON-LD</h1>
<OrganizationJsonLd
type="Corporation"
id="https://www.purpule-fox.io/#corporation"
logo="https://www.example.com/photos/logo.jpg"
legalName="Purple Fox LLC"
name="Purple Fox"
address={{
streetAddress: '1600 Saratoga Ave',
addressLocality: 'San Jose',
addressRegion: 'CA',
postalCode: '95129',
addressCountry: 'US',
}}
contactPoint={[
{
telephone: '+1-401-555-1212',
contactType: 'customer service',
email: 'customerservice@email.com',
areaServed: 'US',
availableLanguage: ['English', 'Spanish', 'French'],
},
{
telephone: '+1-877-746-0909',
contactType: 'customer service',
email: 'servicecustomer@email.com',
contactOption: 'TollFree',
availableLanguage: 'English',
},
{
telephone: '+1-877-453-1304',
contactType: 'technical support',
contactOption: 'TollFree',
areaServed: ['US', 'CA'],
availableLanguage: ['English', 'French'],
},
]}
sameAs={['https://www.orange-fox.com']}
url="https://www.purpule-fox.io/"
/>
</>
);</code></pre>
<p><strong>Data required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>name</code></td>
<td>The name of the Organization.</td>
</tr>
<tr>
<td><code>url</code></td>
<td>Url of the organization</td>
</tr>
<tr>
<td><code>contactPoint</code></td>
<td></td>
</tr>
<tr>
<td><code>contactPoint.telephone</code></td>
<td>An internationalized version of the phone number, starting with the "+" symbol and country code</td>
</tr>
<tr>
<td><code>contactPoint.contactType</code></td>
<td>Description of the purpose of the phone number i.e. <code>Technical Support</code>.</td>
</tr>
</tbody>
</table>
<p><strong>Data Recommended properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>logo</code></td>
<td>ImageObject or URL an associated logo to the Organization.</td>
</tr>
<tr>
<td><code>type</code></td>
<td>Organization type, check <a rel="noreferrer nofollow" target="_blank" href="https://schema.org/Organization#subtypes">here</a></td>
</tr>
<tr>
<td><code>legalName</code></td>
<td>The official name of the organization, e.g. the registered company name.</td>
</tr>
<tr>
<td><code>sameAs</code></td>
<td>URL of a reference Web page that unambiguously indicates the item's identity.</td>
</tr>
<tr>
<td><code>address</code></td>
<td>Address of the specific business location</td>
</tr>
<tr>
<td><code>address.addressCountry</code></td>
<td>The 2-letter ISO 3166-1 alpha-2 country code</td>
</tr>
<tr>
<td><code>address.addressLocality</code></td>
<td>City</td>
</tr>
<tr>
<td><code>address.addressRegion</code></td>
<td>State or province, if applicable.</td>
</tr>
<tr>
<td><code>address.postalCode</code></td>
<td>Postal or zip code.</td>
</tr>
<tr>
<td><code>address.streetAddress</code></td>
<td>Street number, street name, and unit number.</td>
</tr>
<tr>
<td><code>contactPoint.areaServed</code></td>
<td><code>String</code> or <code>Array</code> of geographical regions served by the business. Example <code>"US"</code> or <code>["US", "CA", "MX"]</code></td>
</tr>
<tr>
<td><code>contactPoint.availableLanguage</code></td>
<td>Details about the language spoken. Example <code>"English"</code> or <code>["English", "French"]</code></td>
</tr>
<tr>
<td><code>contactPoint.email</code></td>
<td>Email asscosiated with the business`</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<p>For reference and more info check <a rel="noreferrer nofollow" target="_blank" href="https://schema.org/Organization">Docs</a></p>
<h3>Brand</h3>
<pre><code class="language-jsx">import React from 'react';
import { BrandJsonLd } from 'next-seo';
export default () => (
<>
<h1>Brand JSON-LD</h1>
<BrandJsonLd
slogan="What does the fox say?"
id="https://www.purpule-fox.io/#corporation"
logo="https://www.example.com/photos/logo.jpg"
aggregateRating={{
ratingValue: '5',
ratingCount: '18',
}}
/>
</>
);</code></pre>
<p><strong>Data required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>id</code></td>
<td>'URL to main entity of page'</td>
</tr>
</tbody>
</table>
<p><strong>Data Recommended properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>logo</code></td>
<td>ImageObject or URL an associated logo to the Organization.</td>
</tr>
<tr>
<td><code>slogan</code></td>
<td>A slogan or motto associated with the item.</td>
</tr>
<tr>
<td><code>aggregateRating.ratingValue</code></td>
<td>The rating for the content.(Check the <a rel="noreferrer nofollow" target="_blank" href="https://schema.org/ratingValue">reference</a></td>
</tr>
<tr>
<td><code>aggregateRating.ratingCount</code></td>
<td>The count of total number of ratings.</td>
</tr>
<tr>
<td><code>aggregateRating.reviewCount</code></td>
<td>The count of total number of reviews.</td>
</tr>
<tr>
<td><code>aggregateRating.bestRating</code></td>
<td>The highest value allowed in this rating system. If bestRating is omitted, 5 is assumed.</td>
</tr>
<tr>
<td><code>aggregateRating.worstRating</code></td>
<td>The lowest value allowed in this rating system. If worstRating is omitted, 1 is assumed.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<p>For reference and more info check <a rel="noreferrer nofollow" target="_blank" href="https://schema.org/Brand">Docs</a></p>
<h3>WebPage</h3>
<pre><code class="language-jsx">import React from 'react';
import { WebPageJsonLd } from 'next-seo';
export default () => (
<>
<h1>WebPage JSON-LD</h1>
<WebPageJsonLd
description="What does the fox say?"
id="https://www.purpule-fox.io/#corporation"
lastReviewed="2021-05-26T05:59:02.085Z"
reviewedBy={{
type: 'Person',
name: 'Garmeeh',
}}
/>
</>
);</code></pre>
<p><strong>Data required properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>id</code></td>
<td>'URL to main entity of page'</td>
</tr>
</tbody>
</table>
<p><strong>Data Recommended properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>description</code></td>
<td>ImageObject or URL an associated logo to the Organization.</td>
</tr>
<tr>
<td><code>lastReviewed</code></td>
<td>Date on which the content on this web page was last reviewed for accuracy and/or completeness.</td>
</tr>
<tr>
<td><code>reviewedBy.type</code></td>
<td>People or organizations that will review the content of the web page.</td>
</tr>
<tr>
<td><code>reviewedBy.name</code></td>
<td>Name of the entity that have reviewed the content on this web page for accuracy and/or completeness.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<p>For reference and more info check <a rel="noreferrer nofollow" target="_blank" href="https://schema.org/WebPage">Docs</a></p>
<h3>Image Metadata</h3>
<pre><code class="language-jsx">import React from 'react';
import { ImageJsonLd } from 'next-seo';
function Image() {
return (
<>
<h1>Image</h1>
<ImageJsonLd
images={[
{
contentUrl: 'http://www.example.com/images/image.png',
creator: {
'@type': 'Person',
name: 'Jane Doe',
},
creditText: 'Jane Doe',
copyrightNotice: '© Jane Doe',
license: 'http://www.example.com/license',
acquireLicensePage: 'http://www.example.com/acquire-license',
},
]}
/>
</>
);
}
export default Image;</code></pre>
<p><strong>Data Recommended properties</strong></p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>contentUrl</code></td>
<td>A URL to the actual image content. Google uses contentUrl to determine which image the photo metadata applies to.</td>
</tr>
<tr>
<td><code>creator.name</code></td>
<td>The name of the creator.</td>
</tr>
<tr>
<td><code>creditText</code></td>
<td>The name of person and/or organization that is credited for the image when it's published.</td>
</tr>
<tr>
<td><code>copyrightNotice</code></td>
<td>The copyright notice for claiming the intellectual property for this photograph. This identifies the current owner of the copyright for the photograph.</td>
</tr>
<tr>
<td><code>license</code></td>
<td>A URL to a page that describes the license governing an image's use. For example, it could be the terms and conditions that you have on your website.</td>
</tr>
<tr>
<td><code>acquireLicensePage</code></td>
<td>A URL to a page where the user can find information on how to license that image.</td>
</tr>
</tbody>
</table>
<p><strong>Other</strong>
| <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. |</p>
<p>For reference and more info check <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/search/docs/appearance/structured-data/image-license-metadata">Google Docs</a></p>
<h2>Contributors</h2>
<p><a rel="noreferrer nofollow" target="_blank" href="https://github.com/garmeeh/next-seo/blob/master/CONTRIBUTING.md">Contributing Guide</a></p>
<p>A massive thank you to <a rel="noreferrer nofollow" target="_blank" href="https://github.com/garmeeh/next-seo/graphs/contributors">everyone who contributes</a> to this project 👏</p></div>
</div>
<div class="footer">
<ul class="body">
<li>© <script>
document.write(new Date().getFullYear())
</script> Githubissues.</li>
<li>Githubissues is a development platform for aggregating issues.</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="/githubissues/assets/js.js"></script>
<script src="/githubissues/assets/markdown.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script>
<script>
hljs.highlightAll();
</script>
</body>
</html>