Code Monkey home page Code Monkey logo

next-seo's Introduction

Have you seen the new Next.js newsletter?

NextjsWeekly banner

Useful Tools

  • dub recently launched a useful Free UTM builder! You can use it here

Next SEO

npm

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 ☕️

Buy Me A Coffee

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., , <title>) then it is highly recommended that you use the built-in generateMetaData method. You can check out the docs here

For JSON-LD then, the only change needed is to add useAppDir={true} to the JSON-LD component in use. You should add use this component in your page.js and NOT your head.js.

<ArticleJsonLd
  useAppDir={true}
  url="https://example.com/article"
  title="Article headline" <- required for app directory
  />

If you are using pages directory then NextSeo is exactly what you need for your SEO needs!

Table of Contents

Usage

NextSeo 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.

Setup

First, install it:

npm install next-seo

or

yarn add next-seo

Add SEO to Page

Using Next.js app directory introduced in Next.js 13?

If you are using the Next.js app directory, then it is highly recommended that you use the built-in generateMetaData method. You can check out the docs here

If you are using the pages directory, then NextSeo is exactly what you need for your SEO needs!

Then, you need to import NextSeo and add the desired properties. This will render out the tags in the <head> for SEO. At a bare minimum, you should add a title and description.

Example with just title and description:

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;

But NextSeo gives you many more options that you can add. See below for a typical example of a page.

Typical page example:

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;

A note on Twitter Tags

Props cardType, site, handle are equivalent to twitter:card, twitter:site, twitter:creator. Documentation can be found here.

Twitter will read the og:title, og:image and og:description tags for their card. next-seo omits twitter:title, twitter:image and twitter:description to avoid duplication.

Some tools may report this as an error. See Issue #14

Default SEO Configuration

NextSeo 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.

To achieve this, you will need to create a custom <App>. In your pages directory, create a new file, _app.js. See the Next.js docs here for more info on a custom <App>.

Within this file you will need to import DefaultSeo from next-seo and pass it props.

Here is a typical example:

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>
    );
  }
}

To work properly, DefaultSeo should be placed above (before) Component due to the behavior of Next.js internals.

Alternatively, you can also create a config file to store default values such as next-seo.config.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',
  },
};
or like this, if you are using TypeScript 

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;

import at the top of _app.js

import SEO from '../next-seo.config';

and the DefaultSeo component can be used like this instead

<DefaultSeo {...SEO} />

From now on, all of your pages will have the defaults above applied.

Note that Container is deprecated in Next.js v9.0.4 so you should replace that component here with React.Fragment on this version and later - see here

NextSeo Options

Property Type Description
titleTemplate string Allows you to set default title template that will be added to your title More Info
title string Set the meta title of the page
defaultTitle string If no title is set on a page, this string will be used instead of an empty titleTemplate More Info
noindex boolean (default false) Sets whether page should be indexed or not More Info
nofollow boolean (default false) Sets whether page should be followed or not More Info
robotsProps Object Set the more meta information for the X-Robots-Tag More Info
description string Set the page meta description
canonical string Set the page canonical url
mobileAlternate.media string Set what screen size the mobile website should be served from
mobileAlternate.href string Set the mobile page alternate url
languageAlternates array Set the language of the alternate urls. Expects array of objects with the shape: { hrefLang: string, href: string }
themeColor string 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
additionalMetaTags array Allows you to add a meta tag that is not documented here. More Info
additionalLinkTags array Allows you to add a link tag that is not documented here. More Info
twitter.cardType string The card type, which will be one of summary, summary_large_image, app, or player
twitter.site string @username for the website used in the card footer
twitter.handle string @username for the content creator / author (outputs as twitter:creator)
facebook.appId string Used for Facebook Insights, you must add a facebook app ID to your page to for it More Info
openGraph.url string The canonical URL of your object that will be used as its permanent ID in the graph
openGraph.type string The type of your object. Depending on the type you specify, other properties may also be required More Info
openGraph.title string The open graph title, this can be different than your meta title.
openGraph.description string The open graph description, this can be different than your meta description.
openGraph.images array 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. See Examples
openGraph.videos array An array of videos (object)
openGraph.locale string The locale the open graph tags are marked up in. Of the format language_TERRITORY. Default is en_US.
openGraph.siteName string If your object is part of a larger web site, the name which should be displayed for the overall site.
openGraph.profile.firstName string Person's first name.
openGraph.profile.lastName string Person's last name.
openGraph.profile.username string Person's username.
openGraph.profile.gender string Person's gender.
openGraph.book.authors string[] Writers of the article. See Examples
openGraph.book.isbn string The ISBN
openGraph.book.releaseDate datetime The date the book was released.
openGraph.book.tags string[] Tag words associated with this book.
openGraph.article.publishedTime datetime When the article was first published. See Examples
openGraph.article.modifiedTime datetime When the article was last changed.
openGraph.article.expirationTime datetime When the article is out of date after.
openGraph.article.authors string[] Writers of the article.
openGraph.article.section string A high-level section name. E.g. Technology
openGraph.article.tags string[] Tag words associated with this article.

Title Template

Replaces %s with your title string

title = 'This is my title';
titleTemplate = 'Next SEO | %s';
// outputs: Next SEO | This is my title
title = 'This is my title';
titleTemplate = '%s | Next SEO';
// outputs: This is my title | Next SEO

Default Title

title = undefined;
titleTemplate = 'Next SEO | %s';
defaultTitle = 'Next SEO';
// outputs: Next SEO

No Index

Setting this to true will set noindex,follow (to set nofollow, please refer to nofollow). This works on a page by page basis. This property works in tandem with the nofollow property and together they populate the robots meta tag.

Note: The noindex and the nofollow 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 index,follow because next-seo is a SEO plugin after all. So if you want to globally these properties, please see dangerouslySetAllPagesToNoIndex and dangerouslySetAllPagesToNoFollow.

Example No Index on a single page:

If you have a single page that you want no indexed you can achieve this by:

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">
*/

dangerouslySetAllPagesToNoIndex

It has the prefix dangerously because it will noindex all pages. As this is an SEO plugin, that is kinda dangerous action. It is not bad to use this. Just please be sure you want to noindex EVERY page. You can still override this at a page level if you have a use case to index a page. This can be done by setting noindex: false.

The only way to unset this is by removing the prop from the DefaultSeo in your custom <App>.

No Follow

Setting this to true will set index,nofollow (to set noindex, please refer to noindex). This works on a page-by-page basis. This property works in tandem with the noindex property, and together, they populate the robots meta tag.

Note: Unlike for the other properties, setting noindex and nofollow by default does not work as expected. This is because Next SEO has a default of index,follow, since next-seo is an SEO plugin after all. If you want to globally allow these properties, see dangerouslySetAllPagesToNoIndex and dangerouslySetAllPagesToNoFollow.

Example No Follow on a single page:

If you have a single page that you want no indexed you can achieve this by:

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">
*/

dangerouslySetAllPagesToNoFollow

It has the prefix of dangerously because it will nofollow all pages. As this is an SEO plugin, that is kinda dangerous action. It is not bad to use this. Just please be sure you want to nofollow EVERY page. You can still override this at a page level if you have a use case to follow a page. This can be done by setting nofollow: false.

The only way to unset this, is by removing the prop from the DefaultSeo in your custom <App>.

noindex nofollow meta content of robots
-- -- index,follow (default)
false false index,follow
true -- noindex,follow
true false noindex,follow
-- true index,nofollow
false true index,nofollow
true true noindex,nofollow

robotsProps

