added canonicalUrl support

2022-01-18 12:28:41 +03:00
parent 507d32ab9d
commit 25e82e58bf
5 changed files with 28 additions and 3 deletions
--- a/README.md
+++ b/README.md
@@ -166,6 +166,7 @@ summary (optional)
 images (optional, if none provided defaults to socialBanner in siteMetadata config)
 authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
 layout (optional list which should correspond to the file names in `data/layouts`)
+canonical (optional, canonical url for the post for SEO)
 ```

 Here's an example of a post's frontmatter:
@@ -181,6 +182,7 @@ summary: 'Looking for a performant, out of the box template, with all the best i
 images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
 authors: ['default', 'sparrowhawk']
 layout: PostLayout
+canonical: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
 ---
 ```

--- a/components/SEO.js
+++ b/components/SEO.js
@@ -2,7 +2,7 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import siteMetadata from '@/data/siteMetadata'

-const CommonSEO = ({ title, description, ogType, ogImage, twImage }) => {
+const CommonSEO = ({ title, description, ogType, ogImage, twImage, canonicalUrl }) => {
  const router = useRouter()
  return (
    <Head>
@@ -24,6 +24,11 @@ const CommonSEO = ({ title, description, ogType, ogImage, twImage }) => {
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image" content={twImage} />
+      <link
+        rel="canonical"
+        href={canonicalUrl ? canonicalUrl : `${siteMetadata.siteUrl}${router.asPath}`}
+        key={'canonicalUrl'}
+      />
    </Head>
  )
 }
@@ -67,7 +72,16 @@ export const TagSEO = ({ title, description }) => {
  )
 }

-export const BlogSEO = ({ authorDetails, title, summary, date, lastmod, url, images = [] }) => {
+export const BlogSEO = ({
+  authorDetails,
+  title,
+  summary,
+  date,
+  lastmod,
+  url,
+  images = [],
+  canonicalUrl,
+}) => {
  const router = useRouter()
  const publishedAt = new Date(date).toISOString()
  const modifiedAt = new Date(lastmod || date).toISOString()
@@ -133,11 +147,11 @@ export const BlogSEO = ({ authorDetails, title, summary, date, lastmod, url, ima
        ogType="article"
        ogImage={featuredImages}
        twImage={twImageUrl}
+        canonicalUrl={canonicalUrl}
      />
      <Head>
        {date && <meta property="article:published_time" content={publishedAt} />}
        {lastmod && <meta property="article:modified_time" content={modifiedAt} />}
-        <link rel="canonical" href={`${siteMetadata.siteUrl}${router.asPath}`} />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
--- a/data/blog/introducing-tailwind-nextjs-starter-blog.mdx
+++ b/data/blog/introducing-tailwind-nextjs-starter-blog.mdx
@@ -146,6 +146,7 @@ summary (optional)
 images (optional, if none provided defaults to socialBanner in siteMetadata config)
 authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
 layout (optional list which should correspond to the file names in `data/layouts`)
+canonical (optional, canonical url for the post for SEO)
 ```

 Here's an example of a post's frontmatter:
@@ -161,6 +162,7 @@ summary: 'Looking for a performant, out of the box template, with all the best i
 images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
 authors: ['default', 'sparrowhawk']
 layout: PostLayout
+canonical: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
 ---
 ```

--- a/data/blog/new-features-in-v1-canonical.mdx
+++ b/data/blog/new-features-in-v1-canonical.mdx
@@ -7,6 +7,7 @@ draft: false
 summary: 'An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more'
 layout: PostSimple
 bibliography: references-data.bib
+canonicalUrl: https://example.com/
 ---

 ## Overview
--- a/scripts/compose.js
+++ b/scripts/compose.js
@@ -40,6 +40,7 @@ const genFrontMatter = (answers) => {
  summary: ${answers.summary ? answers.summary : ' '}
  images: []
  layout: ${answers.layout}
+  canonical: ${answers.canonical}
  `

  if (answers.authors.length > 0) {
@@ -92,6 +93,11 @@ inquirer
      type: 'list',
      choices: getLayouts,
    },
+    {
+      name: 'canonical',
+      message: 'Enter canonical url:',
+      type: 'input',
+    },
  ])
  .then((answers) => {
    // Remove special characters and replace space with -