git.iko.soy/rowtype-yoga/psfp
on 21162af help sign in
rowtype-yoga/psfp/blog/src/components/seo.js
96 lines 2.2 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: 'description',
23 content: metaDescription,
24 },
25 {
26 property: 'og:title',
27 content: title,
28 },
29 {
30 property: 'og:description',
31 content: metaDescription,
32 },
33 {
34 property: 'og:type',
35 content: 'website',
36 },
37 {
38 name: 'twitter:card',
39 content: 'summary',
40 },
41 {
42 name: 'twitter:creator',
43 content: data.site.siteMetadata.author,
44 },
45 {
46 name: 'twitter:title',
47 content: title,
48 },
49 {
50 name: 'twitter:description',
51 content: metaDescription,
52 },
53 ]
54 .concat(
55 keywords.length > 0
56 ? {
57 name: 'keywords',
58 content: keywords.join(', '),
59 }
60 : []
61 )
62 .concat(meta)}
63 />
64 )
65 }}
66 />
67 )
70SEO.defaultProps = {
71 lang: 'en',
72 meta: [],
73 keywords: [],
76SEO.propTypes = {
77 description: PropTypes.string,
78 lang: PropTypes.string,
79 meta: PropTypes.array,
80 keywords: PropTypes.arrayOf(PropTypes.string),
81 title: PropTypes.string.isRequired,
84export default SEO
86const detailsQuery = graphql`
87 query DefaultSEOQuery {
88 site {
89 siteMetadata {
90 title
91 description
92 author
93 }
94 }
95 }