components/BlogSeo.js

@@ -1,43 +0,0 @@
-import { NextSeo, ArticleJsonLd } from 'next-seo'
-import siteMetadata from '@/data/siteMetadata'
-
-const BlogSeo = ({ title, summary, date, url, image }) => {
-  const publishedAt = new Date(date).toISOString()
-  const featuredImage = {
-    url: `${siteMetadata.url}${image}`,
-    alt: title,
-  }
-
-  return (
-    <>
-      <NextSeo
-        title={`${title} – ${siteMetadata.title}`}
-        description={summary}
-        canonical={url}
-        openGraph={{
-          type: 'article',
-          article: {
-            publishedTime: publishedAt,
-          },
-          url,
-          title,
-          description: summary,
-          images: [featuredImage],
-        }}
-      />
-      <ArticleJsonLd
-        authorName={siteMetadata.author}
-        dateModified={publishedAt}
-        datePublished={publishedAt}
-        description={summary}
-        images={[featuredImage]}
-        publisherLogo="/static/favicons/android-chrome-96x96.png"
-        publisherName={siteMetadata.author}
-        title={title}
-        url={url}
-      />
-    </>
-  )
-}
-
-export default BlogSeo

components/SEO.js

@@ -1,6 +1,7 @@
+import { NextSeo, ArticleJsonLd } from 'next-seo'
 import siteMetadata from '@/data/siteMetadata'
 
