Feature/header canonical url (#11)

* add canonical plugin * add canonical config * add og-image * use subtitle and title in header * fix typos * make it prettier
piskunow · Aug 21, 2023 · 2c84ffb · 2c84ffb
1 parent ba23a52
commit 2c84ffb
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 7 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -10,6 +10,13 @@ module.exports = {
     siteUrl,
   },
   plugins: [
+    `gatsby-plugin-react-helmet`,
+    {
+      resolve: `gatsby-plugin-react-helmet-canonical-urls`,
+      options: {
+        siteUrl: `https://piskunow.com`,
+      },
+    },
     `gatsby-plugin-catch-links`,
     `gatsby-plugin-robots-txt`,
     {
@@ -38,7 +45,6 @@ module.exports = {
     },
     "gatsby-plugin-styled-components",
     "gatsby-remark-reading-time",
-    `gatsby-plugin-react-helmet`,
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     {

diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "gatsby-plugin-manifest": "^5.11.0",
     "gatsby-plugin-offline": "^6.11.0",
     "gatsby-plugin-react-helmet": "^6.11.0",
+    "gatsby-plugin-react-helmet-canonical-urls": "^1.4.0",
     "gatsby-plugin-react-redux": "^1.1.0",
     "gatsby-plugin-resolve-src": "^2.1.0",
     "gatsby-plugin-robots-txt": "^1.8.0",

diff --git a/src/components/SEO/index.jsx b/src/components/SEO/index.jsx
@@ -1,13 +1,17 @@
 import React from "react"
 import { Helmet } from "react-helmet"
-import { siteUrl } from "../../../blog-config"
+import { title, siteUrl } from "../../../blog-config"
 
-const SEO = ({ title, description, url }) => {
+const SEO = ({ subtitle, description, url }) => {
   return (
-    <Helmet>
-      <title>{title}</title>
+    <Helmet
+      link={url ? [{ rel: "canonical", key: url, href: url }] : []}
+      title={subtitle}
+      titleTemplate={subtitle ? `%s` : `%s | ${title}`}
+    >
+      <title>{subtitle}</title>
       <meta property="og:url" content={url} />
-      <meta property="og:title" content={title} />
+      <meta property="og:title" content={subtitle} />
       <meta property="og:image" content={`${siteUrl}/og-image.png`} />
       {description && <meta name="description" content={description} />}
       {description && <meta property="og:description" content={description} />}

diff --git a/static/og-image.png b/static/og-image.png
diff --git a/yarn.lock b/yarn.lock
@@ -1114,7 +1114,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.9", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.9", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.22.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682"
   integrity sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==
@@ -5768,6 +5768,13 @@ gatsby-plugin-page-creator@^5.11.0:
     globby "^11.1.0"
     lodash "^4.17.21"
 
+gatsby-plugin-react-helmet-canonical-urls@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet-canonical-urls/-/gatsby-plugin-react-helmet-canonical-urls-1.4.0.tgz#9a0f3a6e75b0ff54c6a8e70c2bc48219903a8296"
+  integrity sha512-5g2eqFNh8GSCTvL25sNm84IJ6G79qKHSnOa9druxBj6x5Iw3EujZMv6I4nGMlW5EZlaSf9D5QHNGypUW6idPTg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+
 gatsby-plugin-react-helmet@^6.11.0:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-6.11.0.tgz#0d8a430820835b05317a5c5e81ab96b9dbb14a4b"