next-seo

What is next-seo?

The next-seo package is a powerful tool for managing SEO (Search Engine Optimization) in Next.js applications. It provides a simple and declarative way to set up SEO metadata, Open Graph tags, Twitter cards, and more, making it easier to optimize your web pages for search engines and social media platforms.

What are next-seo's main functionalities?

Basic SEO Configuration

This feature allows you to set basic SEO metadata such as the title and description of a page. The NextSeo component is used to wrap the page content, and the title and description props are used to set the respective metadata.

import { NextSeo } from 'next-seo';

const Page = () => (
  <>
    <NextSeo
      title="Simple Usage Example"
      description="A short description goes here."
    />
    <h1>Hello World</h1>
  </>
);

export default Page;

Open Graph Tags

This feature allows you to set Open Graph tags, which are used by social media platforms to display rich previews of your pages. The openGraph prop is used to provide an object with various Open Graph properties such as url, title, description, images, and site_name.

import { NextSeo } from 'next-seo';

const Page = () => (
  <>
    <NextSeo
      openGraph={{
        url: 'https://www.example.com/page',
        title: 'Open Graph Title',
        description: 'Open Graph Description',
        images: [
          {
            url: 'https://www.example.com/og-image.jpg',
            width: 800,
            height: 600,
            alt: 'Og Image Alt',
          },
        ],
        site_name: 'Example Site',
      }}
    />
    <h1>Hello World</h1>
  </>
);

export default Page;

Twitter Card Tags

This feature allows you to set Twitter card tags, which are used by Twitter to display rich previews of your pages. The twitter prop is used to provide an object with various Twitter card properties such as handle, site, and cardType.

import { NextSeo } from 'next-seo';

const Page = () => (
  <>
    <NextSeo
      twitter={{
        handle: '@handle',
        site: '@site',
        cardType: 'summary_large_image',
      }}
    />
    <h1>Hello World</h1>
  </>
);

export default Page;

Other packages similar to next-seo

react-helmet

react-helmet is a popular library for managing changes to the document head in React applications. It allows you to set meta tags, link tags, and other head elements declaratively. Compared to next-seo, react-helmet is more general-purpose and can be used with any React application, not just Next.js.

next-meta

next-meta is another package for managing SEO metadata in Next.js applications. It provides a simple API for setting meta tags, Open Graph tags, and Twitter cards. Compared to next-seo, next-meta is less comprehensive but still useful for basic SEO tasks.

README

Next SEO

Next SEO is a plugin that makes managing your SEO easier in Next.js projects.

Version 2.x is compatible with next@v8.1.1-canary.54+ and above Version 1.x is compatible with next@6.0.0 and above

Both versions are still maintained. If upgrading from v1 to v2, please note that the NextSeo component has been changed from a default to a named export, so you need to update the import statements in your pages accordingly to avoid errors. Also, values are now passed down as properties to the SEO components instead of only using a config object so refactor your code accordingly (this would fail silently and your metadata will not be there, so double check and inspect your pages' HTML).

Version One docs can be found here

Table of Contents

• Usage
  • Setup
  • Add SEO to Page
  • Default SEO Configuration
  • NextSeo Options
    • Title Template
    • No Index
    • dangerouslySetAllPagesToNoIndex
    • No Follow
    • dangerouslySetAllPagesToNoFollow
    • Twitter
    • facebook
    • Canonical URL
    • Alternate
    • Additional Meta Tags
• Open Graph
  • Open Graph Examples
    • Basic
    • Video
    • Article
    • Book
    • Profile
• JSON-LD
  • Article
  • Breadcrumb
  • Blog
  • Course
  • Dataset
  • Corporate Contact
  • FAQ Page
  • Job Posting
  • Local Business
  • Logo
  • Product
  • Social Profile
  • News Article
  • Event
• Contributors

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 --save next-seo

or

yarn add next-seo

Add SEO to Page

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 React from 'react';
import { NextSeo } from 'next-seo';

export default () => (
  <>
    <NextSeo
      title="Simple Usage Example"
      description="A short description goes here."
    />
    <p>Simple Usage</p>
  </>
);

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

Typical page example:

import React from 'react';
import { NextSeo } from 'next-seo';

export default () => (
  <>
    <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',
          },
          {
            url: 'https://www.example.ie/og-image-02.jpg',
            width: 900,
            height: 800,
            alt: 'Og Image Alt Second',
          },
          { url: 'https://www.example.ie/og-image-03.jpg' },
          { url: 'https://www.example.ie/og-image-04.jpg' },
        ],
        site_name: 'SiteName',
      }}
      twitter={{
        handle: '@handle',
        site: '@site',
        cardType: 'summary_large_image',
      }}
    />
    <p>SEO Added to Page</p>
  </>
);

