fix: now setting og:url correctly as well as the canonical url

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",

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",

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",

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",

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} />