175 lines
4.0 KiB
JavaScript
175 lines
4.0 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { StaticQuery, graphql } from 'gatsby'
|
|
import { Helmet } from 'react-helmet'
|
|
|
|
const query = graphql`
|
|
query {
|
|
site {
|
|
siteMetadata {
|
|
siteTitle
|
|
siteDescription
|
|
siteUrl
|
|
}
|
|
}
|
|
|
|
shareImage: allFile(filter: { name: { eq: "share" } }) {
|
|
edges {
|
|
node {
|
|
childImageSharp {
|
|
original {
|
|
src
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`
|
|
|
|
const createSchemaOrg = (title, description, image, url, siteMeta, article) => {
|
|
const schemaOrgJSONLD = [
|
|
{
|
|
'@context': 'http://schema.org',
|
|
'@type': 'WebSite',
|
|
url: siteMeta.siteUrl,
|
|
name: title
|
|
}
|
|
]
|
|
|
|
if (article) {
|
|
schemaOrgJSONLD.push(
|
|
{
|
|
'@context': 'http://schema.org',
|
|
'@type': 'BreadcrumbList',
|
|
itemListElement: [
|
|
{
|
|
'@type': 'ListItem',
|
|
position: 1,
|
|
item: { '@id': url, name: title, image }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
// https://schema.org/TechArticle
|
|
'@context': 'http://schema.org',
|
|
'@type': 'TechArticle',
|
|
name: title,
|
|
headline: title,
|
|
description,
|
|
url,
|
|
image: { '@type': 'URL', url: image }
|
|
}
|
|
)
|
|
}
|
|
|
|
return schemaOrgJSONLD
|
|
}
|
|
|
|
const MetaTags = ({
|
|
title,
|
|
description,
|
|
url,
|
|
image,
|
|
schema,
|
|
siteMeta,
|
|
article,
|
|
location
|
|
}) => (
|
|
<Helmet
|
|
defaultTitle={siteMeta.siteTitle}
|
|
titleTemplate={`%s - ${siteMeta.siteTitle}`}
|
|
>
|
|
<html lang="en" />
|
|
|
|
{title && <title>{title}</title>}
|
|
|
|
{/* General tags */}
|
|
<meta name="description" content={description} />
|
|
<meta name="image" content={image} />
|
|
<link rel="canonical" href={url} />
|
|
|
|
{/* Schema.org tags */}
|
|
<script type="application/ld+json">{schema}</script>
|
|
|
|
{/* OpenGraph tags */}
|
|
<meta property="og:url" content={url} />
|
|
{article && <meta property="og:type" content="article" />}
|
|
<meta property="og:title" content={title} />
|
|
<meta property="og:description" content={description} />
|
|
<meta property="og:image" content={image} />
|
|
|
|
{/* Twitter Card tags */}
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:creator" content="@oceanprotocol" />
|
|
<meta name="twitter:title" content={title} />
|
|
<meta name="twitter:description" content={description} />
|
|
<meta name="twitter:image" content={image} />
|
|
|
|
{/* Prevent search engine indexing except for live */}
|
|
{/* {location.hostname !== 'docs.oceanprotocol.com' && (
|
|
<meta name="robots" content="noindex,nofollow" />
|
|
)} */}
|
|
</Helmet>
|
|
)
|
|
|
|
MetaTags.propTypes = {
|
|
title: PropTypes.string,
|
|
description: PropTypes.string,
|
|
url: PropTypes.string,
|
|
image: PropTypes.string,
|
|
schema: PropTypes.string,
|
|
siteMeta: PropTypes.object,
|
|
article: PropTypes.bool,
|
|
location: PropTypes.object.isRequired
|
|
}
|
|
|
|
const Seo = ({ title, description, slug, article, location }) => (
|
|
<StaticQuery
|
|
query={query}
|
|
render={(data) => {
|
|
const siteMeta = data.site.siteMetadata
|
|
const shareImage =
|
|
data.shareImage.edges[0].node.childImageSharp.original.src
|
|
|
|
title = title || siteMeta.siteTitle
|
|
description = description || siteMeta.siteDescription
|
|
const url = siteMeta.siteUrl || siteMeta.siteUrl + slug
|
|
const image = siteMeta.siteUrl + shareImage
|
|
|
|
let schema = createSchemaOrg(
|
|
title,
|
|
description,
|
|
image,
|
|
url,
|
|
siteMeta,
|
|
article
|
|
)
|
|
schema = JSON.stringify(schema)
|
|
|
|
return (
|
|
<MetaTags
|
|
title={title}
|
|
description={description}
|
|
url={url}
|
|
image={image}
|
|
schema={schema}
|
|
siteMeta={siteMeta}
|
|
article={article}
|
|
location={location}
|
|
/>
|
|
)
|
|
}}
|
|
/>
|
|
)
|
|
|
|
Seo.propTypes = {
|
|
title: PropTypes.string,
|
|
description: PropTypes.string,
|
|
slug: PropTypes.string,
|
|
article: PropTypes.bool,
|
|
location: PropTypes.object.isRequired
|
|
}
|
|
|
|
export default Seo
|