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.
Next SEO
Small plug in to help manage SEO for Next.js applications. The plug in is currently in BETA so please bare this in mind if adopting for a project where SEO is critical. The plugin will be actively developed and extended.
Usage
Install
yarn add next-seo
npm install next-seo --save
Usage
Simple example:
import NextSeo from 'next-seo';
<NextSeo
config={{
title: 'Next.js Seo Plugin',
description: 'SEO made easy for Next.js projects'
}}
/>;
Example Full Configuration File
export default {
title: 'Next.js SEO Plugin',
description: 'SEO made easy for Next.js projects',
lang: 'en',
openGraph: {
type: 'website',
locale: 'en_IE',
url: 'https://www.garymeehan.ie',
title: 'Next.js Seo',
description: 'SEO made easy for Next.js projects',
image:
'https://prismic-io.s3.amazonaws.com/gary-blog%2F3297f290-a885-4cc6-9b19-3235e3026646_default.jpg',
site_name: 'GaryMeehan.ie',
imageWidth: 1200,
imageHeight: 1200
},
twitter: {
handle: '@garmeeh',
cardType: 'summary_large_image'
}
};
You can then use this as the default SEO settings and pass it directly to NextSeo
. I would recommend adding this to a custom _app.js
which could look something like this assuming the config file lives at the root of your project and is named seo.config.js
import App, { Container } from 'next/app';
import React from 'react';
import NextSeo from 'next-seo';
import defaultSeo from '../seo.config.js';
export default class MyApp extends App {
static async getInitialProps({ Component, router, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
}
render() {
const { Component, pageProps } = this.props;
return (
<Container>
<NextSeo config={defaultSeo} />
<Component {...pageProps} />
</Container>
);
}
}