fix query parameters being included in canonical URLs

components/Container.tsx

@@ -1,6 +1,4 @@
-import { useRouter } from "next/router";
 import { NextSeo } from "next-seo";
-import * as config from "../lib/config";
 
 import styles from "./Container.module.scss";
 
@@ -11,17 +9,13 @@ type Props = {
 };
 
 const Container = ({ title, description, children }: Props) => {
-  const router = useRouter();
-
   return (
     <>
       <NextSeo
         title={title}
         description={description}
-        canonical={`${config.baseUrl}${router.asPath}`}
         openGraph={{
           title: title,
-          url: `${config.baseUrl}${router.asPath}`,
         }}
       />
       <div className={styles.container}>{children}</div>

pages/_app.tsx

@@ -21,6 +21,10 @@ import "../styles/index.scss";
 const App = ({ Component, pageProps }: AppProps) => {
   const router = useRouter();
 
+  // get this page's URL with full domain, and hack around query parameters and anchors
+  // NOTE: this assumes trailing slashes are enabled in next.config.js
+  const canonical = `${config.baseUrl}${router.pathname === "/" ? "" : router.pathname}/`;
+
   useEffect(() => {
     // https://usefathom.com/docs/integrations/next
     // https://vercel.com/guides/deploying-nextjs-using-fathom-analytics-with-vercel
@@ -49,11 +53,11 @@ const App = ({ Component, pageProps }: AppProps) => {
         defaultTitle={`${config.siteName} – ${config.shortDescription}`}
         titleTemplate={`%s – ${config.siteName}`}
         description={config.longDescription}
-        canonical={`${config.baseUrl}/`}
+        canonical={canonical}
         openGraph={{
           site_name: config.siteName,
           title: `${config.siteName} – ${config.shortDescription}`,
-          url: `${config.baseUrl}/`,
+          url: canonical,
           locale: config.siteLocale,
           type: "website",
           images: [

pages/notes/[slug].tsx

@@ -1,6 +1,7 @@
 import fs from "fs";
 import path from "path";
 import matter from "gray-matter";
+import { parseISO } from "date-fns";
 import { MDXRemote } from "next-mdx-remote";
 import { serialize } from "next-mdx-remote/serialize";
 import { NextSeo, ArticleJsonLd } from "next-seo";
@@ -24,13 +25,15 @@ const Note = ({ source, frontMatter, slug }) => (
     <NextSeo
       title={frontMatter.title}
       description={frontMatter.description}
+      canonical={`${config.baseUrl}/notes/${slug}/`}
       openGraph={{
         title: frontMatter.title,
+        url: `${config.baseUrl}/notes/${slug}/`,
         type: "article",
         article: {
           publishedTime: frontMatter.date,
         },
-        images: [
+        images: frontMatter.image && [
           {
             url: `${config.baseUrl}${frontMatter.image}`,
             alt: frontMatter.title,
@@ -44,12 +47,12 @@ const Note = ({ source, frontMatter, slug }) => (
       }}
     />
     <ArticleJsonLd
-      url={`${config.baseUrl}/notes/${slug}`}
+      url={`${config.baseUrl}/notes/${slug}/`}
       title={frontMatter.title}
       description={frontMatter.description}
       datePublished={frontMatter.date}
       dateModified={frontMatter.date}
-      images={[`${config.baseUrl}${frontMatter.image}`]}
+      images={frontMatter.image && [`${config.baseUrl}${frontMatter.image}`]}
       authorName={[config.authorName]}
       publisherName={config.siteName}
       publisherLogo={`${config.baseUrl}/static/images/me.jpg`}
@@ -92,7 +95,10 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 
   return {
     props: {
-      frontMatter: data,
+      frontMatter: {
+        ...data,
+        date: parseISO(data.date).toISOString(), // validate/normalize the date string provided from front matter
+      },
       source: mdxSource,
       slug: params.slug,
     },