125 lines
4.6 KiB
TypeScript
125 lines
4.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
|
|
|
|
|
|
const socialAvatar = '/images/WH_Avatar_DarkBackground.webp'
|
|
const socialAvatarSrc = process.env.GATSBY_SITE_URL + socialAvatar
|
|
const socialAvatarHeight = '441'
|
|
const socialAvatarWidth = '375'
|
|
|
|
const socialLogo = '/images/WH_Logo_DarkBackground.webp'
|
|
const socialLogoSrc = process.env.GATSBY_SITE_URL + socialLogo
|
|
const socialLogoHeight = '543'
|
|
const socialLogoWidth = '2193'
|
|
|
|
/**
|
|
* 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:image" content={socialAvatarSrc} />
|
|
<meta property="og:image:type" content="image/webp" />
|
|
<meta property="og:image:height" content={socialAvatarHeight} />
|
|
<meta property="og:image:width" content={socialAvatarWidth} />
|
|
<meta property="og:image:alt" content={metaDescription} />
|
|
<meta property="og:locale" content={intl.locale} />
|
|
{/* "summary" is the type of twitter card. Hardcoded string is OK here. */}
|
|
<meta name="twitter:card" content="summary" />
|
|
<meta name="twitter:site" content="@wormholecrypto" />
|
|
<meta name="twitter:creator" content="@CertusOne" />
|
|
<meta name="twitter:title" content={title} />
|
|
<meta name="twitter:description" content={metaDescription} />
|
|
<meta name="twitter:image" content={socialAvatarSrc} />
|
|
<meta name="twitter:image:alt" content={metaDescription} />
|
|
|
|
<script type="application/ld+json">
|
|
{`
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Organization",
|
|
"@id": "wormhole-org",
|
|
"url": "https://wormholenetwork.com",
|
|
"name": "Wormhole Network",
|
|
"sameAs": [
|
|
"https://github.com/certusone/wormhole",
|
|
"https://t.me/wormholecrypto",
|
|
"https://twitter.com/wormholecrypto",
|
|
"https://www.wormholebridge.com"
|
|
],
|
|
"alternateName": [
|
|
"wormhole",
|
|
"wormhole protocol",
|
|
"wormhole bridge",
|
|
"wormhole crypto",
|
|
"solana wormhole",
|
|
"SOL wormhole",
|
|
"terra wormhole",
|
|
"LUNA wormhole",
|
|
"ethereum wormhole",
|
|
"ETH wormhole",
|
|
"binance wormhole",
|
|
"BSC wormhole",
|
|
"certus one wormhole"
|
|
],
|
|
"description": "A cross-chain messaging protocol.",
|
|
"image": {
|
|
"@type": "ImageObject",
|
|
"height": "${socialAvatarHeight}",
|
|
"url": "${socialAvatarSrc}",
|
|
"width": "${socialAvatarWidth}"
|
|
},
|
|
"logo": {
|
|
"@type": "ImageObject",
|
|
"height": "${socialLogoHeight}",
|
|
"url": "${socialLogoSrc}",
|
|
"width": "${socialLogoWidth}"
|
|
}
|
|
}
|
|
`}
|
|
</script>
|
|
|
|
{/* PWA tags */}
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
|
<link rel="manifest" href="/site.webmanifest" />
|
|
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
|
|
<meta name="msapplication-TileColor" content="#00aba9" />
|
|
<meta name="theme-color" content="#141449" />
|
|
|
|
{children}
|
|
</Helmet>
|
|
)}
|
|
</Location>
|
|
);
|
|
};
|
|
|
|
export default SEO
|