Merge pull request #24 from marzeelabs/feature/23_fix-og-and-twitter-…

…meta-tags #23 updated og and twitter meta tags
marzeelabs · Apr 13, 2020 · b2b8d0b · b2b8d0b
2 parents d2420fb + 185826d
commit b2b8d0b
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 70 deletions.
diff --git 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
@@ -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
@@ -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,63 +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',
-          name: 'twitter:description',
-          content: metaDescription,
-        },
-        {
-          property: 'og:title',
-          name: 'twitter:title',
-          content: title,
-        },
-        {
-          property: 'og:image',
-          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
@@ -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
@@ -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
@@ -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
@@ -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"