68 lines
2.2 KiB
JavaScript
68 lines
2.2 KiB
JavaScript
import React from 'react'
|
|
import { Helmet } from 'react-helmet'
|
|
import PropTypes from 'prop-types'
|
|
import { useMeta } from '../../hooks/use-meta'
|
|
import { useResume } from '../../hooks/use-resume'
|
|
|
|
const MetaTags = ({ title, description, url, image }) => {
|
|
const { basics } = useResume()
|
|
const twitterHandle = basics.profiles.filter(
|
|
({ network }) => network === 'Twitter'
|
|
)[0].username
|
|
|
|
return (
|
|
<Helmet
|
|
defaultTitle={`${basics.name.toLowerCase()} { ${basics.label.toLowerCase()} }`}
|
|
titleTemplate={`%s // ${basics.name.toLowerCase()} { ${basics.label.toLowerCase()} }`}
|
|
title={title}
|
|
>
|
|
<html lang="en" />
|
|
|
|
{/* General tags */}
|
|
<meta name="description" content={description} />
|
|
<meta name="image" content={`${basics.website}${image}`} />
|
|
<link rel="canonical" href={url} />
|
|
|
|
{/* OpenGraph tags */}
|
|
<meta property="og:url" content={url} />
|
|
<meta property="og:title" content={title} />
|
|
<meta property="og:description" content={description} />
|
|
<meta property="og:image" content={`${basics.website}${image}`} />
|
|
|
|
{/* Twitter Card tags */}
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:creator" content={twitterHandle} />
|
|
<meta name="twitter:title" content={title} />
|
|
<meta name="twitter:description" content={description} />
|
|
<meta name="twitter:image" content={`${basics.website}${image}`} />
|
|
</Helmet>
|
|
)
|
|
}
|
|
|
|
MetaTags.propTypes = {
|
|
title: PropTypes.string,
|
|
description: PropTypes.string,
|
|
url: PropTypes.string,
|
|
image: PropTypes.string,
|
|
meta: PropTypes.object
|
|
}
|
|
|
|
SEO.propTypes = {
|
|
project: PropTypes.object
|
|
}
|
|
|
|
export default function SEO({ project }) {
|
|
const meta = useMeta()
|
|
const { basics } = useResume()
|
|
const title = (project && project.title) || null
|
|
const description = (project && project.fields.excerpt) || meta.description
|
|
const image =
|
|
(project && project.img.childImageSharp.twitterImage.src) ||
|
|
meta.img.childImageSharp.resize.src
|
|
const url = (project && `${basics.website}${project.slug}`) || basics.website
|
|
|
|
return (
|
|
<MetaTags title={title} description={description} url={url} image={image} />
|
|
)
|
|
}
|