In addition to index, follow the robots meta tag accepts more properties to archive a more accurate crawling and serve better snippets for SEO bots that crawl your page.

Example:

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">
*/

Available properties

Property Type Description
noarchive boolean Do not show a cached link in search results.
nosnippet boolean Do not show a text snippet or video preview in the search results for this page.
max-snippet number Use a maximum of [number] characters as a textual snippet for this search result. Read more
max-image-preview 'none','standard','large' Set the maximum size of an image preview for this page in a search results.
max-video-preview number Use a maximum of [number] seconds as a video snippet for videos on this page in search results. Read more
notranslate boolean Do not offer translation of this page in search results.
noimageindex boolean Do not index images on this page.
unavailable_after string 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.

For more reference about the X-Robots-Tag visit Google Search Central - Control Crawling and Indexing

Twitter

Twitter will read the og:title, og:image and og:description tags for their card, this is why next-seo omits twitter:title, twitter:image and twitter:description so not to duplicate.

Some tools may report this as an error. See Issue #14

Facebook

facebook={{
  appId: '1234567890',
}}

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 documentation

Canonical URL

Add this on a page-per-page basis when you want to consolidate duplicate URLs.

canonical = 'https://www.canonical.ie/';

Alternate

This link relation is used to indicate a relation between a desktop and a mobile website to search engines.

Example:

mobileAlternate={{
  media: 'only screen and (max-width: 640px)',
  href: 'https://m.canonical.ie',
}}
languageAlternates={[{
  hrefLang: 'de-AT',
  href: 'https://www.canonical.ie/de',
}]}

Additional Meta Tags

This allows you to add any other meta tags that are not covered in the config and should be used instead of children prop.

content is required. Then either name, property or httpEquiv. (Only one on each)

Example:

additionalMetaTags={[{
  property: 'dc:creator',
  content: 'Jane Doe'
}, {
  name: 'application-name',
  content: 'NextSeo'
}, {
  httpEquiv: 'x-ua-compatible',
  content: 'IE=edge; chrome=1'
}]}

Invalid Examples:

These are invalid as they contain more than one of name, property and httpEquiv on the same entry.

additionalMetaTags={[{
  property: 'dc:creator',
  name: 'dc:creator',
  content: 'Jane Doe'
}, {
  property: 'application-name',
  httpEquiv: 'application-name',
  content: 'NextSeo'
}]}

One thing to note on this is that it currently only supports unique tags unless you use the keyOverride prop to provide a unique key to each additional meta tag.

The default behaviour (without a keyOverride prop) is to render one tag per unique name / property / httpEquiv. The last one defined will be rendered.

For example, if you pass 2 tags with the same property:

additionalMetaTags={[{
  property: 'dc:creator',
  content: 'Joe Bloggs'
}, {
  property: 'dc:creator',
  content: 'Jane Doe'
}]}

it will result in this being rendered:

<meta property="dc:creator" content="Jane Doe" />

Providing an additional keyOverride property like this:

additionalMetaTags={[{
  property: 'dc:creator',
  content: 'Joe Bloggs',
  keyOverride: 'creator1',
}, {
  property: 'dc:creator',
  content: 'Jane Doe',
  keyOverride: 'creator2',
}]}

results in the correct HTML being rendered:

<meta property="dc:creator" content="Joe Bloggs" />
<meta property="dc:creator" content="Jane Doe" />

Additional Link Tags

This allows you to add any other link tags that are not covered in the config.

rel and href is required.

Example:

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'
  }
]}

it will result in this being rendered:

<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="/manifest.json" />
<link
  rel="preload"
  href="https://www.test.ie/font/sample-font.woof2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>

Open Graph

For the full specification please check out http://ogp.me/

Next SEO currently supports:

Open Graph Examples

Basic

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;

Note

Multiple images are available from next.js version 7.0.0-canary.0

For versions 6.0.0 - 7.0.0-canary.0 you just need to supply a single item array:

images: [
  {
    url: 'https://www.example.ie/og-image-01.jpg',
    width: 800,
    height: 600,
    alt: 'Og Image Alt',
  },
],

Supplying multiple images will not break anything, but only one will be added to the head.

Video

Full info on http://ogp.me/

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;

Note

Multiple images are available from next.js version 7.0.0-canary.0

For versions 6.0.0 - 7.0.0-canary.0 you just need to supply a single item array:

images: [
  {
    url: 'https://www.example.ie/og-image-01.jpg',
    width: 800,
    height: 600,
    alt: 'Og Image Alt',
  },
],

Supplying multiple images will not break anything, but only one will be added to the head.

Audio

Full info on http://ogp.me/

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;

Article

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;

Note

Multiple images, authors, and tags are available from next.js version 7.0.0-canary.0

For versions 6.0.0 - 7.0.0-canary.0 you just need to supply a single item array:

images:

images: [
  {
    url: 'https://www.example.ie/og-image-01.jpg',
    width: 800,
    height: 600,
    alt: 'Og Image Alt',
  },
],

authors:

authors: [
  'https://www.example.com/authors/@firstnameA-lastnameA',
],

tags:

tags: ['Tag A'],

Supplying multiple of any of the above will not break anything, but only one will be added to the head.

Book

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;

Note

Multiple images, authors, and tags are available from next.js version 7.0.0-canary.0

For versions 6.0.0 - 7.0.0-canary.0 you just need to supply a single item array:

images:

images: [
  {
    url: 'https://www.example.ie/og-image-01.jpg',
    width: 800,
    height: 600,
    alt: 'Og Image Alt',
  },
],

authors:

authors: [
  'https://www.example.com/authors/@firstnameA-lastnameA',
],

tags:

tags: ['Tag A'],

Supplying multiple of any of the above will not break anything, but only one will be added to the head.

Profile

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;

Note

Multiple images are available from next.js version 7.0.0-canary.0

For versions 6.0.0 - 7.0.0-canary.0 you just need to supply a single item array:

images: [
  {
    url: 'https://www.example.ie/og-image-01.jpg',
    width: 800,
    height: 600,
    alt: 'Og Image Alt',
  },
],

Supplying multiple images will not break anything, but only one will be added to the head.

JSON-LD

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.

Google has excellent content on JSON-LD -> HERE

If using the app directory then please ensure to add useAppDir={true} prop and that you are using the component in the page.js

Below you will find a very basic page implementing each of the available JSON-LD types:

Pull requests are very welcome to add any from the list found here

JSON-LD Security

Just a quick note on security. To get JSON-LD onto the page it needs to be in a script tag. next-seo achieves this by using a script tag with dangerouslySetInnerHTML.

So if passing anything directly from a URL to one of the components below please ensure you sanitize it first if needed.

View toJson.tsx for implementation detail.

Handling multiple instances

If your page requires multiple instances of a given JSON-LD component, you can specify unique keyOverride properties, and next-seo will handle the rest.

This comes in handy for blog rolls, search results, and overview pages.

Please fully research when you should and shouldn't add multiple instances of JSON-LD.

<ExampleJsonLd keyOverride="my-new-key" />

Article

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;

Breadcrumb

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;

Required properties

Property Info
itemListElements
itemListElements.position The position of the breadcrumb in the breadcrumb trail. Position 1 signifies the beginning of the trail.
itemListElements.name The title of the breadcrumb displayed for the user.
itemListElements.item The URL to the webpage that represents the breadcrumb.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

Blog

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;

Campground

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;

Required properties

Property Info
@id Globally unique ID of the specific campground in the form of a URL.
address Address of the specific campground location
address.addressCountry The 2-letter ISO 3166-1 alpha-2 country code
address.addressLocality City
address.addressRegion State or province, if applicable.
address.postalCode Postal or zip code.
address.streetAddress Street number, street name, and unit number.
name Campground name.
description Campground description.

