How to customize page metadata for SEO?

Setup

Install next-seo package:

npm i next-seo

Default SEO configuration

Create next-seo.config file (e.g. in the root of your project) and add default meta tags values you want to be set up for your pages. For example:

export default {
  openGraph: {
    type: 'website',
    locale: 'en_IE',
    url: 'https://www.my.portaljs.app/',
    siteName: 'MyPortalJSApp',
  },
  twitter: {
    handle: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
  },
};

Then, in your custom Next.js App, add the following:

// /pages/_app.tsx
import { DefaultSeo } from "next-seo";

// import your default seo configuration
import SEO from '../next-seo.config';


export default function MyApp({ Component, pageProps }) {
    // ... your code
    return (
        <>
            <DefaultSeo {...SEO} />
            <Component {...pageProps} />
        </>
    );
};

Per-page SEO configuration

To add page specific meta tag values:

import { NextSeo } from 'next-seo';

export default function Page() (
  // ...
  <>
    <NextSeo
      title="My Portal JS page"
      description="A short description."
    />
    <p>My Portal JS page</p>
  </>
);