Next SEO component

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 = 'Ontwik';
  const CLIENT_URL = 'https://ontwik-dev.com';
  const DEFAULT_DESCRIPTION =
    'Ontwik makes it easy to hire skilled remote developers to help you achieve your goals and build your product';

  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 || 'Ontwik',
        },
        {
          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;