diff --git a/src/components/SEO/SEO.mdx b/src/components/SEO/SEO.mdx
index 44cd57bd..437f26f7 100644
--- a/src/components/SEO/SEO.mdx
+++ b/src/components/SEO/SEO.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Canvas } from '@storybook/blocks';
 
 import * as SEOStories from './SEO.stories.svelte';
 
@@ -21,7 +21,7 @@ The `SEO` component adds essential metadata to pages.
   seoTitle="A title for Google"
   seoDescription="A description for Google"
   shareTitle="A title for Twitter/Facebook"
-  shareDecription="A description for Twitter/Facebook"
+  shareDescription="A description for Twitter/Facebook"
   shareImgPath="https://graphics.reuters.com/world-coronavirus-tracker-and-maps/assets/images/share.jpg"
   shareImgAlt="An image showing global COVID infection rates"
   publishTime="2020-09-15T00:00:00.000Z"
@@ -75,3 +75,6 @@ shareImgAlt: Alt text for share image.
 ```
 
 > **Note:** For _reasons_, we can't document the value of `VITE_BASE_URL` below. It's `import` + `.meta.env.BASE_URL` (concatenate all that) in the Graphics Kit and other Vite-based rigs.
+
+<Canvas of={SEOStories.Demo} />
+```
diff --git a/src/components/SEO/SEO.stories.svelte b/src/components/SEO/SEO.stories.svelte
index d8fba939..967bd0dd 100644
--- a/src/components/SEO/SEO.stories.svelte
+++ b/src/components/SEO/SEO.stories.svelte
@@ -8,14 +8,19 @@
   });
 </script>
 
+<div>View page source to see the SEO metadata.</div>
 <Story
   name="Demo"
   args={{
-    seoTitle: 'blah',
     baseUrl: 'https://graphics.reuters.com',
-    pageUrl: new URL('https://graphics.reuters.com/hello-world/'),
-    publishTime: new Date('2020-09-15').toISOString(),
+    // pageUrl:{new URL(
+    //   'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/'
+    // )}
+    seoTitle: 'A title for Google',
+    seoDescription: 'A description for Google',
+    shareTitle: 'A title for Twitter/Facebook',
+    shareDescription: 'A description for Twitter/Facebook',
+    shareImgPath:
+      'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/assets/images/share.jpg',
   }}
->
-  View page source to see the SEO metadata.
-</Story>
+/>
diff --git a/src/components/SEO/SEO.svelte b/src/components/SEO/SEO.svelte
index 6afeb156..a9018264 100644
--- a/src/components/SEO/SEO.svelte
+++ b/src/components/SEO/SEO.svelte
@@ -7,61 +7,43 @@
 
   interface Props {
     /**
-     * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path)
-     * is globally available as `import.meta.env.BASE_URL`.
-     * @requiredx
-     * @type {string}
+     * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path) is globally available as `import.meta.env.BASE_URL`.
      */
-    baseUrl?: string;
+    baseUrl: string;
     /**
      * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
-     * @required
-     * @type {URL}
      */
-    pageUrl?: URL | null;
+    pageUrl: URL | null;
     /**
      * SEO title
-     * @required
-     * @type {string}
      */
     seoTitle: string;
     /**
      * SEO description
-     * @required
-     * @type {string}
      */
     seoDescription: string;
     /**
      * Share title
-     * @required
-     * @type {string}
      */
     shareTitle: string;
     /**
      * Share description
-     * @required
-     * @type {string}
      */
     shareDescription: string;
     /**
      * Share image path. **Must be an absolute path.**
-     * @required
-     * @type {string}
      */
     shareImgPath: string;
     /**
      * Share image alt text, up to 420 characters.
-     * @type {string}
      */
     shareImgAlt?: string;
     /**
      * Publish time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
-     * @type {string}
      */
     publishTime?: string;
     /**
      * Updated time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
-     * @type {string}
      */
     updateTime?: string;
     /**
@@ -71,7 +53,7 @@
   }
 
   let {
-    baseUrl = '',
+    baseUrl,
     pageUrl = null,
     seoTitle,
     seoDescription,
@@ -83,7 +65,6 @@
     updateTime = '',
     authors = [],
   }: Props = $props();
-
   const getOrigin = (baseUrl: string) => {
     try {
       return new URL(baseUrl).origin;