seo.js (2750B)
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 /* eslint-disable eqeqeq */ 8 9 import React from 'react'; 10 import PropTypes from 'prop-types'; 11 import Helmet from 'react-helmet'; 12 import { useStaticQuery, graphql } from 'gatsby'; 13 14 function SEO({ 15 blog = false, 16 cover = 'https://upload.wikimedia.org/wikipedia/commons/6/68/Das_große_Q.jpg', 17 description, 18 lang, 19 path, 20 tags, 21 title, 22 }) { 23 const { site } = useStaticQuery( 24 graphql` 25 query { 26 site { 27 siteMetadata { 28 author 29 description 30 siteName 31 siteUrl 32 title 33 username 34 } 35 } 36 } 37 ` 38 ); 39 40 const metaDescription = description || site.siteMetadata.description; 41 const type = blog ? 'article' : 'website'; 42 return ( 43 <Helmet 44 htmlAttributes={{ 45 lang, 46 }} 47 title={title} 48 titleTemplate={`%s • ${site.siteMetadata.title}`} 49 > 50 <meta name="description" content={metaDescription} /> 51 <meta property="og:site_name" content={site.siteMetadata.siteName} /> 52 <meta property="og:type" content={type} /> 53 <meta property="og:title" content={title} /> 54 <meta property="og:description" content={metaDescription} /> 55 <meta property="og:image" content={cover} /> 56 {blog && path ? ( 57 <meta 58 property="og:url" 59 content={`${site.siteMetadata.siteUrl}/quote${path}`} 60 /> 61 ) : ( 62 <meta property="og:url" content={`${site.siteMetadata.siteUrl}`} /> 63 )} 64 {blog && 65 tags.length && 66 tags.map(tag => ( 67 <meta property="article:tag" content={tag} key={tag} /> 68 ))} 69 <meta name="twitter:title" content={title} /> 70 <meta name="twitter:description" content={metaDescription} /> 71 {path ? ( 72 <meta 73 name="twitter:url" 74 content={`${site.siteMetadata.siteUrl}/quote${path}`} 75 /> 76 ) : ( 77 <meta name="twitter:url" content={`${site.siteMetadata.siteUrl}`} /> 78 )} 79 {blog && <meta name="twitter:label1" content="Written by" />} 80 {blog && <meta name="twitter:data1" content={site.siteMetadata.author} />} 81 {blog && tags.length && ( 82 <meta name="twitter:label2" content="Filed under" /> 83 )} 84 {blog && tags.length && ( 85 <meta name="twitter:data2" content={tags.join(', ')} /> 86 )} 87 </Helmet> 88 ); 89 } 90 91 SEO.defaultProps = { 92 lang: 'en', 93 meta: [], 94 description: '', 95 }; 96 97 SEO.propTypes = { 98 description: PropTypes.string, 99 lang: PropTypes.string, 100 meta: PropTypes.arrayOf(PropTypes.object), 101 title: PropTypes.string.isRequired, 102 }; 103 104 export default SEO;