Seo.tsx
import Head from 'next/head';
import { useRouter } from 'next/router';
const defaultMeta = {
title: 'Vishnu Vinod - Software Engineer',
siteName: 'vishnuu.me',
description: 'Portfolio Website. ',
url: 'https://vishnuu.me',
image: 'https://vishnuu.me/me.png',
type: 'website',
robots: 'follow, index',
};
interface SeoProps extends Partial<typeof defaultMeta> {
date?: string;
canonical?: string;
}
export default function Seo(props: SeoProps) {
const router = useRouter();
const meta = {
...defaultMeta,
...props,
};
return (
<Head>
<title>{meta.title}</title>
<meta name='robots' content={meta.robots} />
<meta content={meta.description} name='description' />
<meta property='og:url' content={`${meta.url}${router.asPath}`} />
<link
rel='canonical'
href={meta.canonical ? meta.canonical : `${meta.url}${router.asPath}`}
/>
{/* Open Graph */}
<meta property='og:type' content={meta.type} />
<meta property='og:site_name' content={meta.siteName} />
<meta property='og:description' content={meta.description} />
<meta property='og:title' content={meta.title} />
<meta name='image' property='og:image' content={meta.image} />
{/* Twitter */}
<meta name='twitter:card' content='summary_large_image' />
{/* <meta name="twitter:site" content="@vishnuvinod" /> */}
<meta name='twitter:title' content={meta.title} />
<meta name='twitter:description' content={meta.description} />
<meta name='twitter:image' content={meta.image} />
<meta property='twitter:domain' content={meta.siteName} />
<meta property='twitter:url' content={meta.url} />
{meta.date && (
<>
<meta property='article:published_time' content={meta.date} />
<meta
name='publish_date'
property='og:publish_date'
content={meta.date}
/>
<meta
name='author'
property='article:author'
content='Vishnu Vinod - Software Engineer'
/>
</>
)}
<link rel='icon' href='/favicon.svg' />
<meta name='msapplication-TileColor' content='#ffffff' />
<meta
name='msapplication-TileImage'
content='/favicon/ms-icon-144x144.png'
/>
<meta name='theme-color' content='#ffffff' />
</Head>
);
}