Supported properties

Property Info
geo Geographic coordinates of the campground.
geo.latitude The latitude of the campground location
geo.longitude The longitude of the campground location
images An image or images of the campground. Required for valid markup depending on the type
telephone A campground phone number meant to be the primary contact method for customers.
url The fully-qualified URL of the specific campground.
openingHours Opening hour specification of the campground. You can provide this as a single object, or an array of objects with the properties below.
openingHours.opens The opening hour of the place or service on the given day(s) of the week.
openingHours.closes The closing hour of the place or service on the given day(s) of the week.
openingHours.dayOfWeek The day of the week for which these opening hours are valid. Can be a string or array of strings. Refer to DayOfWeek
openingHours.validFrom The date when the item becomes valid.
openingHours.validThrough The date after when the item is not valid.
isAccessibleForFree Whether or not the campground is accessible for free.
petsAllowed Whether or not the campgroud allows pets.
amenityFeature An amenity feature (e.g. a characteristic or service) of the campground.
amenityFeature.name The name of the amenity.
amenityFeature.value The value of the amenity.
priceRange The price range of the campground, for example $$$.
rating The average rating of the campground based on multiple ratings or reviews.
rating.ratingValue The rating for the content.
rating.ratingCount The count of total number of ratings.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

Recipe

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;

Required properties

Property Info
name The name of the recipe
description A description of the recipe
authorName The name of the recipe author. Can be a string or array of strings.
ingredients A list of ingredient strings
instructions -
instructions.name The name of the instruction step.
instructions.text The directions of the instruction step.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

Sitelinks Search Box

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;

Required properties

Property Info
url URL of the website associated with the sitelinks searchbox
potentialActions Array of one or two SearchAction objects. Describes the URI to send the query to, and the syntax of the request that is sent
potentialActions.target 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
potentialActions.queryInput Placeholder used in target, gets substituted for user given query

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

Read the documentation

Course

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;

Required properties

Property Info
courseName The title of the course.
description A description of the course. Display limit of 60 characters.
provider.name The course provider name.
provider.url The course provider name url.

Recommended properties

Property Info
providerUrl The url to the course provider.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

Dataset

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;

Required properties

Property Info
description A short summary describing a dataset. Needs to be between 50 and 5000 characters.
name A license under which the dataset is distributed.

Recommended properties

Property Info
license The url to the course provider.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

Corporate Contact

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: '[email protected]',
          areaServed: 'US',
          availableLanguage: ['English', 'Spanish', 'French'],
        },
        {
          telephone: '+1-877-746-0909',
          contactType: 'customer service',
          email: '[email protected]',
          contactOption: 'TollFree',
          availableLanguage: 'English',
        },
        {
          telephone: '+1-877-453-1304',
          contactType: 'technical support',
          contactOption: 'TollFree',
          areaServed: ['US', 'CA'],
          availableLanguage: ['English', 'French'],
        },
      ]}
    />
  </>
);

export default Page;

Required properties

Property Info
url Url to the home page of the company's official site.
contactPoint
contactPoint.telephone An internationalized version of the phone number, starting with the "+" symbol and country code
contactPoint.contactType Description of the purpose of the phone number i.e. Technical Support.

Recommended ContactPoint properties

