import React from "react"
import useSiteMetadataQuery from "../../hooks/useSiteMetadataQuery"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useLocation } from "@reach/router"
const SEO = ({
title,
titleTemplate,
keywords,
description,
image,
type,
canonical,
}) => {
const { pathname } = useLocation()
const { siteMetadata } = useSiteMetadataQuery()
const seo = {
title: title || siteMetadata.title,
titleTemplate: true,
siteName: siteMetadata.siteName,
type: type || "website",
image: image || "custom image url...",
description: description || siteMetadata.description,
keywords: keywords || siteMetadata.keywords,
url: `${siteMetadata.siteUrl}${pathname}`,
canonical: canonical || `${siteMetadata.siteUrl}${pathname}`,
}
return (
{seo.keywords && }
{seo.type && }
{seo.image && }
{seo.description && (
)}
)
}
export default SEO
SEO.propTypes = {
title: PropTypes.string,
titleTemplate: PropTypes.bool,
keywords: PropTypes.string,
description: PropTypes.string,
image: PropTypes.string,
type: PropTypes.string,
canonical: PropTypes.string,
}