update seo

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`}
-        openGraph={{
-          url: `${siteMetadata.siteUrl}/about`,
-          title: `About - ${siteMetadata.author}`,
-        }}
+        description={`About me - ${siteMetadata.author}`}
+        url={`${siteMetadata.siteUrl}/about`}
       />
       <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`}
-        openGraph={{
-          url: `${siteMetadata.siteUrl}/blog`,
-          title: `Blog - ${siteMetadata.author}`,
-          description: siteMetadata.description,
-        }}
+        url={`${siteMetadata.siteUrl}/blog`}
       />
-
       <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}
-        openGraph={{
-          url: siteMetadata.siteUrl,
-          description: siteMetadata.description,
-        }}
+        url={siteMetadata.siteUrl}
       />
       <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
-        title={`Tags - ${siteMetadata.title}`}
-        canonical={`${siteMetadata.siteUrl}/tags`}
-        openGraph={{
-          url: `${siteMetadata.siteUrl}/tags`,
-          title: `Tags - ${siteMetadata.title}`,
-        }}
+      <PageSeo
+        title={`Tags - ${siteMetadata.author}`}
+        description="Things I blog about"
+        url={`${siteMetadata.siteUrl}/tags`}
       />
       <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}
-        canonical={`${siteMetadata.siteUrl}/tags/${tag}`}
-        openGraph={{
-          url: `${siteMetadata.siteUrl}/tags/${tag}`,
-          title: `${tag} - ${siteMetadata.title}`,
-        }}
+        description={`${tag} tags - ${siteMetadata.title}`}
+        url={`${siteMetadata.siteUrl}/tags/${tag}`}
       />
       <ListLayout posts={posts} title={title} />
     </>