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

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
# or
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 with Full Configuration

You can define 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:

import App, { Container } from 'next/app';
import React from 'react';
import NextSeo from 'next-seo';

const DEFAULT_SEO = {
  title: 'Next.js SEO Plugin',
  description: 'SEO made easy for Next.js projects',
  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'
  }
};

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