Property Info
contactPoint.areaServed String or Array of geographical regions served by the business. Example "US" or ["US", "CA", "MX"]
contactPoint.availableLanguage Details about the language spoken. Example "English" or ["English", "French"]
contactPoint.email Email asscosiated with the business`
gecontactPointo.contactOption Details about the phone number. Example "TollFree"

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

FAQ Page

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;

Required properties

Property Info
mainEntity
mainEntity.questionName The full text of the question. For example, "How long is the delivery time?".
mainEntity.acceptedAnswerText The full answer to the question.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

How-to

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;

Required properties

Property Info
name Name of the HowTo
step An array of HowToStep elements which comprise the full instructions of the how-to.

Supported properties

Property Info
estimatedCost The estimated cost of the supplies consumed when performing instructions.
image Image of the completed how-to.
supply A supply consumed when performing instructions or a direction.
tool An object used (but not consumed) when performing instructions or a direction.
totalTime The total time required to perform all instructions or directions (including time to prepare the supplies), in ISO 8601 duration format.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

Job Posting

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;

Required properties

Property Info
datePosted The original date that employer posted the job in ISO 8601 format
description The full description of the job in HTML format
hiringOrganization An object containing information about the company hiring with the following fields or the string 'confidential' when hiring anonymously
hiringOrganization.name Name of the company offering the job position
hiringOrganization.sameAs URL of a reference Web page
title The title of the job (not the title of the posting)
validThrough The date when the job posting will expire in ISO 8601 format

Supported properties

Property Info
applicantLocationRequirements The geographic location(s) in which employees may be located for to be eligible for the remote job
baseSalary
baseSalary.currency The currency in which the monetary amount is expressed
baseSalary.value The value of the quantitative value. You can also provide an array of minimum and maximum salaries. .
baseSalary.unitText A string indicating the unit of measurement Base salary guideline
employmentType Type of employment Employement type guideline
jobLocation 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.
jobLocation.streetAddress The street address. For example, 1600 Amphitheatre Pkwy
jobLocation.addressLocality The locality. For example, Mountain View.
jobLocation.addressRegion The region. For example, CA.
jobLocation.postalCode The postal code. For example, 94043
jobLocation.addressCountry The country. For example, USA. You can also provide the two-letter ISO 3166-1 alpha-2 country code.
jobLocationType A description of the job location Job Location type guideline
hiringOrganization.logo Logos on third-party job sites Hiring Organization guideline
experienceRequirements.occupational.minimumMonthsOfExperience The minimum number of months of experience that are required for the job posting. Experience and Education Requirements
experienceRequirements.educational.credentialCategory The level of education that's required for the job posting. Use one of the following: high school, associate degree, bachelor degree, professional certificate, postgraduate degree
experienceRequirements.experienceInPlaceOfEducation 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.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

Local Business

Local business is supported with a sub-set of properties.

<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',
  }}
/>

Required properties

Property Info
@id Globally unique ID of the specific business location in the form of a URL.
type LocalBusiness or any sub-type
address Address of the specific business location
address.addressCountry The 2-letter ISO 3166-1 alpha-2 country code
address.addressLocality City
address.addressRegion State or province, if applicable.
address.postalCode Postal or zip code.
address.streetAddress Street number, street name, and unit number.
name Business name.

Supported properties

Property Info
description Description of the business location
geo Geographic coordinates of the business.
geo.latitude The latitude of the business location
geo.longitude The longitude of the business location
rating The average rating of business based on multiple ratings or reviews.
rating.ratingValue The rating for the content.
rating.ratingCount The count of total number of ratings.
priceRange The relative price range of the business.
servesCuisine The type of cuisine the restaurant serves.
images An image or images of the business. Required for valid markup depending on the type
telephone A business phone number meant to be the primary contact method for customers.
url The fully-qualified URL of the specific business location.
sameAs An array of URLs that represent this business
openingHours Opening hour specification of business. You can provide this as a single object, or an array of objects with the properties below.
openingHours.opens The opening hour of the place or service on the given day(s) of the week.
openingHours.closes The closing hour of the place or service on the given day(s) of the week.
openingHours.dayOfWeek The day of the week for which these opening hours are valid. Can be a string or array of strings. Refer to DayOfWeek
openingHours.validFrom The date when the item becomes valid.
openingHours.validThrough The date after when the item is not valid.
review A review of the local business.
review.author The author of this content or rating.
review.reviewBody The actual body of the review.
review.datePublished Date of first broadcast/publication.
review.name The name of the item.
review.rating The rating given in this review
review.rating.ratingValue The rating for the content.
review.rating.reviewAspect This Review or Rating is relevant to this part or facet of the itemReviewed.
review.rating.worstRating The lowest value allowed in this rating system. If worstRating is omitted, 1 is assumed.
review.rating.bestRating The highest value allowed in this rating system. If bestRating is omitted, 5 is assumed
areasServed The geographic area where a service or offered item is provided.
areasServed.GeoCircle A GeoCircle is a GeoShape representing a circular geographic area.
areasServed.GeoCircle.geoMidpoint Indicates the GeoCoordinates at the centre of a GeoShape e.g. GeoCircle.
areasServed.GeoCircle.geoMidpoint.latitude The latitude of a location. For example 37.42242
areasServed.GeoCircle.geoMidpoint.longitude The name of the item.
areasServed.GeoCircle.geoRadius Indicates the approximate radius of a GeoCircle (metres unless indicated otherwise via Distance notation).
makesOffer A pointer to products or services offered by the organization or person.
makesOffer.offer An offer to transfer some rights to an item or to provide a service
makesOffer.offer.priceSpecification One or more detailed price specifications, indicating the unit price and delivery or payment charges.
makesOffer.offer.priceSpecification.priceCurrency The currency of the price, or a price component when attached to PriceSpecification and its subtypes.
makesOffer.offer.priceSpecification.price The offer price of a product, or of a price component when attached to PriceSpecification and its subtypes.
makesOffer.offer.itemOffered An item being offered (or demanded)
makesOffer.offer.itemOffered.name The name of the item
makesOffer.offer.itemOffered.description The description of the item.
action An action performed by a direct agent and indirect participants upon a direct object.
action.target Indicates a target EntryPoint for an Action.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

NOTE:

Images are recommended for most of the types that you can use for LocalBusiness; if in doubt, you should add an image. You can check your generated JSON over at Google's Structured Data Testing Tool

Logo

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;
Property Info
url The URL of the website associated with the logo. Logo guidelines
logo URL of a logo that is representative of the organization.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

Product

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;

Also available: sku, gtin8, gtin13, gtin14.

Valid values for offers.itemCondition:

Valid values for offers.availability:

The property aggregateOffer is also available: (It is ignored if offers is set)

Required properties

Property Info
lowPrice The lowest price of all offers available. Use a floating point number.
priceCurrency The currency used to describe the product price, in three-letter ISO 4217 format.

Recommended properties

Property Info
highPrice The highest price of all offers available. Use a floating point number.
offerCount The number of offers for the product.
offers 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.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

More info on the product data type can be found here.

Social Profile

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;

Required properties

Property Info
type Person or Organization
name The name of the person or organization
url The URL for the person's or organization's official website.
sameAs An array of URLs for the person's or organization's official social media profile page(s)

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

Google Supported Social Profiles

  • Facebook
  • Twitter
  • Google+
  • Instagram
  • YouTube
  • LinkedIn
  • Myspace
  • Pinterest
  • SoundCloud
  • Tumblr

News Article

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;

Park

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;

Required properties

Property Info
@id Globally unique ID of the specific park in the form of a URL.
address Address of the specific park location
address.addressCountry The 2-letter ISO 3166-1 alpha-2 country code
address.addressLocality City
address.addressRegion State or province, if applicable.
address.postalCode Postal or zip code.
address.streetAddress Street number, street name, and unit number.
name Park name.
description Park description.

Supported properties

Property Info
geo Geographic coordinates of the park.
geo.latitude The latitude of the park location
geo.longitude The longitude of the park location
images An image or images of the park. Required for valid markup depending on the type
telephone A business phone number meant to be the primary contact method for customers.
url The fully-qualified URL of the specific park.
openingHours Opening hour specification of the park. You can provide this as a single object, or an array of objects with the properties below.
openingHours.opens The opening hour of the place or service on the given day(s) of the week.
openingHours.closes The closing hour of the place or service on the given day(s) of the week.
openingHours.dayOfWeek The day of the week for which these opening hours are valid. Can be a string or array of strings. Refer to DayOfWeek
openingHours.validFrom The date when the item becomes valid.
openingHours.validThrough The date after when the item is not valid.
isAccessibleForFree Whether or not the park is accessible for free.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside oft the app directory. |

Google Docs for Social Profile

Video

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;

Required properties

Property Info
name The title of the video.
description The description of the video. HTML tags are ignored.
thumbnailUrl A URL pointing to the video thumbnail image file.
uploadDate The date the video was first published, in ISO 8601 format.

Recommended properties

Property Info
contentUrl A URL pointing to the actual video media file, in one of the supported encoding formats.
duration The duration of the video in ISO 8601 format
embedUrl A URL pointing to a player for the specific video.
expires If applicable, the date after which the video will no longer be available.
interactionStatistic The number of times the video has been watched.
publication If your video is happening live and you want to be eligible for the LIVE badge.
regionsAllowed The regions where the video is allowed.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

VideoGame

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;

Required properties

Property Info
name The title of the video game.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

More information about the schema

Event

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;

Required properties

Property Info
name The name of the event
startDate The start date time of the event in iso8601 format
endDate The end date time of the event in iso8601 format
location Location of the event, can be Place or VirtualLocation

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

Place type Requires address property and name.

VirtualLocation type Requires url property, doesn't require name.

Supported properties

Property Info
description Description of the event
location.name Name of the location
location.sameAs URL of a reference web page that identifies location
images An image or images of the event.
url The fully-qualified URL of the event.
offers 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.
performers All artists that perform at this event. You can provide this as a single object, or an array of objects with the properties below.
performers.name The name of the performer
performers.type Either Person or PerformingGroup
organizer The organizer of the event
organizer.type Either Organization or Person
organizer.name Name of the organizer of the event
organizer.url URL of the organizer of the event
eventStatus Status of the event, type EventStatus
eventAttendanceMode Attendance mode of the event, type EventAttendanceMode

EventStatus type

  • 'EventCancelled'
  • 'EventMovedOnline'
  • 'EventPostponed'
  • 'EventRescheduled'
  • 'EventScheduled'

EventAttendanceMode type

  • 'MixedEventAttendanceMode'
  • 'OfflineEventAttendanceMode'
  • 'OnlineEventAttendanceMode'

offers Required properties

Property Info
offers.price The cost of the offer
offers.priceCurrency The currency of the offer

offers Recommended properties

Property Info
offers.priceValidUntil Until when the price of the offer expires
offers.itemCondition The condition of the product or service
offers.availability The availability of this item — for example In stock, Out of stock, Pre-order, etc.
offers.url URL of the item
offers.seller The person who is selling this item
offers.seller.name The name of the person
offers.validFrom Since when the price of the offer is valid

The property aggregateOffer is also available: (It is ignored if offers is set)

Required properties

Property Info
lowPrice The lowest price of all offers available. Use a floating point number.
priceCurrency The currency used to describe the product price, in three-letter ISO 4217 format.

Recommended properties

Property Info
highPrice The highest price of all offers available. Use a floating point number.
offerCount The number of offers for the product.

For reference and more info check Google's Search Event DataType

Q&A

Q&A pages are web pages that contain data in a question-and-answer format, which is one question followed by its answers.

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' },
        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',
          },
        },
        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',
            },
          },
          {
            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',
            },
          },
        ],
      }}
    />
  </>
);

export default Page;

Required properties

Property Info
mainEntity The Question for this page must be nested under the mainEntity property of the QAPageJsonld component.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

mainEntity Required properties

Property Info
answerCount The total number of answers to the question.
acceptedAnswer or suggestedAnswer To be eligible for the rich result, a question must have at least one answer – either an acceptedAnswer or a suggestedAnswer.
name The full text of the short form of the question.

mainEntity Supported properties

Property Info
author The author of the question.
dateCreated The date at which the question was added to the page, in ISO-8601 format.
text The full text of the long form of the question.
upvoteCount The total number of votes that this question has received.

acceptedAnswer/suggestedAnswer Required properties

Property Info
text The full text of the answer.

acceptedAnswer/suggestedAnswer Supported properties

Property Info
author The author of the question.
dateCreated The date at which the question was added to the page, in ISO-8601 format.
upvoteCount The total number of votes that this question has received.
url A URL that links directly to this answer.

For reference and more info check Google's Search Q&A DataType

Collection Page

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.

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;

Required properties

Property Info
name The name of the item.
hasPart Indicates an item or CreativeWork that is part of this item, or CreativeWork (in some sense).

Supported properties

Property Info
hasPart.creativeWork The most generic kind of creative work, including books, movies, photographs, software programs, etc

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

creativeWork Required properties

Property Info
hasPart.creativeWork.author 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.
hasPart.creativeWork.about The subject matter of the content.
hasPart.creativeWork.datePublished Date of first broadcast/publication.
hasPart.creativeWork.name The name of the item.

creativeWork Supported properties

Property Info
hasPart.creativeWork.audience An intended audience, i.e. a group for whom something was created.
hasPart.creativeWork.keywords Keywords or tags used to describe this content. Multiple entries in a keywords list are typically delimited by commas.
hasPart.creativeWork.thumbnailUrl A thumbnail image relevant to the Thing.
hasPart.creativeWork.image An image of the item. This can be a URL or a fully described ImageObject.

For reference and more info check Collection Page DataType

Profile page

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.

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;

Required properties

Property Info
breadcrumb A set of links that can help a user understand and navigate a website hierarchy represented as string or BreadcrumbList.

Supported properties

Property Info
lastReviewed Date on which the content on this web page was last reviewed for accuracy and/or completeness.

Other | useAppDir | This should be set to true if using new app directory. Not required if outside of app directory. |

For reference and more info check Profile Page DataType

Carousel

Required properties of Carousel Component

Property Info
type The type of carousel
data The data in the form of an array for the item list in the carousel

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

Default (Summary List)

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',
        },
      ]}
    />
  </>
);

Data required properties

Property Info
url URL of the item's detailed page.

Course

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',
        },
      ]}
    />
  </>
);

Data required properties

Property Info
courseName The title of the course.
description A description of the course. Display limit of 60 characters.
providerName The course provider name.
url URL of the item's detailed page .

Data Recommended properties

Property Info
providerUrl The url to the course provider.

Movie

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' },
          },
        },
      ]}
    />
  </>
);

Data required properties

Property Info
name Name of the movie.
image An image that represents the movie.
url URL of the item's detailed page.

Data Recommended properties

Property Info
director The directors of the movie.
dateCreated The date the movie was released.
aggregateRating Aggregate Rating object for the movie.
review Review for the movie.

Recipe

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',
          },
        },
      ]}
    />
  </>
);

Data required properties

Property Info
name The name of the dish.
description A description of the recipe
authorName The name of the recipe author
ingredients A list of ingredient strings
instructions -
instructions.name The name of the instruction step.
instructions.text The directions of the instruction step.
url URL of the item's detailed page.

Custom

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',
        },
      ]}
    />
  </>
);

Data Required Properties

Property Info
type Type of the item.
name Name of the item.

Data Recommended properties

Property Info
position Position of the item. If not pass property, it will increase regularly.

Software App

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"
    />
  </>
);

Data required properties

Property Info
name The name of the app.
price Price of the app. If the app is free of charge, set offers.price to 0
priceCurrency If the app has a price greater than 0, you must include offers.currency.
aggregateRating The average review score of the app. (Not required if review is present.)
review A single review of the app. (Not required if aggregateRating is present.)

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

Data Recommended properties

Property Info
operatingSystem The operating System supported by the game it self.
applicationCategory Desktop Software or Video Game...

Data other properties

Property Info
keywords Keywords or tags used to describe this content. Multiple entries in a keywords list are typically delimited by commas.

For reference and more info check Google docs for Software App and Schema.org docs

Organization

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: '[email protected]',
          areaServed: 'US',
          availableLanguage: ['English', 'Spanish', 'French'],
        },
        {
          telephone: '+1-877-746-0909',
          contactType: 'customer service',
          email: '[email protected]',
          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/"
    />
  </>
);

Data required properties

Property Info
name The name of the Organization.
url Url of the organization
contactPoint
contactPoint.telephone An internationalized version of the phone number, starting with the "+" symbol and country code
contactPoint.contactType Description of the purpose of the phone number i.e. Technical Support.

Data Recommended properties

Property Info
logo ImageObject or URL an associated logo to the Organization.
type Organization type, check here
legalName The official name of the organization, e.g. the registered company name.
sameAs URL of a reference Web page that unambiguously indicates the item's identity.
address Address of the specific business location
address.addressCountry The 2-letter ISO 3166-1 alpha-2 country code
address.addressLocality City
address.addressRegion State or province, if applicable.
address.postalCode Postal or zip code.
address.streetAddress Street number, street name, and unit number.
contactPoint.areaServed String or Array of geographical regions served by the business. Example "US" or ["US", "CA", "MX"]
contactPoint.availableLanguage Details about the language spoken. Example "English" or ["English", "French"]
contactPoint.email Email asscosiated with the business`

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

