Seo Component

Seo component for Next.js

––– views

JavaScript

import Head from 'next/head';
import { useRouter } from 'next/router';
export default function Seo(props) {
const router = useRouter();
const meta = {
title: "Theodorus Clarence's Portfolio – theodorusclarence.com",
description:
'An online portfolio and blog by Theodorus Clarence. Showcase of my projects, and some of my thoughts about website development.',
image: 'https://theodorusclarence.com/favicon/large-og.jpg',
type: 'website',
robots: 'follow, index',
...props,
};
return (
<Head>
<title>{meta.title}</title>
<meta name='robots' content={meta.robots} />
<meta content={meta.description} name='description' />
<meta
property='og:url'
content={`https://theodorusclarence.com${router.asPath}`}
/>
<link
rel='canonical'
href={`https://theodorusclarence.com${router.asPath}`}
/>
{/* Open Graph */}
<meta property='og:type' content={meta.type} />
<meta property='og:site_name' content='Theodorus Clarence' />
<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='@th_clarence' />
<meta name='twitter:title' content={meta.title} />
<meta name='twitter:description' content={meta.description} />
<meta name='twitter:image' content={meta.image} />
{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='Theodorus Clarence'
/>
</>
)}
</Head>
);
}
jsx

Usage

import Seo from '@/components/Seo';
// If we don't want to override anything
<Seo />
// Overrides
<Seo title='Your page title' description='your description' />
jsx

You can also add props below to override the default SEO

title
description
image
type
robots
date -> {new Date(your date).toISOString()}
text

TypeScript Version

import Head from 'next/head';
import { useRouter } from 'next/router';
const defaultMeta = {
title: 'Next.js + Tailwind CSS + TypeScript Starter',
site_name: 'Next.js + Tailwind CSS + TypeScript Starter',
description:
' A starter for Next.js, Tailwind CSS, and TypeScript with Absolute Import, Seo, Link component, pre-configured with Husky',
url: 'https://theodorusclarence.com',
image: 'https://theodorusclarence.com/favicon/large-og.jpg',
type: 'website',
robots: 'follow, index',
};
type SeoProps = {
date?: string;
templateTitle?: string;
} & Partial<typeof defaultMeta>;
export default function Seo(props: SeoProps) {
const router = useRouter();
const meta = {
...defaultMeta,
...props,
};
meta['title'] = props.templateTitle
? `${props.templateTitle} | ${meta.site_name}`
: meta.title;
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.url}${router.asPath}`} />
{/* Open Graph */}
<meta property='og:type' content={meta.type} />
<meta property='og:site_name' content={meta.site_name} />
<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='@th_clarence' />
<meta name='twitter:title' content={meta.title} />
<meta name='twitter:description' content={meta.description} />
<meta name='twitter:image' content={meta.image} />
{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='Theodorus Clarence'
/>
</>
)}
</Head>
);
}
tsx