SEO Next js

README.md

Easily implement good SEO in your Next js app using next-seo

_app.tsx

import SEO from "config/next-seo.config";

....

<DefaultSeo {...SEO} />
....

home.tsx

....
<SEO
  title="Some title"
  url="/"
  cover="image-link"
/>
....

next-seo.config.ts

export default {
  description: 'Description',
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://www.example.com/',
    site_name: 'Example',
    images: [
      {
        url: 'https://example.com/cover.png',
        width: 876,
        height: 438,
        alt: 'Example',
      },
    ],
  },
  twitter: {
    handle: '@example',
    site: '@example',
    cardType: 'summary_large_image',
  },
};

SEO.tsx

import { NextSeo } from 'next-seo';

export interface SeoProps {
  url?: string;
  title?: string;
  description?: string;
  cover?: string | null;
}

const SEO = ({ url, title, description, cover }: SeoProps) => {
  const APP_NAME = 'Example';
  const CLIENT_URL = 'https://example.com';
  const DEFAULT_DESCRIPTION = 'Description';

  return (
    <NextSeo
      title={title ? `${title} | ${APP_NAME}` : APP_NAME}
      description={description || DEFAULT_DESCRIPTION}
      additionalMetaTags={[
        {
          name: 'image',
          content: cover || `${CLIENT_URL}/assets/seo/cover.png`,
        },
        {
          property: 'og:title',
          content: title || APP_NAME,
        },
        {
          property: 'og:description',
          content: description || DEFAULT_DESCRIPTION,
        },
        {
          property: 'og:url',
          content: `${CLIENT_URL}${url}`,
        },
        {
          property: 'og:image',
          content: cover || `${CLIENT_URL}/assets/seo/cover.png`,
        },
        {
          name: 'twitter:url',
          content: `${CLIENT_URL}${url}`,
        },
        {
          name: 'twitter:title',
          content: title || APP_NAME,
        },
        {
          name: 'twitter:description',
          content: description || DEFAULT_DESCRIPTION,
        },
        {
          name: 'twitter:image:src',
          content: cover || `${CLIENT_URL}/assets/seo/cover.png`,
        },
        {
          name: 'twitter:image',
          content: cover || `${CLIENT_URL}/assets/seo/cover.png`,
        },
      ]}
    />
  );
};

export default SEO;