File size: 4,172 Bytes
19e25f3 |
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 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
import Head from 'next/head';
import { useRouter } from 'next/router';
// !STARTERCONF Change these default meta
const defaultMeta = {
title: 'Next.js + Tailwind CSS + TypeScript Starter',
siteName: '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',
/** Without additional '/' on the end, e.g. https://theodorusclarence.com */
url: 'https://tsnext-tw.thcl.dev',
type: 'website',
robots: 'follow, index',
/**
* No need to be filled, will be populated with openGraph function
* If you wish to use a normal image, just specify the path below
*/
image: 'https://tsnext-tw.thcl.dev/images/large-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;
// Use siteName if there is templateTitle
// but show full title if there is none
// !STARTERCONF Follow config for opengraph, by deploying one on https://github.com/theodorusclarence/og
// ? Uncomment code below if you want to use default open graph
// meta['image'] = openGraph({
// description: meta.description,
// siteName: props.templateTitle ? meta.siteName : meta.title,
// templateTitle: props.templateTitle,
// });
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' />
{/* // !STARTERCONF Remove or change to your handle */}
{/* <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}
/>
{/* // !STARTERCONF Remove or change to your name */}
<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='msapplication-config' content='/favicon/browserconfig.xml' />
<meta name='theme-color' content='#ffffff' />
</Head>
);
}
// !STARTERCONF this is the default favicon, you can generate your own from https://realfavicongenerator.net/
// ! then replace the whole /public/favicon folder and favicon.ico
const favicons: Array<React.ComponentPropsWithoutRef<'link'>> = [
{
rel: 'apple-touch-icon',
sizes: '180x180',
href: '/favicon/apple-touch-icon.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',
color: '#00e887',
},
{ rel: 'shortcut icon', href: '/favicon/favicon.ico' },
];
|