git.iko.soy/rowtype-yoga/psfp
on 39a8a5d help sign in
rowtype-yoga/psfp/blog/src/components/seo.js
100 lines 2.4 kB history raw
1import React from 'react'
2import PropTypes from 'prop-types'
3import Helmet from 'react-helmet'
4import { StaticQuery, graphql } from 'gatsby'
6function SEO({ description, lang, meta, keywords, title }) {
7 return (
8 <StaticQuery
9 query={detailsQuery}
10 render={data => {
11 const metaDescription =
12 description || data.site.siteMetadata.description
13 return (
14 <Helmet
15 htmlAttributes={{
16 lang,
17 }}
18 title={title}
19 titleTemplate={`%s | ${data.site.siteMetadata.title}`}
20 meta={[
21 {
22 name: 'viewport',
23 content: "width=device-width, initial-scale=1.0",
24 },
25 {
26 name: 'description',
27 content: metaDescription,
28 },
29 {
30 property: 'og:title',
31 content: title,
32 },
33 {
34 property: 'og:description',
35 content: metaDescription,
36 },
37 {
38 property: 'og:type',
39 content: 'website',
40 },
41 {
42 name: 'twitter:card',
43 content: 'summary',
44 },
45 {
46 name: 'twitter:creator',
47 content: data.site.siteMetadata.author,
48 },
49 {
50 name: 'twitter:title',
51 content: title,
52 },
53 {
54 name: 'twitter:description',
55 content: metaDescription,
56 },
57 ]
58 .concat(
59 keywords.length > 0
60 ? {
61 name: 'keywords',
62 content: keywords.join(', '),
63 }
64 : []
65 )
66 .concat(meta)}
67 />
68 )
69 }}
70 />
71 )
74SEO.defaultProps = {
75 lang: 'en-GB',
76 meta: [],
77 keywords: [],
80SEO.propTypes = {
81 description: PropTypes.string,
82 lang: PropTypes.string,
83 meta: PropTypes.array,
84 keywords: PropTypes.arrayOf(PropTypes.string),
85 title: PropTypes.string.isRequired,
88export default SEO
90const detailsQuery = graphql`
91 query DefaultSEOQuery {
92 site {
93 siteMetadata {
94 title
95 description
96 author
97 }
98 }
99 }