1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | import React from 'react'
|
9 | import PropTypes from 'prop-types'
|
10 | import Helmet from 'react-helmet'
|
11 | import { useStaticQuery, graphql } from 'gatsby'
|
12 |
|
13 | function SEO ({ description, lang, meta, title }) {
|
14 | const { site } = useStaticQuery(
|
15 | graphql`
|
16 | query {
|
17 | site {
|
18 | siteMetadata {
|
19 | title
|
20 | description
|
21 | author
|
22 | }
|
23 | }
|
24 | }
|
25 | `
|
26 | )
|
27 |
|
28 | const metaDescription = description || site.siteMetadata.description
|
29 |
|
30 | return (
|
31 | <Helmet
|
32 | htmlAttributes={{
|
33 | lang
|
34 | }}
|
35 | title={title}
|
36 | titleTemplate={`%s | ${site.siteMetadata.title}`}
|
37 | meta={[
|
38 | {
|
39 | name: 'description',
|
40 | content: metaDescription
|
41 | },
|
42 | {
|
43 | property: 'og:title',
|
44 | content: title
|
45 | },
|
46 | {
|
47 | property: 'og:description',
|
48 | content: metaDescription
|
49 | },
|
50 | {
|
51 | property: 'og:type',
|
52 | content: 'website'
|
53 | },
|
54 | {
|
55 | name: 'twitter:card',
|
56 | content: 'summary'
|
57 | },
|
58 | {
|
59 | name: 'twitter:creator',
|
60 | content: site.siteMetadata.author
|
61 | },
|
62 | {
|
63 | name: 'twitter:title',
|
64 | content: title
|
65 | },
|
66 | {
|
67 | name: 'twitter:description',
|
68 | content: metaDescription
|
69 | }
|
70 | ].concat(meta)}
|
71 | />
|
72 | )
|
73 | }
|
74 |
|
75 | SEO.defaultProps = {
|
76 | lang: 'en',
|
77 | meta: [],
|
78 | description: ''
|
79 | }
|
80 |
|
81 | SEO.propTypes = {
|
82 | description: PropTypes.string,
|
83 | lang: PropTypes.string,
|
84 | meta: PropTypes.arrayOf(PropTypes.object),
|
85 | title: PropTypes.string.isRequired
|
86 | }
|
87 |
|
88 | export default SEO
|