From 5f38085063cf16cfdaf68bf715ec5d2aab5154c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9ssica=20Novo?=
 <50515278+JessicaNovo@users.noreply.github.com>
Date: Mon, 13 Apr 2020 11:07:06 +0100
Subject: [PATCH 1/2] #23 updated og and twitter meta tags

---
 src/components/SEO.jsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/SEO.jsx b/src/components/SEO.jsx
index 1e62c0b..6b32751 100644
--- a/src/components/SEO.jsx
+++ b/src/components/SEO.jsx
@@ -57,16 +57,25 @@ const SEO = ({
         },
         {
           property: 'og:description',
+          content: metaDescription,
+        },
+        {
           name: 'twitter:description',
           content: metaDescription,
         },
         {
           property: 'og:title',
+          content: title,
+        },
+        {
           name: 'twitter:title',
           content: title,
         },
         {
           property: 'og:image',
+          content: metaImage,
+        },
+        {
           name: 'twitter:image',
           content: metaImage,
         },

From 185826daeb4797620dbb1d95f89cb17b00a83bec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lu=C3=ADs=20Miguel?= <luism@marzeelabs.org>
Date: Mon, 13 Apr 2020 16:29:10 +0100
Subject: [PATCH 2/2] #23 Refactor Helmet and fix canonical link

---
 gatsby-config.js       |  6 ---
 package.json           |  1 -
 src/components/SEO.jsx | 88 ++++++++++++++----------------------------
 src/pages/404.jsx      |  4 +-
 src/pages/index.jsx    |  4 +-
 src/pages/shops.jsx    |  4 +-
 yarn.lock              |  7 ----
 7 files changed, 35 insertions(+), 79 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 84e0562..746abe7 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -13,12 +13,6 @@ module.exports = {
     siteUrl,
   },
   plugins: [
-    {
-      resolve: 'gatsby-plugin-canonical-urls',
-      options: {
-        siteUrl,
-      },
-    },
     {
       resolve: 'gatsby-plugin-alias-imports',
       options: {
diff --git a/package.json b/package.json
index e4c41f0..bf7fd68 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
     "gatsby": "^2.19.45",
     "gatsby-image": "^2.2.44",
     "gatsby-plugin-alias-imports": "^1.0.5",
-    "gatsby-plugin-canonical-urls": "^2.2.1",
     "gatsby-plugin-google-analytics": "^2.2.2",
     "gatsby-plugin-manifest": "^2.2.48",
     "gatsby-plugin-material-ui": "^2.1.6",
diff --git a/src/components/SEO.jsx b/src/components/SEO.jsx
index 6b32751..730c573 100644
--- a/src/components/SEO.jsx
+++ b/src/components/SEO.jsx
@@ -6,14 +6,15 @@
  */
 
 import React from 'react';
-import { arrayOf, object, string } from 'prop-types';
+import { node, string } from 'prop-types';
 import Helmet from 'react-helmet';
 import { useStaticQuery, graphql } from 'gatsby';
 
 const SEO = ({
+  children,
   description,
   lang,
-  meta,
+  location,
   title,
 }) => {
   const { site, metaImageDefault } = useStaticQuery(
@@ -41,72 +42,41 @@ const SEO = ({
 
   const metaDescription = description || site.siteMetadata.description;
 
-  // the image url has to be an absolute url with http:// or https://
-  // relative links do not work
-  const metaImage = site.siteMetadata.siteUrl.concat(metaImageDefault.childImageSharp.fixed.src);
+  const canonical = `${site.siteMetadata.siteUrl}${location.pathname}`;
+  const metaImage = `${site.siteMetadata.siteUrl}${metaImageDefault.childImageSharp.fixed.src}`;
 
   return (
-    <Helmet
-      htmlAttributes={ { lang } }
-      title={ title }
-      titleTemplate={ `%s | ${site.siteMetadata.title}` }
-      meta={ [
-        {
-          name: 'description',
-          content: metaDescription,
-        },
-        {
-          property: 'og:description',
-          content: metaDescription,
-        },
-        {
-          name: 'twitter:description',
-          content: metaDescription,
-        },
-        {
-          property: 'og:title',
-          content: title,
-        },
-        {
-          name: 'twitter:title',
-          content: title,
-        },
-        {
-          property: 'og:image',
-          content: metaImage,
-        },
-        {
-          name: 'twitter:image',
-          content: metaImage,
-        },
-        {
-          property: 'og:type',
-          content: 'website',
-        },
-        {
-          name: 'twitter:card',
-          content: 'summary_large_image',
-        },
-        {
-          name: 'twitter:creator',
-          content: site.siteMetadata.author,
-        },
-      ].concat(meta) }
-    />
+    <Helmet titleTemplate={ `%s | ${site.siteMetadata.title}` }>
+      <html lang={ lang } />
+      <link rel="canonical" href={ canonical } />
+      <meta property="og:url" content={ canonical } />
+      <title>{ title }</title>
+      <meta property="og:title" content={ title } />
+      <meta name="twitter:title" content={ title } />
+      <meta name="description" content={ metaDescription } />
+      <meta property="og:description" content={ metaDescription } />
+      <meta name="twitter:description" content={ metaDescription } />
+      <meta property="og:image" content={ metaImage } />
+      <meta name="twitter:image" content={ metaImage } />
+      <meta property="og:type" content="website" />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:creator" content={ site.siteMetadata.author } />
+      { children }
+    </Helmet>
   );
 };
 
-SEO.defaultProps = {
-  lang: 'en',
-  meta: [],
-  description: '',
-};
-
 SEO.propTypes = {
+  children: node,
   description: string,
   lang: string,
-  meta: arrayOf(object),
   title: string.isRequired,
 };
 
+SEO.defaultProps = {
+  children: null,
+  lang: 'pt',
+  description: '',
+};
+
 export default SEO;
diff --git a/src/pages/404.jsx b/src/pages/404.jsx
index 77da237..2205aa9 100644
--- a/src/pages/404.jsx
+++ b/src/pages/404.jsx
@@ -5,9 +5,9 @@ import { Link } from 'gatsby';
 import PageWrapper from 'Layouts/PageWrapper';
 import SEO from '../components/SEO';
 
-const NotFoundPage = () => (
+const NotFoundPage = ({ location }) => (
   <PageWrapper>
-    <SEO title="404: Not found" />
+    <SEO title="404: Not found" location={ location } />
     <h1>NOT FOUND</h1>
     <p>You just hit a route that doesn&#39;t exist....</p>
     <Link to="/">
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 37ec475..62c64e5 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -10,12 +10,12 @@ import PageWrapper from 'Layouts/PageWrapper';
 
 import useStyles from 'Styles/pages/home';
 
-const IndexPage = () => {
+const IndexPage = ({ location }) => {
   const classes = useStyles();
 
   return (
     <PageWrapper>
-      <SEO title="Compra aos pequenos" />
+      <SEO title="Compra aos pequenos" location={ location } />
       <Hero
         background="homeBg"
         callToAction={ {
diff --git a/src/pages/shops.jsx b/src/pages/shops.jsx
index c0fa992..2b73cb0 100644
--- a/src/pages/shops.jsx
+++ b/src/pages/shops.jsx
@@ -6,9 +6,9 @@ import Shops from 'Components/Shops/Shops';
 
 import PageWrapper from 'Layouts/PageWrapper';
 
-export default () => (
+export default ({ location }) => (
   <PageWrapper>
-    <SEO title="Lista de Negócios" />
+    <SEO title="Lista de Negócios" location={ location } />
     <Hero background="shopsBg" />
     <Shops />
   </PageWrapper>
diff --git a/yarn.lock b/yarn.lock
index 951baf8..5b1c2cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5627,13 +5627,6 @@ gatsby-plugin-alias-imports@^1.0.5:
   dependencies:
     "@babel/runtime" "^7.2.0"
 
-gatsby-plugin-canonical-urls@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-canonical-urls/-/gatsby-plugin-canonical-urls-2.2.1.tgz#43d89aa8724dcac5c960bb57f33132c7c09ff05e"
-  integrity sha512-bbNfFlyZ1ksSbJ0iA+IPyybgcIaFF9EK+bEWTK01YqUEgUuosS+pY553qJ8AakxERaAgwxn1WwsovmeNgsOH3A==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-
 gatsby-plugin-google-analytics@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-google-analytics/-/gatsby-plugin-google-analytics-2.2.2.tgz#b4d2a10e1863bb4c92084a1778c4a2aab53292f5"