-const SEO = {
+export const SEO = {
   title: siteMetadata.title,
   description: siteMetadata.description,
   openGraph: {
@@ -11,7 +12,7 @@ const SEO = {
     description: siteMetadata.description,
     images: [
       {
-        url: siteMetadata.image,
+        url: siteMetadata.socialBanner,
         alt: siteMetadata.title,
         width: 1280,
         height: 720,
@@ -25,4 +26,58 @@ const SEO = {
   },
 }
 
-export default SEO
+export const PageSeo = ({ title, description, url }) => {
+  return (
+    <>
+      <NextSeo
+        title={`${title} – ${siteMetadata.title}`}
+        description
+        canonical={url}
+        openGraph={{
+          url,
+          title,
+          description,
+        }}
+      />
+    </>
+  )
+}
+
+export const BlogSeo = ({ title, summary, date, url, image = siteMetadata.socialBanner }) => {
+  const publishedAt = new Date(date).toISOString()
+  const featuredImage = {
+    url: `${siteMetadata.siteUrl}${image}`,
+    alt: title,
+  }
+
+  return (
+    <>
+      <NextSeo
+        title={`${title} – ${siteMetadata.title}`}
+        description={summary}
+        canonical={url}
+        openGraph={{
+          type: 'article',
+          article: {
+            publishedTime: publishedAt,
+          },
+          url,
+          title,
+          description: summary,
+          images: [featuredImage],
+        }}
+      />
+      <ArticleJsonLd
+        authorName={siteMetadata.author}
+        dateModified={publishedAt}
+        datePublished={publishedAt}
+        description={summary}
+        images={[featuredImage]}
+        publisherLogo="/static/favicons/android-chrome-96x96.png"
+        publisherName={siteMetadata.author}
+        title={title}
+        url={url}
+      />
+    </>
+  )
+}

data/siteMetadata.json

@@ -7,6 +7,7 @@
   "siteUrl": "https://tailwind-nextjs-starter-blog.vercel.app",
   "siteRepo": "https://github.com/timlrx/tailwind-nextjs-starter-blog",
   "image": "/static/images/avatar.png",
+  "socialBanner": "/static/images/twitter-card.png",
   "email": "address@yoursite.com",
   "github": "https://github.com",
   "twitter": "https://twitter.com/Twitter",

layouts/PostLayout.js

@@ -3,7 +3,7 @@ import Link from '@/components/Link'
 
 import SectionContainer from '@/components/SectionContainer'
 import PageTitle from '@/components/PageTitle'
-import BlogSeo from '@/components/BlogSeo'
+import { BlogSeo } from '@/components/SEO'
 import Tag from '@/components/Tag'
 import siteMetdata from '@/data/siteMetadata'
 

pages/_app.js

@@ -5,7 +5,7 @@ import { ThemeProvider } from 'next-themes'
 import { DefaultSeo } from 'next-seo'
 import Head from 'next/head'
 
-import SEO from '@/components/SEO'
+import { SEO } from '@/components/SEO'
 import LayoutWrapper from '@/components/LayoutWrapper'
 import MDXComponents from '@/components/MDXComponents'
 

pages/about.js

@@ -1,17 +1,15 @@
 import { NextSeo } from 'next-seo'
 import siteMetadata from '@/data/siteMetadata'
 import SocialIcon from '@/components/social-icons'
+import { PageSeo } from '@/components/SEO'
 
 export default function About() {
   return (
     <>
-      <NextSeo
+      <PageSeo
         title={`About - ${siteMetadata.author}`}
-        canonical={`${siteMetadata.siteUrl}/about`}
+        description={`About me - ${siteMetadata.author}`}
-        openGraph={{
+        url={`${siteMetadata.siteUrl}/about`}
-          url: `${siteMetadata.siteUrl}/about`,
-          title: `About - ${siteMetadata.author}`,
-        }}
       />
       <div className="divide-y">
         <div className="pt-6 pb-8 space-y-2 md:space-y-5">

pages/blog.js

@@ -1,7 +1,7 @@
-import { NextSeo } from 'next-seo'
 import { getAllFilesFrontMatter } from '@/lib/mdx'
 import siteMetadata from '@/data/siteMetadata'
 import ListLayout from '@/layouts/ListLayout'
+import { PageSeo } from '@/components/SEO'
 
 export async function getStaticProps() {
   const posts = await getAllFilesFrontMatter('blog')
@@ -12,17 +12,11 @@ export async function getStaticProps() {
 export default function Blog({ posts }) {
   return (
     <>
-      <NextSeo
+      <PageSeo
         title={`Blog - ${siteMetadata.author}`}
         description={siteMetadata.description}
-        canonical={`${siteMetadata.siteUrl}/blog`}
+        url={`${siteMetadata.siteUrl}/blog`}
-        openGraph={{
-          url: `${siteMetadata.siteUrl}/blog`,
-          title: `Blog - ${siteMetadata.author}`,
-          description: siteMetadata.description,
-        }}
       />
-
       <ListLayout posts={posts} title="All Posts" />
     </>
   )

pages/index.js

@@ -1,9 +1,9 @@
 import tinytime from 'tinytime'
-import { NextSeo } from 'next-seo'
 import { getAllFilesFrontMatter } from '@/lib/mdx'
 import siteMetadata from '@/data/siteMetadata'
 import Tag from '@/components/Tag'
 import Link from '@/components/Link'
+import { PageSeo } from '@/components/SEO'
 
 const MAX_DISPLAY = 5
 const postDateTemplate = tinytime('{MMMM} {DD}, {YYYY}')
@@ -17,14 +17,10 @@ export async function getStaticProps() {
 export default function Home({ posts }) {
   return (
     <>
-      <NextSeo
+      <PageSeo
         title={siteMetadata.title}
         description={siteMetadata.description}
-        canonical={siteMetadata.siteUrl}
+        url={siteMetadata.siteUrl}
-        openGraph={{
-          url: siteMetadata.siteUrl,
-          description: siteMetadata.description,
-        }}
       />
       <div className="divide-y divide-gray-200 dark:divide-gray-700">
         <div className="pt-6 pb-8 space-y-2 md:space-y-5">

pages/tags.js

@@ -1,9 +1,9 @@
 import kebabCase from 'just-kebab-case'
-import { NextSeo } from 'next-seo'
 import siteMetadata from '@/data/siteMetadata'
 import { getAllTags } from '@/lib/tags'
 import Tag from '@/components/Tag'
 import Link from '@/components/Link'
+import { PageSeo } from '@/components/SEO'
 
 export async function getStaticProps() {
   const tags = await getAllTags('blog')
@@ -15,13 +15,10 @@ export default function Tags({ tags }) {
   const sortedTags = Object.keys(tags).sort((a, b) => tags[b] - tags[a])
   return (
     <>
-      <NextSeo
+      <PageSeo
-        title={`Tags - ${siteMetadata.title}`}
+        title={`Tags - ${siteMetadata.author}`}
-        canonical={`${siteMetadata.siteUrl}/tags`}
+        description="Things I blog about"
-        openGraph={{
+        url={`${siteMetadata.siteUrl}/tags`}
-          url: `${siteMetadata.siteUrl}/tags`,
-          title: `Tags - ${siteMetadata.title}`,
-        }}
       />
       <div className="flex items-start justify-start flex-col divide-y divide-gray-200 dark:divide-gray-700 md:justify-center md:items-center md:divide-y-0 md:flex-row md:space-x-6 md:mt-24">
         <div className="pt-6 pb-8 space-x-2 md:space-y-5">

pages/tags/[tag].js

@@ -1,9 +1,9 @@
-import { NextSeo } from 'next-seo'
+import kebabCase from 'just-kebab-case'
 import { getAllFilesFrontMatter } from '@/lib/mdx'
 import { getAllTags } from '@/lib/tags'
 import siteMetadata from '@/data/siteMetadata'
 import ListLayout from '@/layouts/ListLayout'
-import kebabCase from 'just-kebab-case'
+import { PageSeo } from '@/components/SEO'
 
 export async function getStaticPaths() {
   const tags = await getAllTags('blog')
@@ -32,14 +32,10 @@ export default function Blog({ posts, tag }) {
   const title = tag[0].toUpperCase() + tag.split(' ').join('-').slice(1)
   return (
     <>
-      <NextSeo
+      <PageSeo
         title={`${tag} - ${siteMetadata.title}`}
-        description={siteMetadata.description}
+        description={`${tag} tags - ${siteMetadata.title}`}
-        canonical={`${siteMetadata.siteUrl}/tags/${tag}`}
+        url={`${siteMetadata.siteUrl}/tags/${tag}`}
-        openGraph={{
-          url: `${siteMetadata.siteUrl}/tags/${tag}`,
-          title: `${tag} - ${siteMetadata.title}`,
-        }}
       />
       <ListLayout posts={posts} title={title} />
     </>