Untitled

import { FC } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';

interface IProps {
  headData: {
    title: string;
    description: string;
  };
}

const CustomHead: FC<IProps> = ({ ...props }): JSX.Element => {
  const router = useRouter();
  const { pathname } = router;

  return (
    <Head>
      <title>{props.headData.title}</title>
      <meta name="title" content={props.headData.title} />
      <meta name="description" content={props.headData.description} />
      <meta property="og:title" content={props.headData.title} />
      <meta property="twitter:title" content={props.headData.title} />
      <meta property="og:description" content={props.headData.description} />
      <meta
        property="twitter:description"
        content={props.headData.description}
      />
      <link rel="canonical" href={pathname} />
    </Head>
  );
};

export default CustomHead;
Editor is loading...