For reference and more info check Docs

Brand

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',
      }}
    />
  </>
);

Data required properties

Property Info
id 'URL to main entity of page'

Data Recommended properties

Property Info
logo ImageObject or URL an associated logo to the Organization.
slogan A slogan or motto associated with the item.
aggregateRating.ratingValue The rating for the content.(Check the reference
aggregateRating.ratingCount The count of total number of ratings.
aggregateRating.reviewCount The count of total number of reviews.
aggregateRating.bestRating The highest value allowed in this rating system. If bestRating is omitted, 5 is assumed.
aggregateRating.worstRating The lowest value allowed in this rating system. If worstRating is omitted, 1 is assumed.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

For reference and more info check Docs

WebPage

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',
      }}
    />
  </>
);

Data required properties

Property Info
id 'URL to main entity of page'

Data Recommended properties

Property Info
description ImageObject or URL an associated logo to the Organization.
lastReviewed Date on which the content on this web page was last reviewed for accuracy and/or completeness.
reviewedBy.type People or organizations that will review the content of the web page.
reviewedBy.name Name of the entity that have reviewed the content on this web page for accuracy and/or completeness.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

For reference and more info check Docs

Image Metadata

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;

Data Recommended properties

Property Info
contentUrl A URL to the actual image content. Google uses contentUrl to determine which image the photo metadata applies to.
creator.name The name of the creator.
creditText The name of person and/or organization that is credited for the image when it's published.
copyrightNotice The copyright notice for claiming the intellectual property for this photograph. This identifies the current owner of the copyright for the photograph.
license 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.
acquireLicensePage A URL to a page where the user can find information on how to license that image.

Other | useAppDir | This should be set to true if using the new app directory. Not required if outside of the app directory. |

For reference and more info check Google Docs

Contributors

