Skip to content

Instantly share code, notes, and snippets.

@kitze

kitze/Meta.tsx

Created November 18, 2020 09:57
Show Gist options
  • Save kitze/83a7a943ae5af359baddc15d9fa2a638 to your computer and use it in GitHub Desktop.
Save kitze/83a7a943ae5af359baddc15d9fa2a638 to your computer and use it in GitHub Desktop.
Download ZIP
Meta component for Next.js
Raw
Meta.tsx
import Head from 'next/head';
import React from 'react';
import { isDev } from 'utils/is-prod';
const prefix = isDev ? 'http://localhost:3004' : 'https://kitze.io';
const getImage = (url) => `${prefix}/${url}`;
const Meta: React.FC<{
title?: string;
description?: string;
url?: string;
image?: string;
twitterImage?: string;
facebookImage?: string;
preview?: any;
}> = ({
title = 'Kitze',
description = `Kitze's thoughts and stuff`,
url = 'https://kitze.io',
image,
facebookImage = image,
twitterImage = image
}) => {
return (
<>
<Head>
<title>{title}</title>
{/* meta */}
<meta name="title" content={title} />
<meta name="description" content={description} />
{/*facebook */}
<meta property="og:type" content="website" />
<meta property="og:url" content={url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={getImage(facebookImage)} />
{/*twitter */}
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={url} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={getImage(twitterImage)} />
</Head>
</>
);
};
export default Meta;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment