jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added canonicalUrl support

Browse Source
This commit is contained in:
Onur Geneş 2022-01-18 12:28:41 +03:00
parent 507d32ab9d
commit 25e82e58bf
5 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -166,6 +166,7 @@ summary (optional)
images (optional, if none provided defaults to socialBanner in siteMetadata config) 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) 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`) 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: 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'] images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
authors: ['default', 'sparrowhawk'] authors: ['default', 'sparrowhawk']
layout: PostLayout layout: PostLayout
canonical: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
--- ---
``` ```

20
components/SEO.js
View File

@ -2,7 +2,7 @@ import Head from 'next/head'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import siteMetadata from '@/data/siteMetadata' import siteMetadata from '@/data/siteMetadata'
const CommonSEO = ({ title, description, ogType, ogImage, twImage }) => { const CommonSEO = ({ title, description, ogType, ogImage, twImage, canonicalUrl }) => {
const router = useRouter() const router = useRouter()
return ( return (
<Head> <Head>
@ -24,6 +24,11 @@ const CommonSEO = ({ title, description, ogType, ogImage, twImage }) => {
<meta name="twitter:title" content={title} /> <meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} /> <meta name="twitter:description" content={description} />
<meta name="twitter:image" content={twImage} /> <meta name="twitter:image" content={twImage} />
<link
rel="canonical"
href={canonicalUrl ? canonicalUrl : `${siteMetadata.siteUrl}${router.asPath}`}
key={'canonicalUrl'}
/>
</Head> </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 router = useRouter()
const publishedAt = new Date(date).toISOString() const publishedAt = new Date(date).toISOString()
const modifiedAt = new Date(lastmod || 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" ogType="article"
ogImage={featuredImages} ogImage={featuredImages}
twImage={twImageUrl} twImage={twImageUrl}
canonicalUrl={canonicalUrl}
/> />
<Head> <Head>
{date && <meta property="article:published_time" content={publishedAt} />} {date && <meta property="article:published_time" content={publishedAt} />}
{lastmod && <meta property="article:modified_time" content={modifiedAt} />} {lastmod && <meta property="article:modified_time" content={modifiedAt} />}
<link rel="canonical" href={`${siteMetadata.siteUrl}${router.asPath}`} />
<script <script
type="application/ld+json" type="application/ld+json"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{

2
data/blog/introducing-tailwind-nextjs-starter-blog.mdx
View File

@ -146,6 +146,7 @@ summary (optional)
images (optional, if none provided defaults to socialBanner in siteMetadata config) 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) 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`) 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: 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'] images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
authors: ['default', 'sparrowhawk'] authors: ['default', 'sparrowhawk']
layout: PostLayout layout: PostLayout
canonical: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
--- ---
``` ```

1
data/blog/new-features-in-v1.mdx → data/blog/new-features-in-v1-canonical.mdx
View File

@ -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' summary: 'An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more'
layout: PostSimple layout: PostSimple
bibliography: references-data.bib bibliography: references-data.bib
canonicalUrl: https://example.com/
--- ---
## Overview ## Overview

6
scripts/compose.js
View File

@ -40,6 +40,7 @@ const genFrontMatter = (answers) => {
summary: ${answers.summary ? answers.summary : ' '} summary: ${answers.summary ? answers.summary : ' '}
images: [] images: []
layout: ${answers.layout} layout: ${answers.layout}
canonical: ${answers.canonical}
` `
if (answers.authors.length > 0) { if (answers.authors.length > 0) {
@ -92,6 +93,11 @@ inquirer
type: 'list', type: 'list',
choices: getLayouts, choices: getLayouts,
}, },
{
name: 'canonical',
message: 'Enter canonical url:',
type: 'input',
},
]) ])
.then((answers) => { .then((answers) => {
// Remove special characters and replace space with - // Remove special characters and replace space with -