Skip to content

Instantly share code, notes, and snippets.

@alex-streza

alex-streza/Meta.tsx

Created February 3, 2022 10:42
Show Gist options
  • Save alex-streza/17165b146e9807fa8c4ae707f3c1bed8 to your computer and use it in GitHub Desktop.
Save alex-streza/17165b146e9807fa8c4ae707f3c1bed8 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Meta component to boost NextJS SEO
Raw
Meta.tsx
import { NextSeo } from "next-seo";
import Head from "next/head";
import { useRouter } from "next/router";
type IMetaProps = {
title: string;
description: string;
image?: string;
canonical?: string;
};
const Meta = (props: IMetaProps) => {
const {
title,
description,
image,
canonical,
} = props;
const router = useRouter();
return (
<>
<Head>
<meta charSet="UTF-8" key="charset" />
<meta
name="viewport"
content="width=device-width,initial-scale=1"
key="viewport"
/>
<link
rel="apple-touch-icon"
href={`${router.basePath}/apple-touch-icon.png`}
key="apple"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href={`${router.basePath}/favicon-32x32.png`}
key="icon32"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href={`${router.basePath}/favicon-16x16.png`}
key="icon16"
/>
<link
rel="apple-touch-icon"
sizes="512x512"
href="/apple-icon-512x512.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/android-icon-192x192.png"
/>
<link
rel="icon"
href={`${router.basePath}/favicon.ico`}
key="favicon"
/>
</Head>
<NextSeo
title={title}
description={description}
canonical={canonical}
openGraph={{
images: [
{
url: image,
width: 800,
height: 600,
alt: "AppName",
type: "image/png",
},
],
title: title,
description: description,
url: canonical,
locale: "en",
site_name: "AppName",
}}
/>
</>
);
};
export { Meta };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment