Introducing next-seo library

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:

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 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 u...."
      canonical="https://www.canonical.ie/"
      openGraph={{
        url: 'https://www.url.ie/a',
        title: 'Open Graph Title',
        description: 'Open Graph Description',
        images: [],
        site_name: 'SiteName',
      }}
      twitter={{
        handle: '@handle',
        site: '@site',
        cardType: 'summary_large_image',
      }}
    />
    <p>SEO Added to Page</p>
  </>
);

And there you have it, a quick introduction to next-seo. I will be continuing to improve it over the coming weeks.
Next-Seo gives you many options,
you can check out next-seo on Github