generated from theodorusclarence/ts-nextjs-tailwind-starter
-
-
Notifications
You must be signed in to change notification settings - Fork 60
/
Seo.tsx
108 lines (101 loc) · 2.92 KB
/
Seo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import Head from 'next/head';
import { useRouter } from 'next/router';
const defaultMeta = {
title: 'Notiolink',
siteName: 'Notiolink',
description: 'A free link shortener built with Next.js and Notion API',
/** Without additional '/' on the end, e.g. https://theodorusclarence.com */
url: 'https://notiolink.thcl.dev',
type: 'website',
robots: 'follow, index',
image: 'https://notiolink.thcl.dev/favicon/og.png',
};
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.siteName}`
: 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.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='@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'
/>
</>
)}
{/* Favicons */}
{favicons.map((linkProps) => (
<link key={linkProps.href} {...linkProps} />
))}
<meta name='msapplication-TileColor' content='#ffffff' />
<meta name='theme-color' content='#ffffff' />
</Head>
);
}
type Favicons = {
rel: string;
href: string;
sizes?: string;
type?: string;
};
const favicons: Array<Favicons> = [
{
rel: 'apple-touch-icon',
sizes: '180x180',
href: '/favicon/apple-icon-180x180.png',
},
{
rel: 'icon',
type: 'image/png',
sizes: '32x32',
href: '/favicon/favicon-32x32.png',
},
{
rel: 'icon',
type: 'image/png',
sizes: '16x16',
href: '/favicon/favicon-16x16.png',
},
{
rel: 'manifest',
href: '/favicon/site.webmanifest',
},
{
rel: 'mask-icon',
href: '/favicon/safari-pinned-tab.svg',
},
];