Contributing Guide

A massive thank you to everyone who contributes to this project 👏

next-seo's People

Contributors

adrianu197 avatar allcontributors[bot] avatar bujoralexandru avatar dependabot-preview[bot] avatar dependabot[bot] avatar econdie avatar edoardolincetto avatar elitan avatar erickeno avatar garmeeh avatar hsynlms avatar jeromefitz avatar junkboy0315 avatar kahoowkh avatar kenleytomlin avatar mkaynakk avatar mogyuchi avatar myoxocephalus avatar nandenjin avatar nyedidikeke avatar rodzy avatar ryanmercadante avatar seandemps avatar shabith avatar shaswatsaxena avatar snelsi avatar timreynolds avatar valse avatar xiaotiandada avatar ykzts avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

jonatansalas jeromefitz anhngd econdie qd-qd alusor kobbiman faikarghas erickeno ktchan825 rajenderdandyal fabioguelfi babadzhanov hayscoding peoople tim-soft erikhofer sebastianinsights namevalues kacoulib nilportugues adonig bolonio jeroenvisser101 guenth39 anoop-gupt zetoke calvinvoo2 tolgig foundingnimo petertulala nik-john stungkit richhastings none23 0x54321 fazlur00 nateetorn echoulen arnaud-zg kenleytomlin nishidaryu416 ravid7000 einaralex pranaygp platohq darnellbelcourt99999 redshoga adams0619 silvenon rjaus sumandas0 manuganji tasmap benoitma kol-93 nam-sh michaelgmcd mm3y3r mengqing ytzvan codebendervt pueyo5 statebait wyeo fire-depot kmhari sambasallah angusd3v jpd61 jaredrolt kristapsstrals 0xmentornotapseudo junkboy0315 kahoowkh qrymy abranhe-forks gtodd876 schlosser joeyorlando tacomanator smolanpolan sparta-9 hamed5511 clairesg arcadia404 malsharajapaksha mistreckless adas22 anu082000 thanapattop kimjane93 omar-dulaimi mko2008mko danielr18 tompradat pdrbrnd rodzy sxhylkl houxianxin

next-seo's Issues

opengraph attributes inherit from main attributes

I feel like opengraph title/description/url attributes should default to the regular title/description/canonical if not set. Having to pass the same things in twice seems redundant for the avg use case....I suspect most people generally want title/description/url/canonical to be the same in both places. It would be more convenient if og attributes were more like overrides.

mobileAlternate & languageAlternate doesn't work with <NextSeo>

For ver 2.1.0, the following code snippet doesn't work:
<NextSeo mobileAlternate={{ media: "only screen and (max-width: 640px)", href: "https://m.canonical.ie" }} />

But it works with <DefaultSeo>:
<DefaultSeo mobileAlternate={{ media: "only screen and (max-width: 640px)", href: "https://m.canonical.ie" }} />

The same thing happens with languageAlternate.
Please help check, thanks.

trouble implementing seo correctly in next.js app using next-seo

hi guys...
I am using next-seo to implement seo in my next.js app. This app uses feather.js in the backend api ...

I have implemented a default seo config in _app.js file as per the instruction ... I need to override this in the users' dashboard with user info ... but this info comes from the feathers.js backend api .... so it's fetched asynchronously ...
I fetched the info in ComponentDidMount ...

What baffles me is that much as the overrides are reflected when I go to the users dashboard, when I view page source on the page in the dashboard, the override is not reflected ... the metatags and title in that html remain the same as they were in pages like the landing page which never overrode the seo...

Kindly advise what I should do to fix this. Thanks ....

Here is the gist with my code snippets .....
https://gist.github.com/jermsam/673380b2cf8451d88362c9c1c473e3a1

Thanks so much.

Add extra json-ld fields outside of google's structured data spec

From schema.org there are a lot more properties supported in the json-ld spec, however most are ignored by Google when constructing structured search snippets.

I guess the intention of the library is specifically for SEO but it would be nice to add custom fields into the json-ld components for other use cases. In particular I have a case where I need to add json-ld for analytics with parse.ly https://www.parse.ly/help/integration/jsonld/ and some of their required fields are not included

Title not changed using NextSeo in a nextjs page.

I'm currently implementing Next-SEO as follows.
in m _app.js I have the next defaults. this

import { DefaultSeo } from 'next-seo';
import SEO from '../next-seo.config';

class MyApp extends App {
        return (
            <SidebarContext.Provider value={this.state}>
                <DefaultSeo {...SEO} />
                <Provider store={store}>
                ...........
           </SidebarContext.Provider>
}

This next-seo.config contains title, open graph data and some other defaults.

Then on a specific page, I implemented NextSeo component overwriting the normal title and open graph title just as an example.
But when I just normally implement this it's not working.

const Partners = ({ posts = [] }) => (
    <Page theme="dark">
        <NextSeo
            title="My test title"
            description="A short description goes here."
            openGraph={{
                title: 'my title',
                description: 'my description',
            }}
        />
        <ContentPage>
            <div className="projecten">{posts ? posts.map(Item => <PartnerTile data={Item} />) : ''}</div>
        </ContentPage>
    </Page>
);

but when i add a dummy component from next/head my title gets nicely changed to "my test title" Why?

const Partners = ({ posts = [] }) => (
    <Page theme="dark">
        <NextSeo
            title="My test title"
            description="A short description goes here."
            openGraph={{
                title: 'my title',
                description: 'my description',
            }}
        />
       <Head>
          <title>aaaa</title>
       </Head>
        <ContentPage>
            <div className="projecten">{posts ? posts.map(Item => <PartnerTile data={Item} />) : ''}</div>
        </ContentPage>
    </Page>
);

Defaults not being overridden on initial page rendering

Hi,

I'm using your library in my project and it seems that the default values I have set up only get overridden when I navigate from one page to another; when a certain page is the first page I visit, it uses the default values and ignores its own config object.

Here's my page (this is the actual page code—I've stripped it down to just Next Seo for testing purposes):

import NextSeo from 'next-seo'

export default class Post extends React.Component {
	render() {
		return(
			<div>
				<p>Booh!</p>
			        <NextSeo config={{
					description: "This is my description",
					title: "This is my title"
			        }} />
			</div>
		)
	}		
}

If it's the first page I visit, I don't get "This is my title" and "This is my description" in the meta tags (I get default values instead); if for example I visit the home page first and then navigate to this page, then I do see "This is my title" and "This is my description" in the meta tags.

Here is my config file where I set up the default values:

export const pageSEO = ( page, noindex ) => {
	return {
		title: stripHTML( page.title ),
		description: stripHTML( page.description ), 
		noindex: noindex, 
		openGraph: {		
			description: stripHTML( page.description ), 
			title: stripHTML( page.title ),
			images: [
				{
					url: page.image
				}
			]		
		}
	}
}

Then I add the defaults to all pages in _app.js

import NextSeo from 'next-seo'
import { pageSEO } from '../config/SEO'

render() {
        const { Component, pageProps, myPage } = this.props
        return(
            <Container>
                <Provider store={ this.appData }>
                    <AppInterface.Provider value={{ state: this.state, actions: this.actions }}>
                        <Component { ...pageProps } />
                        <NextSeo config={ pageSEO( myPage ) } />
                    </AppInterface.Provider>
                </Provider>
            </Container>                          
        )
}

Render a default canonical tag

It would be convenient to have the canonical tag be rendered with the current page url by default if none is passed into the config. This would save having to manually specify it for every page, (which is essentially duplicating the pages/ structure). I can create a PR if this would be an acceptable idea

noindex defaultConfig always indexes pages

