feat: add Twitter summary and card types (#23)

* Added Twitter summary and card types, typed and tested * updated Readme.md with new twitter params * Fix pbs cuased by auto-formating & removed console * fixed readme (husky hooks were messing it up
artiebits · Jan 19, 2022 · adf7177 · adf7177
1 parent 76b5eb7
commit adf7177
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -77,11 +77,15 @@ Import Svelte SEO and add the desired properties. This will render out the tags
 | `openGraph.article.authors`        | string[]                | Writers of the article.                                                                                                                                                                                                                                                                                                                              |
 | `openGraph.article.section`        | string                  | A high-level section name. E.g. Technology                                                                                                                                                                                                                                                                                                           |
 | `openGraph.article.tags`           | string[]                | Tag words associated with this article.                                                                                                                                                                                                                                                                                                              |
+| `twitter.card`                     | string                  | Card type (one of `summary`, `summary_large_image`, `player`), defaults to `summary_large_image`       |
 | `twitter.site`                     | string                  | The Twitter @username the card should be attributed to.                                                                                                                                                                                                                                                                                              |
 | `twitter.title`                    | string                  | A concise title for the related content. Note- iOS, Android: Truncated to two lines in timeline and expanded Tweet ; Web: Truncated to one line in timeline and expanded Tweet                                                                                                                                                                       |
 | `twitter.description`              | string                  | A description that concisely summarizes the content as appropriate for presentation within a Tweet. You should not re-use the title as the description or use this field to describe the general services provided by the website. Note- iOS, Android: Not displayed ; Web: Truncated to three lines in timeline and expanded Tweet                  |
 | `twitter.image`                    | string(url)             | A URL to a unique image representing the content of the page. Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported. |
 | `twitter.imageAlt`                 | string                  | A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters.                                                                                                                                                                                                               |
+| `twitter.player`                   | string                  | Url for the video to play in the card. Only used with the `player` type card.  |
+| `twitter.playerWidth`              | number                  | Width of the player that plays the content on twitter (in Pixels). Only used with the `player` type card.  |
+| `twitter.playerHeight`             | number                  | Height of the player that plays the content on twtter (in Pixels). ONly used with the `player` type card.    |    
 | `jsonLd`                           | object                  | Data in `ld+json` format. [See Examples](#json-dl-example).                                                                                                                                                                                                                                                                                          |
 
 ### Open Graph

diff --git a/cypress/integration/spec.js b/cypress/integration/spec.js
@@ -180,6 +180,102 @@ describe("SEO Meta", () => {
     );
   });
 
+  it("renders Twitter Card tags for summary type card", () => {
+    cy.visit("/summary");
+    cy.get('head meta[name="twitter:card"]').should(
+      "have.attr",
+      "content",
+      "summary"
+    );
+
+    cy.get('head meta[name="twitter:site"]').should(
+      "have.attr",
+      "content",
+      "@username"
+    );
+
+    cy.get('head meta[name="twitter:title"]').should(
+      "have.attr",
+      "content",
+      "Twitter Card Title"
+    );
+
+    cy.get('head meta[name="twitter:description"]').should(
+      "have.attr",
+      "content",
+      "Description of Twitter Card"
+    );
+
+    cy.get('head meta[name="twitter:image"]').should(
+      "have.attr",
+      "content",
+      "https://www.example.com/images/cover.jpg"
+    );
+
+    cy.get('head meta[name="twitter:image:alt"]').should(
+      "have.attr",
+      "content",
+      "Alt text for the card!"
+    );
+  });
+
+  it("renders Twitter Card tags for player type card", () => {
+    cy.visit("/player");
+    cy.get('head meta[name="twitter:card"]').should(
+      "have.attr",
+      "content",
+      "player"
+    );
+
+    cy.get('head meta[name="twitter:site"]').should(
+      "have.attr",
+      "content",
+      "@username"
+    );
+
+    cy.get('head meta[name="twitter:title"]').should(
+      "have.attr",
+      "content",
+      "Twitter Card Title"
+    );
+
+    cy.get('head meta[name="twitter:description"]').should(
+      "have.attr",
+      "content",
+      "Description of Twitter Card"
+    );
+
+    cy.get('head meta[name="twitter:image"]').should(
+      "have.attr",
+      "content",
+      "https://www.example.com/images/cover.jpg"
+    );
+
+    cy.get('head meta[name="twitter:image:alt"]').should(
+      "have.attr",
+      "content",
+      "Alt text for the card!"
+    );
+
+    cy.get('head meta[name="twitter:player"]').should(
+      "have.attr",
+      "content",
+      "https://www.example.com/videos/example-video"
+    );
+
+    cy.get('head meta[name="twitter:player:width"]').should(
+      "have.attr",
+      "content",
+      "200"
+    );
+
+    cy.get('head meta[name="twitter:player:height"]').should(
+      "have.attr",
+      "content",
+      "100"
+    );
+  });
+
   it("renders child elements of SvelteSEO", () => {
     cy.get('head link[rel="manifest"]').should(
       "have.attr",

diff --git a/dev/components/App.svelte b/dev/components/App.svelte
@@ -1,7 +1,6 @@
 <script>
   import SvelteSeo from "../../src/SvelteSeo.svelte";
 
-
   const openGraph = {
     title: "Open Graph Article Title",
     description: "Description of open graph article",
@@ -34,12 +33,20 @@
     ],
   };
 
-  const twitter = {
-    site: "@username",
-    title: "Twitter Card Title",
-    description: "Description of Twitter Card",
-    image: "https://www.example.com/images/cover.jpg",
-    imageAlt: "Alt text for the card!",
+  const twitter = () => {
+    const playerPath = "/player" === window.location.pathname;
+    const summaryPath = "/summary" === window.location.pathname;
+    return {
+      card: (playerPath && "player") || (summaryPath && "summary") || undefined,
+      site: "@username",
+      title: "Twitter Card Title",
+      description: "Description of Twitter Card",
+      image: "https://www.example.com/images/cover.jpg",
+      imageAlt: "Alt text for the card!",
+      player: "https://www.example.com/videos/example-video",
+      playerWidth: (playerPath && 200) || undefined,
+      playerHeight: (playerPath && 100) || undefined,
+    };
   };
 
   const jsonLd = {
@@ -53,6 +60,7 @@
     datePublished: "2020-08-03T17:31:37Z",
     dateModified: "2020-08-20T09:31:37Z",
   };
+
 </script>
 
 <SvelteSeo
@@ -61,8 +69,8 @@
   keywords="Keywords of article page"
   canonical="https://www.example.com"
   {openGraph}
-  {twitter}
+  twitter={twitter()}
   {jsonLd}
 >
   <link rel="manifest" href="/manifest.json" />
-</SvelteSeo>
+</SvelteSeo>
diff --git a/rollup.config.dev.js b/rollup.config.dev.js
@@ -17,7 +17,7 @@ function serve() {
       if (server) return;
       server = require("child_process").spawn(
         "npm",
-        ["run", "start", "--", "--dev"],
+        ["run", "start", "--", "--dev", "--single"],
         {
           stdio: ["ignore", "inherit", "inherit"],
           shell: true,

diff --git a/src/SvelteSeo.svelte b/src/SvelteSeo.svelte
@@ -104,7 +104,7 @@
   {/if}
 
   {#if twitter}
-    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:card" content={twitter.card || "summary_large_image" }/>
     {#if twitter.site}
       <meta
         name="twitter:site"
@@ -129,12 +129,30 @@
         content={twitter.image}
       />
     {/if}
-    {#if twitter.imageAlt}
+     {#if twitter.imageAlt}
       <meta
         name="twitter:image:alt"
         content={twitter.imageAlt}
       />
     {/if}
+    {#if twitter.player}
+      <meta
+        name="twitter:player"
+        content={twitter.player}
+      />
+    {/if}
+     {#if twitter.playerWidth}
+      <meta
+        name="twitter:player:width"
+        content={twitter.playerWidth}
+      />
+    {/if}
+    {#if twitter.playerHeight}
+      <meta
+        name="twitter:player:height"
+        content={twitter.playerHeight}
+      />
+    {/if}
   {/if}
 
   {#if jsonLd}

diff --git a/types/SvelteSeo.d.ts b/types/SvelteSeo.d.ts
@@ -47,13 +47,19 @@ export interface OpenGraphImage {
 }
 
 export interface Twitter {
+  card?: TwitterCard;
   site?: string;
   title?: string;
   description?: string;
   image?: string;
   imageAlt?: string;
+  player?: string;
+  playerWidth?: number;
+  playerHeight?: number;
 }
 
+export type TwitterCard = 'summary' | 'summary_large_image' | 'player'
+
 export default class SvelteSeo extends SvelteComponentTyped<
   SvelteSeoProps,
   {},