Cleanup meta component and add canonical URLs

gatsby-config.js

@@ -55,6 +55,12 @@ module.exports = {
     'gatsby-plugin-catch-links',
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
+    {
+      resolve: 'gatsby-plugin-canonical-urls',
+      options: {
+        siteUrl: 'https://studentersamfundet.no',
+      },
+    },
     // {
     //   resolve: 'gatsby-plugin-purgecss',
     //   options: {

package.json

@@ -8,6 +8,7 @@
     "gatsby": "^2.13.31",
     "gatsby-awesome-pagination": "^0.3.3",
     "gatsby-image": "^2.2.6",
+    "gatsby-plugin-canonical-urls": "^2.1.10",
     "gatsby-plugin-catch-links": "^2.1.2",
     "gatsby-plugin-google-analytics": "^2.1.6",
     "gatsby-plugin-lodash": "^3.0.1",

src/components/Meta.js

@@ -2,31 +2,26 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 
-const Meta = ({ title, description, image, pathname, article }) => {
-    const imageUrl = image && image.localFile && image.localFile.url
-    const meta = {
-        title: title,
-        description: description,
-        image: imageUrl,
-        url: pathname,
-    }
+const Meta = props => {
+    const { title, description, article, pathname: url, image: imageObj } = props
+    const image = imageObj && imageObj.localFile && imageObj.localFile.url
     return (
         <Helmet
-            title={meta.title}
+            title={title}
             titleTemplate="%s | Det Norske Studentersamfund"
             defaultTitle="Det Norske Studentersamfund"
         >
-            {meta.description && <meta name="description" content={meta.description} />}
-            {meta.image && <meta name="image" content={meta.image} />}
-            {meta.url && <meta property="og:url" content={meta.url} />}
+            {description && <meta name="description" content={description} />}
+            {image && <meta name="image" content={image} />}
+            {url && <meta property="og:url" content={url} />}
             {(article ? true : null) && (
                 <meta property="og:type" content="article" />
             )}
-            {meta.title && <meta property="og:title" content={meta.title} />}
-            {meta.description && (
-                <meta property="og:description" content={meta.description} />
+            {title && <meta property="og:title" content={title} />}
+            {description && (
+                <meta property="og:description" content={description} />
             )}
-            {meta.image && <meta property="og:image" content={meta.image} />}
+            {image && <meta property="og:image" content={image} />}
         </Helmet>
     )
 }

yarn.lock

@@ -5664,6 +5664,13 @@ gatsby-page-utils@^0.0.24:
     micromatch "^3.1.10"
     slash "^3.0.0"
 
+gatsby-plugin-canonical-urls@^2.1.10:
+  version "2.1.10"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-canonical-urls/-/gatsby-plugin-canonical-urls-2.1.10.tgz#39221ae3741a5bf9def45cbc2d9710582e12381a"
+  integrity sha512-STSaQcZTAj1xtT1/1q/ujfyq481BCpX89h+beQ+X/+Jr76eIk6y0r7IwwANIzGnParx++OGan2gBi3CStIS8YQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
 gatsby-plugin-catch-links@^2.1.2:
   version "2.1.12"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-catch-links/-/gatsby-plugin-catch-links-2.1.12.tgz#aaf55c1387f6ee4e3afdc808879b9ff11fe57dc2"