Hi,

First, thank you for this nice lib :)
I've been having trouble understanding the default config setup.
I used several default settings and of course the noindex properties.

I don't want to be indexed so I put : noindex: true

On pages I only overrides title AND/OR description

<NextSeo
      config={{
        title: 'My Title Page'
      }}
    />

But in the end the noindex seems to be used as false and therefore the website is indexed.
Any idea ?

Thanks

mutiple data in ProductJsonLd

how can loop the productjsonld if i have mutiple products in same page. map function is overriding.if i do loop.

i want display like this.
[ { "@context":"https://schema.org/", "image":[ "https://lssdsdsdsds" ], "@type":"Product", "name":"Product name" }, { "@context":"https://schema.org/", "image":[ "https://lssdsdsdsds" ], "@type":"Product", "name":"Product name 2" }, { "@context":"https://schema.org/", "image":[ "https://lssdsdsdsds" ], "@type":"Product", "name":"Product name 3" }, ]

code-splitting

With the latest Next.js canary with webpack 4, it should be possible to publish .mjs files where import and export are not transpiled. This will allow webpack to code-split next-seo.

Additional Properties for SocialProfile

Although not well documented the markup for social profile is normally used with other related properties like description, telephone, address and logo (org only) show in the valid JsonLd below;

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": "your name",
  "description": "Some description", 
  "telephone": "+19172423826",
  "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"
  ],
    "address" :{
    "@type": "PostalAddress",
    "streetAddress": "123 William St",
    "addressLocality": "New York",
    "addressRegion": "NY",
    "postalCode": "10038",
    "addressCountry": "US"
  },
  "logo": "http://www.example.com/images/logo.png"
}
</script>

I'm happy to add support for these additional properties to social profile or I could as new structured data types as Logo and Local Business which is how the google documentation refers to them, although technically they're supported in the same block as social information.

@garmeeh I'm planning to do this work as I need it either locally or as a PR if you can provide some guidance on how you'd prefer this done.

If any of this isn't clear please let me know.

NextSeo is not overriden in each component when I use DefaultSeo.

Issue with overriding Defaultseo in next application. I have implemented DefaultSeo in _app.js and trying to override the DefaultSeo using NextSeo in the other components as mentioned by the documentation of Next js. But the meta tags are not getting overriden as mentioned in the docs when I view the page source and instead the changes are reflecting only in the elements when I inspect the site. I have shared the code. Can anyone please help me out with this issue?

View the code here

paths with query get escaped

Hi, i use a generated image containing query parameters as og image, but the path in the final output include escaped & making the path invalid:

path:

https://images.ctfassets.net/gz0sygvqczyz/1LlU2yNbXooedOqW3UeNA1/b1d427094354ac34cf9dc4f8a319957a/fieldset.png?fit=pad&f=top&w=1200&h=630&bg=rgb:F3F6F9

output:

https://images.ctfassets.net/gz0sygvqczyz/1LlU2yNbXooedOqW3UeNA1/b1d427094354ac34cf9dc4f8a319957a/fieldset.png?fit=pad&amp;f=top&amp;w=1200&amp;h=630&amp;bg=rgb:F3F6F9

The original path is working, while the second one nope, causing a wrong parsing by crawlers.

issue with localBusiness JSON-LD

next-seo/src/jsonld/localBusiness.jsx

Line 8 in 1c9ed66

images.length ? `"image": [${images.map(image => `"${image}"`)}],` : '';

While in the process of converting localBusiness to typescript, I realized that this check is not efficient because both string and array have a length property. If someone passes a string it will throw an error, even though string value is considered a valid value as well.

Maybe check if it's a string or an array

Array.isArray(images) ? `"image": [${images.map(image => `"${image}"`)}],` : images;

Passing custom meta tags

Great package! I'm testing it as a Nextjs plugin and it works really good!

