54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
|
import React from 'react';
|
||
|
import Helmet, { HelmetProps } from 'react-helmet';
|
||
|
import { useIntl } from 'gatsby-plugin-intl';
|
||
|
import { Location } from '@reach/router';
|
||
|
|
||
|
type Props = {
|
||
|
/** Description text for the description meta tags */
|
||
|
description?: string;
|
||
|
} & HelmetProps
|
||
|
|
||
|
/**
|
||
|
* An SEO component that handles all element in the head that can accept
|
||
|
*/
|
||
|
const SEO: React.FC<Props> = ({ children, description = '', title}) => {
|
||
|
const metaDescription = description;
|
||
|
const intl = useIntl()
|
||
|
return (
|
||
|
<Location>
|
||
|
{({ location }) => (
|
||
|
<Helmet
|
||
|
htmlAttributes={{
|
||
|
lang: intl.locale,
|
||
|
}}
|
||
|
title={title}
|
||
|
>
|
||
|
<meta name="description" content={metaDescription} />
|
||
|
|
||
|
{/* OG tags */}
|
||
|
<meta
|
||
|
property="og:url"
|
||
|
content={process.env.GATSBY_SITE_URL + location.pathname}
|
||
|
/>
|
||
|
<meta property="og:type" content="website" />
|
||
|
<meta property="og:title" content={title} />
|
||
|
<meta property="og:description" content={metaDescription} />
|
||
|
<meta property="og:locale" content={intl.locale} />
|
||
|
{/* "summary" is the type of twitter card. Hardcoded string is OK here. */}
|
||
|
<meta property="twitter.card" content="summary" />
|
||
|
<meta property="twitter.creator" content="@CertusOne" />
|
||
|
<meta property="twitter.title" content={title} />
|
||
|
<meta property="twitter.description" content={metaDescription} />
|
||
|
|
||
|
{/* PWA tags */}
|
||
|
<meta name="theme-color" content="#546e7a"/>
|
||
|
|
||
|
{children}
|
||
|
</Helmet>
|
||
|
)}
|
||
|
</Location>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default SEO
|