A note on Twitter Tags

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 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 do 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 React from 'react';
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/',
            site_name: 'SiteName',
          }}
          twitter={{
            handle: '@handle',
            site: '@site',
            cardType: 'summary_large_image',
          }}
        />
        <Component {...pageProps} />
      </Container>
    );
  }
}

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/',
    site_name: 'SiteName',
  },
  twitter: {
    handle: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
  },
};

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
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
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 }
additionalMetaTags	array	Allows you to add a meta 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.site_name	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	Peron'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

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 and googlebot meta tags.

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 React from 'react';
import { NextSeo } from 'next-seo';

export default () => (
  <>
    <NextSeo noindex={true} />
    <p>This page is no indexed</p>
  </>
);

/* 
<meta name="robots" content="noindex,follow">
<meta name="googlebot" content="noindex,follow">
*/

dangerouslySetAllPagesToNoIndex

It has the prefix of 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 and googlebot meta tags.

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 Follow on a single page:

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

import React from 'react';
import { NextSeo } from 'next-seo';

export default () => (
  <>
    <NextSeo nofollow={true} />
    <p>This page is not followed</p>
  </>
);

/* 
<meta name="robots" content="index,nofollow">
<meta name="googlebot" 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, googlebot
--	--	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

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

languageAlternate={{
  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.

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

Example:

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

Invalid Examples:

These are invalid as they contain property and name on the same entry.

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

One thing to note on this is that it currently only supports unique tags. This means it will only render one tag per unique name / property. The last one defined will be rendered.

Example:

If you pass:

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

it will result in this being rendered:

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

Open Graph

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

Next SEO currently supports:

• basic
• video
• article
• book
• profile

Open Graph Examples

Basic

import React from 'react';
import { NextSeo } from 'next-seo';

export default () => (
  <>
    <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>
  </>
);

Note

Multiple images is only available in 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 React from 'react';
import { NextSeo } from 'next-seo';

export default () => (
  <>
    <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'],
        },
        site_name: 'SiteName',
      }}
    />
    <h1>Video Page SEO</h1>
  </>
);

Note

Multiple images is only available in 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.

Article

import React from 'react';
import { NextSeo } from 'next-seo';

export default () => (
  <>
    <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>
  </>
);

Note

Multiple images, authors, tags is only available in 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 React from 'react';
import { NextSeo } from 'next-seo';

export default () => (
  <>
    <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>
  </>
);

Note

Multiple images, authors, tags is only available in 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 React from 'react';
import { NextSeo } from 'next-seo';

export default () => (
  <>
    <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>
  </>
);

Note

Multiple images is only available in 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 standardised format for providing information about a page and classifying the page content.

Google has excellent content on JSON-LD -> HERE

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

• Article
• Breadcrumb
• Blog
• Course
• Dataset
• Corporate Contact
• FAQ Page
• Job Posting
• Local Business
• Product
• Social Profile
• News Article

More to follow very, very soon!

Article

import React from 'react';
import { ArticleJsonLd } from 'next-seo';

export default () => (
  <>
    <h1>Article JSON-LD</h1>
    <ArticleJsonLd
      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="Jane Blogs"
      publisherName="Gary Meehan"
      publisherLogo="https://www.example.com/photos/logo.jpg"
      description="This is a mighty good description of this article."
    />
  </>
);

Breadcrumb

import React from 'react';
import { BreadcrumbJsonLd } from 'next-seo';

export default () => (
  <>
    <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',
        },
      ]}
    />
  </>
);

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.

Blog

import React from 'react';
import { BlogJsonLd } from 'next-seo';

export default () => (
  <>
    <h1>Blog JSON-LD</h1>
    <BlogJsonLd
      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."
    />
  </>
);

Course

import React from 'react';
import { CourseJsonLd } from 'next-seo';

export default () => (
  <>
    <h1>Course JSON-LD</h1>
    <CourseJsonLd
      courseName="Course Name"
      providerName="Course Provider"
      providerUrl="https//www.example.com/provider"
      description="Course description goes right here"
    />
  </>
);

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.

Recommended properties

Property	Info
providerUrl	The url to the course provider.

Dataset

import React from 'react';
import { DatasetJsonLd } from 'next-seo';

export default () => (
  <>
    <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"
    />
  </>
);

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.

Corporate Contact

import React from 'react';
import { CorporateContactJsonLd } from 'next-seo';

export default () => (
  <>
    <h1>Corporate Contact JSON-LD</h1>
    <CorporateContactJsonLd
      url="http://www.your-company-site.com"
      logo="http://www.example.com/logo.png"
      contactPoint={[
        {
          telephone: '[phone]',
          contactType: 'customer service',
          areaServed: 'US',
          availableLanguage: ['English', 'Spanish', 'French'],
        },
        {
          telephone: '[phone]',
          contactType: 'customer service',
          contactOption: 'TollFree',
          availableLanguage: 'English',
        },
        {
          telephone: '[phone]',
          contactType: 'technical support',
          contactOption: 'TollFree',
          areaServed: ['US', 'CA'],
          availableLanguage: ['English', 'French'],
        },
      ]}
    />
  </>
);

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"]
gecontactPointo.contactOption	Details about the phone number. Example "TollFree"

FAQ Page

import React from 'react';
import { FAQPageJsonLd } from 'next-seo';

export default () => (
  <>
    <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.',
        },
      ]}
    />
  </>
);

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.

Job Posting

import React from 'react';
import { JobPostingJsonLd } from 'next-seo';

export default () => (
  <>
    <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,
        unitText: 'HOUR',
      }}
      employmentType="FULL_TIME"
      jobLocationType="TELECOMMUTE"
      validThrough="2020-01-06"
      applicantLocationRequirements="FR"
    />
  </>
);

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
hiringOrganization.name	Name of the company offering the job position
hiringOrganization.sameAs	URL of a reference Web page
jobLocation
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.
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
baseSalary.unitText	A string indicating the unit of measurement Base salary guideline
employmentType	Type of employment Employement type guideline
jobLocationType	A description of the job location Job Location type guideline

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="[phone]"
  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',
  ]}
  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',
    },
  ]}
/>

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

NOTE:

Images are required 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 React from 'react';
import { LogoJsonLd } from 'next-seo';

export default () => (
  <>
    <h1>Logo JSON-LD</h1>
    <LogoJsonLd
      logo="http://www.your-site.com/images/logo.jpg"
      url="http://www.your-site.com"
    />
  </>
);

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.

Product

import React from 'react';
import { ProductJsonLd } from 'next-seo';

export default () => (
  <>
    <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"
      reviews={[
        {
          author: {
            type: 'Person',
            name: '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: 'http://schema.org/UsedCondition',
          availability: 'http://schema.org/InStock',
          url: 'https://www.example.com/executive-anvil',
          seller: {
            name: 'Executive Objects',
          },
        },
        {
          price: '139.99',
          priceCurrency: 'CAD',
          priceValidUntil: '2020-09-05',
          itemCondition: 'http://schema.org/UsedCondition',
          availability: 'http://schema.org/InStock',
          url: 'https://www.example.ca/executive-anvil',
          seller: {
            name: 'Executive Objects',
          },
        },
      ]}
      mpn="925872"
    />
  </>
);

Also available: sku, gtin8, gtin13, gtin14.

Valid values for offers.itemCondition:

• https://schema.org/DamagedCondition
• https://schema.org/NewCondition
• https://schema.org/RefurbishedCondition
• https://schema.org/UsedCondition

Valid values fro offers.availability:

• https://schema.org/Discontinued
• https://schema.org/InStock
• https://schema.org/InStoreOnly
• https://schema.org/LimitedAvailability
• https://schema.org/OnlineOnly
• https://schema.org/OutOfStock
• https://schema.org/PreOrder
• https://schema.org/PreSale
• https://schema.org/SoldOut

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

Social Profile

import React from 'react';
import { SocialProfileJsonLd } from 'next-seo';

export default () => (
  <>
    <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',
      ]}
    />
  </>
);

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)

Google Supported Social Profiles

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

News Article

import React from 'react';
import { NewsArticleJsonLd } from 'next-seo';

export default () => (
  <>
    <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"
    />
  </>
);

Google Docs for Social Profile

Event

import React from 'react';
import { EventJsonLd } from 'next-seo';

export default () => (
  <>
    <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"
    />
  </>
);

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	Place type with a nested Address type

Supported properties

Property	Info
description	Description of the event
location.sameAs	Description of the event location
images	An image or images of the event.
url	The fully-qualified URL of the event.

Contributors

Thanks goes to these wonderful people (emoji key):

Gary Meehan 💻 📖 💡 ⚠️	Jerome Fitzgerald 💻	erick B 💻	Erik Condie 💻 ⚠️ 💡 🤔	Tim Reynolds 💻 ⚠️ 💡 📖	Ktchan825 ⚠️ 💻	ctxquentin 💻 📖 ⚠️
Adrián Bolonio 💻 📖 ⚠️	Erik Hofer 📖	Dmitry Ermakov 💻	Nimo Naamani 📖	Calvin Ng Tjioe 💻	Peter Tulala 💻 ⚠️	nikjohn 📖 💻 ⚠️
0x54321 📖 💻 ⚠️	Nateetorn L. 📖 💻 ⚠️	Myoxocephalus 📖 💻 ⚠️	Kenley Tomlin 💻 📖 ⚠️	Ryu Nishida 💻 📖 ⚠️	Yamagishi Kazutoshi 💻

This project follows the all-contributors specification. Contributions of any kind welcome!