Just wondering if it is possible to pass into the next-seo.config.js file some "custom" meta tag like author, keywords, ... (some of https://gist.github.com/lancejpollard/1978404) to handle all the head tags in one place?
Like export default { title: "My website", description: "Describing my website", canonical: "https://www.canonical.ie/b", keywords: "keywords stuffing", author: "A cool guy", openGraph: {...

Or is it out of the scope of next-seo package?

Dynamic og:url

It would be convenient to have a function that defines og:url as the current page

Module not found: Can't resolve 'react

Hi!

I got this error Module not found: Can't resolve 'react when trying to use the library as follows:

import * as React from 'react'
import NextSeo from 'next-seo'

export default () => (
  <NextSeo
    config={{
      title: 'Simple Usage Example',
      description: 'A short description goes here.',
    }}
  />
)

Do I miss something :)?

How to deal with HTML entities in page titles?

My page titles are coming from Wordpress and some contain HTML entities (like &#8211;).

How can I convert this inside NextSEO config? Normally I would use dangerouslySetInnerHtml, but I don't think that syntax would work inside the config.

Adding table of contents

The documentation is growing bigger by the day, do you think having a table of contents at the top of the documentation going to make it easy to navigate? If so I can submit a PR.

Variable scoping causing issues between renders

For example, in our case page A has a titleTemplate defined and page B doesn’t. If page B would be rendered after page A, the page title would still follow the template because it was served from memory. The root cause is the defaults object inside buildTags.jsx defined in global scope.

I created a PR to address this issue #64

The wrong behaviour is also visible in your own snapshots, where the title of "Article SEO" would contain the template defined in an earlier test when it shouldn’t, see fee129e. Let me know if this is enough for a reproduction, otherwise I can also create a sandbox or so ✌️

Can't implement NextSeo due to other library

I'm encountering this issue on my nextjs app Unhandled Rejection (Invariant Violation): React.Children.only expected to receive a single React element child. , looks like <IntlProvider> only accepts a single child component. If that's the case where can I put the <NextSeo /> component.

Screen Shot 2019-04-07 at 10 42 57 AM

Here's the content of my _app.js

Screen Shot 2019-04-07 at 10 46 24 AM

Twitter not picking up OG tags

Super grateful for the package @garmeeh!

I see you mention in a few issues (#14) that Twitter uses the OG tags but it's not.

Would be good if next-seo allowed setting of any OG tag provided so we can provide tags as necessary.

How to do noindex/follow? index/nofollow?

It seems there is no config for "follow", and just setting noindex to true sets the meta robots to 'noindex, nofollow'. On certain pages I want to set 'noindex,follow'. How can I achieve this?

Conversely, what about 'index,nofollow'.

These are rare in use, but I think still important to have the ability to do so.

Meta Conflict using withAmp in Next 8.1

Found conflicting amp tag "meta" with conflicting prop name="viewport"

This happens during validation when using the new withAmp HOC in conjunction with NextSeo

Expected Behavior: No warning message during AMP validation

Work as a plugin

As it stands, it's a standalone component that you have to inject and manage the config object for. Would be nice if it worked as a plugin that injected itself and config could simply be dropped into next.config.js.

This would also allow people using next-compose-plugins for example to more easily change the configuration dynamically.

Using nextSeo to manage opengraph I receive a warning from Facebook in Debugger

Using this configuration

 <NextSeo
          config={{
            title: 'my title',
            description: 'A short description goes here.',
            openGraph: {
              url: 'my url',
              title: 'my og title',
              description: 'my og description',
              images: [
                {
                  url: 'https://cdn.hasselblad.com/c81e7ee74fdc106a965f51b35c8dd87503a16f0e_tom-oldham-h6d-50c-sample1.jpg',
                  alt: 'Og Image Alt',
                }
              ],
              site_name: 'my site name',
            }
          }}
        />

I receive these warning

Extraneous Property | Objects of this type do not allow properties named 'og:title'.
Extraneous Property | Objects of this type do not allow properties named 'og:description'.
Extraneous Property | Objects of this type do not allow properties named 'og:image'.
Extraneous Property | Objects of this type do not allow properties named 'og:image:alt'.
Extraneous Property | Objects of this type do not allow properties named 'og:site_name'.

Breadcrumb JSON-LD missing 'id' field

Google Search Console is reporting that the breadcrumb data is missing the 'id' field. Apparently the schema has changed a bit.

Instead of:

        {
          position: 1,
          name: 'Books',
          item: 'https://example.com/books',
        },
        {
          position: 2,
          name: 'Authors',
          item: 'https://example.com/books/authors',
        }, ...

It should now be:

        {
          position: 1,
          item:
                  {
                   '@id': 'https://example.com/books',
                    name: "Books"
                   }
        },
        {
          position: 2,
          item:
                  {
                   '@id': 'https://example.com/authors',
                    name: "Authors"
                   }
        }, ...

Documentation:
https://schema.org/item
https://jsonld.com/breadcrumb/

Thanks for the great package!

OG:Video

Hello,

I am currently using your package and love it, however I noticed the og:video tag is left empty. Is it possible to allow duplicate image url (og:image) to og:video , as I have read that having it identical is fine. I can't figure out how to get a variable copied to og:video at the moment. (server rendering React).

Best regards,

Some Head Elements from Document Get Rendered Twice

pages/_app.js:

class MyApp extends App {
    /* ... */

    render() {
        return (
            <Container>
                <DefaultSeo config={seoConfig} />
                /* ... */
            </Container>
        );
    }
}

pages/_document.js:

class MyDocument extends Document {
    render() {
        return (
            <html lang="de">
                <Head>
                    <meta charSet="utf-8" />
                    <meta
                        name="viewport"
                        content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
                    />
                    <meta name="theme-color" content={theme.palette.primary.main} />
                    <link
                        rel="stylesheet"
                        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
                    />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </html>
        );
    }
}

Results in the following HTML document structure:

Screen Shot 2019-07-22 at 13 26 07

Is there a way to fix this?

Issue with productjsonld

Not sure if something is wrong with the example or the way I am configuring it. When I put in

<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" 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', }, }, ]} aggregateRating={{ ratingValue: '4.4', reviewCount: '89', }} offers={{ price: '119.99', priceCurrency: 'USD', priceValidUntil: '2020-11-05', itemCondition: 'http://schema.org/UsedCondition', availability: 'http://schema.org/InStock', seller: { name: 'Executive Objects', }, }} mpn="925872" />
It does not work and I get an error "Error: [next-seo] You must supply an SEO configuration".
However when I insert config it works. example:
<ProductJsonLd **config={{ title: 'About us', description: 'Updated description as well' }}** 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" 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', }, }, ]} aggregateRating={{ ratingValue: '4.4', reviewCount: '89', }} offers={{ price: '119.99', priceCurrency: 'USD', priceValidUntil: '2020-11-05', itemCondition: 'http://schema.org/UsedCondition', availability: 'http://schema.org/InStock', seller: { name: 'Executive Objects', }, }} mpn="925872" />

What is going on here, am I configuring it wrong or was the given example incorrect? The next.js configuration object is located in my _app.js file and it works as intended.

Import both _defaultSEO2 and _blog2

Hi There,

We are using the standard js style and I can't seem to make it happy when importing both the default _defaultSEO2 and _blog2 in the same page without linter errors.

For example:
import { default as NextSeo, BlogJsonLd } from 'next-seo'
gives this lint error:
Use default import syntax to import 'NextSeo'.

Also trying:

import { default as NextSeo } from 'next-seo'
import { BlogJsonLd } from 'next-seo'

or

import NextSeo from 'next-seo'
import { BlogJsonLd } from 'next-seo'

both give
'next-seo' imported multiple times.

Do you know if there is a better way I could import these and still keep the linter free of errors?

Thank You!

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

My project has products so I have a subfolder in pages for example:

/pages/produkte/myproduct.js

I am using an HOC - Produkte.js. This is the root component of every product and I am passing values via props to render it.

  • Trying to set <NextSeo/> to myproduct.js changes will not apply and the title is left default.

  • Trying to set <NextSeo/> in Produkte.jsand passing props from myproduct.js will throw an error.

Invariant Violation: Element type is invalid: 
expected a string (for built-in components) or a class/function 
(for composite components) but got: undefined. 
You likely forgot to export your component from the file it's defined in, 
or you might have mixed up default and named imports.

myproduct.js

  render() {
    return (
      <Produkt
        images={ImgArray}
        headline={"TestProduct TestProduct"}
        subHeadline={"TestProduct TestProduct | TestProduct"}
        bulletPoints={BulletPoints}
        reviews={Reviews}
        price={"11,90"}
        sales={"4623"}
      >
        <NextSeo config={SeoConfig} />
        <ProductJsonLd
          productName="TestProduct"
          description={"TestProduct - TestProduct | TestProduct"}
          brand="TestProduct"
          aggregateRating={{
            ratingValue: "4.7",
            reviewCount: "215"
          }}
        />
      </Produkt>
    );
  }

EDIT:
Removed <ProductJsonLd/> and can verify that the error is coming from <NextSeo/>

Sitemap still matters

Hi, please consider supporting sitemap.xml and robots.txt in your lovely package. It's neccessary for SEO.

Do we need open graph prefix in header?

Do you have any insight on if prefix="og: http://ogp.me/ns#" is required in the markup to specify a page using open graph? It shows this on http://ogp.me/ (it includes it in the tag but from some research it has the same effect as assuming all of the meta data is within the head).

I struggle to find a clear answer, I am basically referring to this question: https://stackoverflow.com/questions/48933419/opengraph-prefix-in-header-necessary and if next-seo needs to include this prefix, also depending on the type specified it would include article: http://ogp.me/ns/article# , or profile, book, etc.

I couldn't really find a clear answer if it's required or just suggested, and i looked through several news websites for example that do seem to include this prefix markup. If you have any insight I'd be interested to know, or if you think this should be implemented, appreciate it.

Full Twitter options

Does next-seo have the ability to set the twitter description and image inside the Twitter object? I can't see anything documented in the readme.

Thanks

[Question] TreeShaking the modules, exclude Jsonld package.

I am analysing the bundle size of my project. I realised the jsonld is around 17.3 KB parsed while i am using it at all.

Is it possible to import only the NextSeo component?

I tried import NextSeo from "next-seo/meta/defaultSEO.jsx"; and import NextSeo from "next-seo/meta/defaultSEO";, but it doesn't work.

Include title Template

Feature Request

Include title template which can be appended before or after every title if defined.
example config

{
  title: "This is a test title.",
  titleTemplate: "Next SEO | %s"
}

and the output will be

<title>Next SEO | This is a test title.</title>

%s will be replaced by the title, so depending on the position, that's where the title will be appended.

incorrect peer dependency

After upgrading to V8 I have this one pestering me about.

One suggestion might be to have a renovate integration, I have no allegiance but I happen to know it would solve this particular problem based on the PR seen on next-nprogress

Missing twitter tags

Please add missing twitter tags to improve SEO score.

Thanks for next-seo is amazing and simple to use.

captura de pantalla 2018-11-09 a la s 8 24 14 p m

ProductJsonLd is not working

ProductJsonLd is not working I get this error: 'Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of ProductDetails.'

I tried ArticleJsonLd and it does work.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.