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.
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;
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 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.
Next SEO is a plug in that makes managing your SEO easier in Next.js projects.
This plugin is compatible with version6.0.0+ of next.
NOTE:
The feature of having multiple Open Graph images is only available in version 7.0.0-canary.0+ of next.
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.
The core module of Next SEO is a component that allows you to easily set the SEO attributes of a page.
The intended usage of this component is that you initialize it in a custom _app.js and instantly give every page
of your application some default SEO. Once in place you can override some or all of the properties on per page basis.
Ideally you would have unique SEO on each page. But sometimes for example, you might not have the right Open Graph image for sharing
on social media. With Next SEO you get your default one so you are always covered.
Below is an example of setting up Next SEO using the recommended usage.
Install it:
npm install --save next-seo
Create a new file at the root of your directory (or where ever you would normally keep them) next-seo.config.js.
Here is an example of a full configuration object:
export default {
title: 'Title',
description: 'Description',
openGraph: {
type: 'website',
locale: 'en_IE',
url: 'https://www.url.ie/',
title: 'Open Graph Title',
description: 'Open Graph Description',
defaultImageWidth: 1200,
defaultImageHeight: 1200,
// Multiple Open Graph images is only available in version `7.0.0-canary.0`+ of next (see note top of README.md)
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',
},
{ 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',
},
};
Twitter Tags
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
Other options available:
no-index
noindex: true;
Add this to your default SEO if you wish to no-index your site. This is great when you are in a pre-release phase. This can also be used on a page per page basis.
titleTemplate
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
Canonical URL
Add this on page per page basis when you want to consolidate duplicate URLs.
canonical: 'https://www.canonical.ie/',
Next up in your pages directory create a new file, _app.js. See the Next.js docs here for more info on a custom .
import App, { Container } from 'next/app';
import React from 'react';
import NextSeo from 'next-seo';
// import your default seo configuration
import SEO from '../next-seo.config';
export default class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
}
render() {
const { Component, pageProps } = this.props;
return (
<Container>
{/* Here we call NextSeo and pass our default configuration to it */}
<NextSeo config={SEO} />
<Component {...pageProps} />
</Container>
);
}
}
Full Override:
From this point it is just a matter of calling Next SEO from any page and passing in a config object overriding the desired properties. Below is an example of overriding all properties.
import React from 'react';
import NextSeo from 'next-seo';
export default () => (
<>
<NextSeo
config={{
title: 'Title B',
description: 'Description B',
canonical: 'https://www.canonical.ie/b',
openGraph: {
url: 'https://www.url.ie/a',
title: 'Open Graph Title B',
description: 'Open Graph Description B',
// Multiple Open Graph images is only available in version `7.0.0-canary.0`+ of next (see note top of README.md)
images: [
{
url: 'https://www.example.ie/og-image-b-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt B',
},
{
url: 'https://www.example.ie/og-image-b-02.jpg',
width: 900,
height: 800,
alt: 'Og Image Alt B Second',
},
{ url: 'https://www.example.ie/og-image-b-03.jpg' },
{ url: 'https://www.example.ie/og-image-b-04.jpg' },
],
site_name: 'SiteName B',
},
twitter: {
handle: '@handleb',
site: '@siteb',
cardType: 'summary_large_image',
},
}}
/>
<p>All of our SEO properties are now updated.</p>
</>
);
Partial Override:
In this example we only override title, description and canonical. All of the remaining properties that we set
in next-seo.config.js will remain the same.
import React from 'react';
import NextSeo from 'next-seo';
export default () => (
<>
<NextSeo
config={{
title: 'Title C',
description: 'Description C',
canonical: 'https://www.canonical.ie/c',
}}
/>
<p>Only update title, description and canonical.</p>
</>
);
No Index Override:
In this example we only override no index a single page:
import React from 'react';
import NextSeo from 'next-seo';
export default () => (
<>
<NextSeo
config={{
noindex: true,
}}
/>
<p>Only update title, description and canonical.</p>
</>
);
The simple usage would be to just include Next SEO on any page you want to set SEO attributes. One thing to note here is that you loose the default SEO behaviour, so your SEO attributes will only show on pages you include <NextSeo config={YOUR_CONFIG}>.
If you are using this method you will need to redefine all properties if required.
import React from 'react';
import NextSeo from 'next-seo';
export default () => (
<>
<NextSeo
config={{
title: 'Simple Usage Example',
description: 'A short description goes here.',
canonical: 'https://www.canonical.ie/b',
openGraph: {
url: 'https://www.url.ie/a',
title: 'Open Graph Title B',
description: 'Open Graph Description B',
images: [
{
url: 'https://www.example.ie/og-image-b-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt B',
},
{
url: 'https://www.example.ie/og-image-b-02.jpg',
width: 900,
height: 800,
alt: 'Og Image Alt B Second',
},
{ url: 'https://www.example.ie/og-image-b-03.jpg' },
{ url: 'https://www.example.ie/og-image-b-04.jpg' },
],
site_name: 'SiteName B',
},
twitter: {
handle: '@handleb',
site: '@siteb',
cardType: 'summary_large_image',
},
}}
/>
<p>Simple Usage</p>
</>
);
For the full specification please check out http://ogp.me/
Next SEO currently supports:
import React from 'react';
import NextSeo from 'next-seo';
export default () => (
<>
<NextSeo
config={{
openGraph: {
type: 'website',
url: 'https://www.example.com/page',
title: 'Open Graph Title',
description: 'Open Graph Description',
images: [
{
url: 'https://www.example.ie/og-imag.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
},
],
},
}}
/>
<p>Basic</p>
</>
);
import React from 'react';
import NextSeo from 'next-seo';
export default () => (
<>
<NextSeo
config={{
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',
// Multiple Open Graph tags is only available in version `7.0.2-canary.35`+ of next,
// previous versions will just render the first entry
authors: [
'https://www.example.com/authors/@firstnameA-lastnameA',
'https://www.example.com/authors/@firstnameB-lastnameB',
],
// Multiple Open Graph tags is only available in version `7.0.2-canary.35`+ of next,
// previous versions will just render the first entry
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>
</>
);
import React from 'react';
import NextSeo from 'next-seo';
export default () => (
<>
<NextSeo
config={{
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',
// Multiple Open Graph tags is only available in version `7.0.2-canary.35`+ of next,
// previous versions will just render the first entry
authors: [
'https://www.example.com/authors/@firstnameA-lastnameA',
'https://www.example.com/authors/@firstnameB-lastnameB',
],
// Multiple Open Graph tags is only available in version `7.0.2-canary.35`+ of next,
// previous versions will just render the first entry
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>
</>
);
import React from 'react';
import NextSeo from 'next-seo';
export default () => (
<>
<NextSeo
config={{
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>Book</p>
</>
);
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:
More to follow very, very soon!
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."
/>
</>
);
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."
/>
</>
);
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"
/>
</>
);
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"
/>
</>
);
Required properties
| 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.
|
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: '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"
/>
</>
);
Also available: sku, gtin8, gtin13, gtin14.
Valid values for offers.itemCondition:
Valid values fro offers.availability:
More info on the product data type can be found here.
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
Google Docs for Social Profile
You can view the CHANGELOG here
Thanks goes to these wonderful people (emoji key):
 Gary Meehan 💻 📖 💡 ⚠️ |  Jerome Fitzgerald 💻 |  erick B 💻 |  Erik Condie 💻 ⚠️ 💡 🤔 |  Tim Reynolds 💻 ⚠️ 💡 📖 |
|---|
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
SEO plugin for Next.js projects
The npm package next-seo receives a total of 0 weekly downloads. As such, next-seo popularity was classified as not popular.
We found that next-seo demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.