m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-06-30 05:31:44 +02:00
Code Releases Activity

SEO component

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-04-23 23:55:12 +02:00
parent c367f45bff
commit 28b0797eb9
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 71 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/atoms/Head.js
View File

@ -1,23 +1,29 @@
import React from 'react'
import React, { Fragment } from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import SEO from './SEO'
const Head = ({ meta }) => {
const { title, tagline, description } = meta
const Head = ({ meta, location }) => {
const { title, tagline } = meta
return (
<Helmet
defaultTitle={`${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
titleTemplate={`%s // ${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
>
<meta name="description" content={description} />
<meta content="noindex,nofollow" name="robots" />
</Helmet>
<Fragment>
<Helmet
defaultTitle={`${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
titleTemplate={`%s // ${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
>
{location.hostname !== 'matthiaskretschmann.com' && (
<meta content="noindex,nofollow" name="robots" />
)}
</Helmet>
<SEO />
</Fragment>
)
}
Head.propTypes = {
meta: PropTypes.object,
meta: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
}
export default Head

45
src/components/atoms/SEO.js Normal file
View File

@ -0,0 +1,45 @@
import React from 'react'
import Helmet from 'react-helmet'
import PropTypes from 'prop-types'
import meta from '../../../data/meta.json'
const SEO = ({ postMeta }) => {
const title = postMeta.title || meta.title
const description = postMeta.description || meta.description
const image = postMeta.img || meta.img || null
const url = postMeta.slug ? `${meta.url}/${postMeta.slug}` : meta.url
return (
<Helmet>
{/* General tags */}
<meta name="description" content={description} />
<meta name="image" content={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={image} />
{/* Twitter Card tags */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content={meta.social.Twitter} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={image} />
</Helmet>
)
}
SEO.propTypes = {
postMeta: PropTypes.object,
meta: PropTypes.object,
}
SEO.defaultProps = {
postMeta: {},
meta,
}
export default SEO

2
src/layouts/index.js
View File

@ -25,7 +25,7 @@ const TemplateWrapper = ({ data, location, children }) => {
return (
<div className="app">
<Head meta={meta} />
<Head meta={meta} location={location} />
<Header meta={meta} isHomepage={isHomepage} />
<TransitionGroup appear={true}>

18
src/templates/Project.js
View File

@ -8,6 +8,7 @@ import ProjectImage from '../components/atoms/ProjectImage'
import ProjectTechstack from '../components/molecules/ProjectTechstack'
import ProjectLinks from '../components/molecules/ProjectLinks'
import ProjectNav from '../components/molecules/ProjectNav'
import SEO from '../components/atoms/SEO'
import images from '../images'
import './Project.scss'
@ -17,23 +18,20 @@ class Project extends Component {
}
render() {
const {
title,
img,
img_more,
description,
links,
techstack,
} = this.props.data.projectsJson
const { next, previous } = this.props.pathContext
const postMeta = this.props.data.projectsJson
const pathContext = this.props.pathContext
const { title, img, img_more, description, links, techstack } = postMeta
const { next, previous } = pathContext
return (
<main className="screen screen--project">
<Helmet>
<title>{title}</title>
<meta name="description" content={description} />
</Helmet>
<SEO postMeta={postMeta} />
<article className="project">
<Content>
<h1 className="project__title">{title}</h1>