m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2025-01-03 10:25:00 +01: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

16
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 PropTypes from 'prop-types'
import Helmet from 'react-helmet' import Helmet from 'react-helmet'
import SEO from './SEO'
const Head = ({ meta }) => { const Head = ({ meta, location }) => {
const { title, tagline, description } = meta const { title, tagline } = meta
return ( return (
<Fragment>
<Helmet <Helmet
defaultTitle={`${title.toLowerCase()} { ${tagline.toLowerCase()} }`} defaultTitle={`${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
titleTemplate={`%s // ${title.toLowerCase()} { ${tagline.toLowerCase()} }`} titleTemplate={`%s // ${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
> >
<meta name="description" content={description} /> {location.hostname !== 'matthiaskretschmann.com' && (
<meta content="noindex,nofollow" name="robots" /> <meta content="noindex,nofollow" name="robots" />
)}
</Helmet> </Helmet>
<SEO />
</Fragment>
) )
} }
Head.propTypes = { Head.propTypes = {
meta: PropTypes.object, meta: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
} }
export default Head 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 ( return (
<div className="app"> <div className="app">
<Head meta={meta} /> <Head meta={meta} location={location} />
<Header meta={meta} isHomepage={isHomepage} /> <Header meta={meta} isHomepage={isHomepage} />
<TransitionGroup appear={true}> <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 ProjectTechstack from '../components/molecules/ProjectTechstack'
import ProjectLinks from '../components/molecules/ProjectLinks' import ProjectLinks from '../components/molecules/ProjectLinks'
import ProjectNav from '../components/molecules/ProjectNav' import ProjectNav from '../components/molecules/ProjectNav'
import SEO from '../components/atoms/SEO'
import images from '../images' import images from '../images'
import './Project.scss' import './Project.scss'
@ -17,23 +18,20 @@ class Project extends Component {
} }
render() { render() {
const { const postMeta = this.props.data.projectsJson
title, const pathContext = this.props.pathContext
img,
img_more, const { title, img, img_more, description, links, techstack } = postMeta
description, const { next, previous } = pathContext
links,
techstack,
} = this.props.data.projectsJson
const { next, previous } = this.props.pathContext
return ( return (
<main className="screen screen--project"> <main className="screen screen--project">
<Helmet> <Helmet>
<title>{title}</title> <title>{title}</title>
<meta name="description" content={description} />
</Helmet> </Helmet>
<SEO postMeta={postMeta} />
<article className="project"> <article className="project">
<Content> <Content>
<h1 className="project__title">{title}</h1> <h1 className="project__title">{title}</h1>