From 363460039bb87dd9870aaacd565a7ff1a01d40f8 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Thu, 8 Sep 2022 14:14:58 +0100
Subject: [PATCH] closes #27

---
 src/components/SEO/SEO.svelte                | 22 +++++++++++++-------
 src/components/SEO/stories/docs/component.md |  1 +
 src/components/SEO/stories/docs/quickit.md   |  1 +
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/SEO/SEO.svelte b/src/components/SEO/SEO.svelte
index a2793515..45b6e835 100644
--- a/src/components/SEO/SEO.svelte
+++ b/src/components/SEO/SEO.svelte
@@ -22,36 +22,41 @@
    * @required
    * @type {string}
    */
-  export let seoTitle;
+  export let seoTitle: string;
   /**
    * SEO description
    * @required
    * @type {string}
    */
-  export let seoDescription;
+  export let seoDescription: string;
   /**
    * Share title
    * @required
    * @type {string}
    */
-  export let shareTitle;
+  export let shareTitle: string;
   /**
    * Share description
    * @required
    * @type {string}
    */
-  export let shareDescription;
+  export let shareDescription: string;
   /**
    * Share image path. **Must be an absolute path.**
    * @required
    * @type {string}
    */
-  export let shareImgPath;
+  export let shareImgPath: string;
+  /**
+   * Share image alt text, up to 420 characters.
+   * @type {string}
+   */
+  export let shareImgAlt: string = '';
   /**
    * [HTML lang attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang). **Two-letter code only.**
    * @type {string}
    */
-  export let lang = 'en';
+  export let lang: string = 'en';
   /**
    * Publish time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
    * @type {string}
@@ -193,7 +198,10 @@
   <meta name="twitter:domain" content="{origin}" />
   <meta name="twitter:title" content="{shareTitle}" />
   <meta name="twitter:description" content="{shareDescription}" />
-  <meta name="twitter:image:src" content="{shareImgPath}" />
+  <meta name="twitter:image" content="{shareImgPath}" />
+  {#if shareImgAlt}
+    <meta name="twitter:image:alt" content="{shareImgAlt}" />
+  {/if}
 
   <meta property="fb:app_id" content="319194411438328" />
   <meta property="fb:admins" content="616167736" />
diff --git a/src/components/SEO/stories/docs/component.md b/src/components/SEO/stories/docs/component.md
index a60bf1f0..11913d77 100644
--- a/src/components/SEO/stories/docs/component.md
+++ b/src/components/SEO/stories/docs/component.md
@@ -15,6 +15,7 @@ The `SEO` component adds essential metadata to published pages.
   shareTitle="A title for Twitter/Facebook"
   shareDecription="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"
   lang="en"
   publishTime="2020-09-15T00:00:00.000Z"
   updateTime="2021-01-10T12:30:00.000Z"
diff --git a/src/components/SEO/stories/docs/quickit.md b/src/components/SEO/stories/docs/quickit.md
index fb1d94fb..356f9722 100644
--- a/src/components/SEO/stories/docs/quickit.md
+++ b/src/components/SEO/stories/docs/quickit.md
@@ -22,6 +22,7 @@ Most of the fields are filled in by other sources, like your Google Doc and pack
   shareTitle="{content.ShareTitle}"
   shareDescription="{content.ShareDescription}"
   shareImgPath="{`${assets}/${content.ShareImgPath}`}"
+  shareImgAlt="{content.ShareImgAlt}"
   publishTime="{pkg?.reuters?.graphic?.published}"
   updateTime="{pkg?.reuters?.graphic?.updated}"
   authors="{pkg?.reuters?.graphic?.authors}"