seo.js 1.7 KB

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