Merge pull request #344 from onurgenes/master

added canonicalUrl support
2022-02-11 22:37:37 +08:00 · 2022-02-11 22:37:37 +08:00 · b4afda64ae
commit b4afda64ae
parent fe08ac5e5e f46cebe696
7 changed files with 31 additions and 4 deletions
--- a/README.md
+++ b/README.md
@ -178,6 +178,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`)
+canonicalUrl (optional, canonical url for the post for SEO)
 ```

 Here's an example of a post's frontmatter:
@ -193,6 +194,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
+canonicalUrl: 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,10 @@ 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}`}
+      />
    </Head>
  )
 }
@ -67,7 +71,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 +146,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
@ -149,6 +149,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`)
+canonicalUrl (optional, canonical url for the post for SEO)
 ```

 Here's an example of a post's frontmatter:
@ -164,6 +165,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
+canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
 ---
 ```

--- a/data/blog/new-features-in-v1.mdx
+++ b/data/blog/new-features-in-v1.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://tailwind-nextjs-starter-blog.vercel.app/blog/new-features-in-v1/
 ---

 ## Overview
--- a/package-lock.json
+++ b/package-lock.json
@ -6,7 +6,7 @@
  "packages": {
    "": {
      "name": "tailwind-nextjs-starter-blog",
-      "version": "1.4.3",
+      "version": "1.5.0",
      "dependencies": {
        "@fontsource/inter": "4.5.2",
        "@mailchimp/mailchimp_marketing": "^3.0.58",
--- a/scripts/compose.js
+++ b/scripts/compose.js
@ -40,6 +40,7 @@ const genFrontMatter = (answers) => {
  summary: ${answers.summary ? answers.summary : ' '}
  images: []
  layout: ${answers.layout}
+  canonicalUrl: ${answers.canonicalUrl}
  `

  if (answers.authors.length > 0) {
@ -92,6 +93,11 @@ inquirer
      type: 'list',
      choices: getLayouts,
    },
+    {
+      name: 'canonicalUrl',
+      message: 'Enter canonical url:',
+      type: 'input',
+    },
  ])
  .then((answers) => {
    // Remove special characters and replace space with -
--- a/scripts/generate-sitemap.js
+++ b/scripts/generate-sitemap.js
@ -29,6 +29,9 @@ const siteMetadata = require('../data/siteMetadata')
                  if (fm.data.draft) {
                    return
                  }
+                  if (fm.data.canonicalUrl) {
+                    return
+                  }
                }
                const path = page
                  .replace('pages/', '/')