From e065f16fb505eb8f9e5acef6f92c5a016e276ebc Mon Sep 17 00:00:00 2001
From: Mastermindzh <info@rickvanlieshout.com>
Date: Wed, 25 Oct 2023 23:59:16 +0200
Subject: [PATCH] fix: now setting og:url correctly as well as the canonical
 url

---
 gatsby-config.ts                 |  7 -------
 gatsby-ssr.ts => gatsby-ssr.tsx  | 14 +++++++++++++-
 package-lock.json                | 13 -------------
 package.json                     |  3 +--
 src/components/Layout/Layout.tsx |  7 -------
 5 files changed, 14 insertions(+), 30 deletions(-)
 rename gatsby-ssr.ts => gatsby-ssr.tsx (66%)

diff --git a/gatsby-config.ts b/gatsby-config.ts
index 11e095b..690ab65 100644
--- a/gatsby-config.ts
+++ b/gatsby-config.ts
@@ -164,13 +164,6 @@ export default {
         start_url: "/",
       },
     },
-    {
-      resolve: "gatsby-plugin-react-helmet-canonical-urls",
-      options: {
-        siteUrl: config.url,
-        stripQueryString: true,
-      },
-    },
     // remove the old service worker if it is available.
     "gatsby-plugin-remove-serviceworker",
     "gatsby-plugin-image",
diff --git a/gatsby-ssr.ts b/gatsby-ssr.tsx
similarity index 66%
rename from gatsby-ssr.ts
rename to gatsby-ssr.tsx
index d056b67..5ca9b0f 100644
--- a/gatsby-ssr.ts
+++ b/gatsby-ssr.tsx
@@ -18,7 +18,19 @@ const setColorTheme = `
   }
 })();
 `;
-export const onRenderBody = ({ setPreBodyComponents }: RenderBodyArgs) => {
+export const onRenderBody = ({
+  setPreBodyComponents,
+  setHeadComponents,
+  pathname,
+}: RenderBodyArgs) => {
+  const currentUrl = `https://rickvanlieshout.com${pathname}`;
+
+  setHeadComponents([
+    <meta key="og:url" property="og:url" content={currentUrl} />,
+    <link key="canonical" rel="canonical" href={currentUrl} />,
+    <meta property="test:rick" key="test:rick" content={currentUrl} />,
+  ]);
+
   setPreBodyComponents([
     React.createElement("script", {
       key: "theme",
diff --git a/package-lock.json b/package-lock.json
index cc5720a..dd18c75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,6 @@
         "gatsby-plugin-manifest": "^5.12.0",
         "gatsby-plugin-optimize-svgs": "^1.0.5",
         "gatsby-plugin-react-helmet": "^6.12.0",
-        "gatsby-plugin-react-helmet-canonical-urls": "^1.4.0",
         "gatsby-plugin-remove-serviceworker": "^1.0.0",
         "gatsby-plugin-robots-txt": "^1.8.0",
         "gatsby-plugin-sass": "^6.12.0",
@@ -16060,18 +16059,6 @@
         "react-helmet": "^5.1.3 || ^6.0.0"
       }
     },
-    "node_modules/gatsby-plugin-react-helmet-canonical-urls": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/gatsby-plugin-react-helmet-canonical-urls/-/gatsby-plugin-react-helmet-canonical-urls-1.4.0.tgz",
-      "integrity": "sha512-5g2eqFNh8GSCTvL25sNm84IJ6G79qKHSnOa9druxBj6x5Iw3EujZMv6I4nGMlW5EZlaSf9D5QHNGypUW6idPTg==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1"
-      },
-      "peerDependencies": {
-        "gatsby-plugin-react-helmet": "*",
-        "react-helmet": "*"
-      }
-    },
     "node_modules/gatsby-plugin-remove-serviceworker": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-remove-serviceworker/-/gatsby-plugin-remove-serviceworker-1.0.0.tgz",
diff --git a/package.json b/package.json
index 22f31d8..97a6929 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,6 @@
     "gatsby-plugin-manifest": "^5.12.0",
     "gatsby-plugin-optimize-svgs": "^1.0.5",
     "gatsby-plugin-react-helmet": "^6.12.0",
-    "gatsby-plugin-react-helmet-canonical-urls": "^1.4.0",
     "gatsby-plugin-remove-serviceworker": "^1.0.0",
     "gatsby-plugin-robots-txt": "^1.8.0",
     "gatsby-plugin-sass": "^6.12.0",
@@ -159,4 +158,4 @@
       "path": "@commitlint/cz-commitlint"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index d182483..e8e3807 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import Helmet from "react-helmet";
 
 import { useSiteMetadata } from "@/hooks";
-import { toKebabCase } from "../../utils";
 import { CookieBar } from "../Cookiebar/CookieBar";
 import * as styles from "./Layout.module.scss";
 
@@ -36,12 +35,6 @@ const Layout: React.FC<Props> = ({
         <meta property="og:description" content={description} />
         <meta property="og:site_name" content={title} />
         <meta property="og:image" content={metaImageUrl} />
-        {slug && (
-          <meta
-            property="og:url"
-            content={`${url}/tag/${toKebabCase(slug.replace("/tag/", ""))}`}
-          />
-        )}
         <meta property="og:title" content={title} />
         <meta name="twitter:card" content="summary" />
         <meta name="twitter:title" content={title} />