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

This commit is contained in:
Rick van Lieshout 2023-10-25 23:59:16 +02:00
parent 8245e1f0d8
commit e065f16fb5
5 changed files with 14 additions and 30 deletions

View File

@ -164,13 +164,6 @@ export default {
start_url: "/", start_url: "/",
}, },
}, },
{
resolve: "gatsby-plugin-react-helmet-canonical-urls",
options: {
siteUrl: config.url,
stripQueryString: true,
},
},
// remove the old service worker if it is available. // remove the old service worker if it is available.
"gatsby-plugin-remove-serviceworker", "gatsby-plugin-remove-serviceworker",
"gatsby-plugin-image", "gatsby-plugin-image",

View File

@ -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([ setPreBodyComponents([
React.createElement("script", { React.createElement("script", {
key: "theme", key: "theme",

13
package-lock.json generated
View File

@ -23,7 +23,6 @@
"gatsby-plugin-manifest": "^5.12.0", "gatsby-plugin-manifest": "^5.12.0",
"gatsby-plugin-optimize-svgs": "^1.0.5", "gatsby-plugin-optimize-svgs": "^1.0.5",
"gatsby-plugin-react-helmet": "^6.12.0", "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-remove-serviceworker": "^1.0.0",
"gatsby-plugin-robots-txt": "^1.8.0", "gatsby-plugin-robots-txt": "^1.8.0",
"gatsby-plugin-sass": "^6.12.0", "gatsby-plugin-sass": "^6.12.0",
@ -16060,18 +16059,6 @@
"react-helmet": "^5.1.3 || ^6.0.0" "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": { "node_modules/gatsby-plugin-remove-serviceworker": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/gatsby-plugin-remove-serviceworker/-/gatsby-plugin-remove-serviceworker-1.0.0.tgz", "resolved": "https://registry.npmjs.org/gatsby-plugin-remove-serviceworker/-/gatsby-plugin-remove-serviceworker-1.0.0.tgz",

View File

@ -63,7 +63,6 @@
"gatsby-plugin-manifest": "^5.12.0", "gatsby-plugin-manifest": "^5.12.0",
"gatsby-plugin-optimize-svgs": "^1.0.5", "gatsby-plugin-optimize-svgs": "^1.0.5",
"gatsby-plugin-react-helmet": "^6.12.0", "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-remove-serviceworker": "^1.0.0",
"gatsby-plugin-robots-txt": "^1.8.0", "gatsby-plugin-robots-txt": "^1.8.0",
"gatsby-plugin-sass": "^6.12.0", "gatsby-plugin-sass": "^6.12.0",

View File

@ -2,7 +2,6 @@ import React from "react";
import Helmet from "react-helmet"; import Helmet from "react-helmet";
import { useSiteMetadata } from "@/hooks"; import { useSiteMetadata } from "@/hooks";
import { toKebabCase } from "../../utils";
import { CookieBar } from "../Cookiebar/CookieBar"; import { CookieBar } from "../Cookiebar/CookieBar";
import * as styles from "./Layout.module.scss"; 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:description" content={description} />
<meta property="og:site_name" content={title} /> <meta property="og:site_name" content={title} />
<meta property="og:image" content={metaImageUrl} /> <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 property="og:title" content={title} />
<meta name="twitter:card" content="summary" /> <meta name="twitter:card" content="summary" />
<meta name="twitter:title" content={title} /> <meta name="twitter:title" content={title} />