closes #27

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" />

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"

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}"