How to customize page metadata for SEO?


See next-seo documentation to learn more.


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: '',
    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} />


To learn more on default SEO configuration with next-seo, see this docs section.

Per-page SEO configuration

To add page specific meta tag values:

import { NextSeo } from 'next-seo';

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

To learn more on per-page SEO configuration with next-seo, see this docs section