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
|