feat: improve site metadata (#135)

- [x] Extract Helmet code as a separated component from Layout - [x] Add OpenGraph (#134) - [x] Add TwitterCard - [x] Add Canonical URL - [x] Add Description - [ ] Add image closes #134
gatsbyjs · Sep 7, 2018 · 3c8d4c7 · 3c8d4c7
1 parent 67e3aa1
commit 3c8d4c7
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 42 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -1,6 +1,8 @@
 module.exports = {
   siteMetadata: {
-    title: 'Gatsby Store'
+    siteUrl: 'https://store.gatsbyjs.org',
+    title: 'Gatsby Store',
+    description: 'Get Gatsby Swag!',
   },
   plugins: [
     'gatsby-transformer-sharp',

diff --git a/src/components/shared/Layout.js b/src/components/shared/Layout.js
@@ -1,31 +1,22 @@
 import React from 'react';
-import Helmet from 'react-helmet';
-import styled, { css } from 'react-emotion';
+import styled from 'react-emotion';
 import { push } from 'gatsby';
 import CTA from '../CTA/CTA';
 import Footer from './Footer/Footer';
 import Header from './Header/Header';
+import SiteMetadata from './SiteMetadata';
 import StoreContext, { defaultStoreContext } from '../../context/StoreContext';
 import UserContext, {
   checkContributions,
   defaultUserContext,
   getDiscountCode
 } from '../../context/UserContext';
 import { logout, getUserInfo } from '../../utils/auth';
-import { colors, spacing } from '../../utils/styles';
+import { spacing } from '../../utils/styles';
 
 // Import Futura PT typeface
 import '../../fonts/futura-pt/Webfonts/futurapt_demi_macroman/stylesheet.css';
 
-const bodyStyles = css`
-  color: ${colors.text};
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  font-size: 16px;
-  margin: 0 auto;
-  line-height: 1.375;
-`;
-
 const Main = styled('main')`
   display: block;
   margin: 0 auto;
@@ -178,35 +169,7 @@ export default class Layout extends React.Component {
   render() {
     return (
       <>
-        <Helmet
-          lang="en"
-          title={this.props.title || ''}
-          defaultTitle="Gatsby Store"
-          titleTemplate="%s · Gatsby Store"
-        >
-          <link
-            rel="apple-touch-icon"
-            sizes="180x180"
-            href="/apple-touch-icon.png"
-          />
-          <link
-            rel="icon"
-            type="image/png"
-            sizes="32x32"
-            href="/favicon-32x32.png"
-          />
-          <link
-            rel="icon"
-            type="image/png"
-            sizes="16x16"
-            href="/favicon-16x16.png"
-          />
-          <link rel="manifest" href="/manifest.json" />
-          <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#663399" />
-          <meta name="msapplication-TileColor" content="#663399" />
-          <meta name="theme-color" content="#663399" />
-          <body className={bodyStyles} />
-        </Helmet>
+        <SiteMetadata />
         <UserContext.Provider value={this.state.user}>
           <StoreContext.Provider value={this.state.store}>
             <Header />

diff --git a/src/components/shared/SiteMetadata.js b/src/components/shared/SiteMetadata.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+import { graphql, StaticQuery } from 'gatsby';
+import { css } from 'react-emotion';
+import { colors } from '../../utils/styles';
+
+const bodyStyles = css`
+  color: ${colors.text};
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 16px;
+  margin: 0 auto;
+  line-height: 1.375;
+`;
+
+export default () => (
+  <StaticQuery
+    query={graphql`
+      query SiteMetadata {
+        site {
+          siteMetadata {
+            siteUrl
+            title
+            description
+          }
+        }
+      }
+    `}
+    render={({
+      site: {
+        siteMetadata: {
+          siteUrl,
+          title,
+          description,
+        },
+      },
+    }) => (
+      <Helmet
+        defaultTitle={title}
+        titleTemplate={`%s · ${title}`}
+      >
+        <html lang="en" />
+        <body className={bodyStyles} />
+
+        <link rel="canonical" href={siteUrl} />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon-16x16.png"
+        />
+        <link rel="manifest" href="/manifest.json" />
+        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#663399" />
+        <meta name="msapplication-TileColor" content="#663399" />
+        <meta name="theme-color" content="#663399" />
+
+        <meta name="description" content={description} />
+
+        <meta property="og:url" content={siteUrl} />
+        <meta property="og:type" content="website" />
+        <meta property="og:locale" content="en" />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={description} />
+
+        <meta name="twitter:site" content="@gatsbyjs" />
+      </Helmet>
+    )}
+  />
+)