feat!: add rest of twitter tags

README.md

@@ -85,9 +85,13 @@ openGraph.article.expirationTime | string | Sets `article:expiration_time`. The
 openGraph.article.author | string[] | Sets `article:author`. The author(s) of the article, if it's only one, pass an array with one entry. If there are multiple, multiple tags with descending relevance will be created.
 openGraph.article.section | string | Sets `article:section`. A high-level section name. E.g. Technology
 openGraph.article.tags | string[] | Sets `article:tag`. Tag words associated with this article. If it's only one, pass an array with one entry. If there are multiple, multiple tags with descending relevance will be created.
-twitter.card | string | Sets `twitter:card`. The card type, which will be one of “summary”, “summary_large_image”, “app”, or “player”.
+twitter.card | TwitterCardType (string) | Sets `twitter:card`. The card type. Must be one of “summary”, “summary_large_image”, “app”, or “player”.
 twitter.site | string | Sets `twitter:site`. (Twitter) @username for the website used in the card footer.
 twitter.creator | string | Sets `twitter:creator`. (Twitter) @username for the content creator / author.
+twitter.title | string | Sets `twitter:title`. Title of the page or article (equivalent to Open Graph's og:title).
+twitter.image | string | Sets `twitter:image`. Full link to the image you want to use for the page (equivalent to Open Graph's og:image).
+twitter.imageAlt | string | Sets `twitter:image:alt`. A description of what is in the image (not a caption). __If the page specifies `twitter.image` it should specify `twitter.imageAlt`__.
+twitter.description | string | Sets `twitter:description`. A one to two sentence description of your object.
 extend.link | Array<Link extends HTMLLinkElement { prefetch: boolean; }> | An array of free-form `<link>` you'd like to define.
 extend.meta | Array<Meta extends HTMLMetaElement { property: string; }> | An array of free-form `<meta>` tags you'd like to define.
 

cypress/e2e/seo.cy.js

@@ -294,6 +294,42 @@ describe("Twitter tags", () => {
       "@astrodotbuild"
     );
   });
+
+  it("sets twitter:title tag", () => {
+    cy.visit("localhost:3000/twitterTags");
+    cy.get('head meta[name="twitter:title"]').should(
+      "have.attr",
+      "content",
+      "Astro"
+    );
+  });
+
+  it("sets twitter:description tag", () => {
+    cy.visit("localhost:3000/twitterTags");
+    cy.get('head meta[name="twitter:description"]').should(
+      "have.attr",
+      "content",
+      "No JS. No pain."
+    );
+  });
+
+  it("sets twitter:image tag", () => {
+    cy.visit("localhost:3000/twitterTags");
+    cy.get('head meta[name="twitter:image"]').should(
+      "have.attr",
+      "content",
+      "url"
+    );
+  });
+
+  it("sets twitter:image:alt tag", () => {
+    cy.visit("localhost:3000/twitterTags");
+    cy.get('head meta[name="twitter:image:alt"]').should(
+      "have.attr",
+      "content",
+      "Image description."
+    );
+  });
 });
 
 describe("Extended tags", () => {

src/SEO.astro

@@ -6,6 +6,8 @@ import OpenGraphOptionalTags from "./components/OpenGraphOptionalTags.astro";
 import ExtendedTags from "./components/ExtendedTags.astro";
 import TwitterTags from "./components/TwitterTags.astro";
 
+type TwitterCardType = "summary" | "summary_large_image" | "app" | "player";
+
 export interface Link extends HTMLLinkElement {
   prefetch: boolean;
   crossorigin: string;
@@ -56,9 +58,13 @@ export interface Props {
     };
   };
   twitter?: {
-    card?: string;
+    card?: TwitterCardType;
     site?: string;
     creator?: string;
+    title?: string;
+    description?: string;
+    image?: string;
+    imageAlt?: string;
   };
   extend?: {
     link?: Partial<Link>[];

src/components/TwitterTags.astro

@@ -1,7 +1,11 @@
 ---
-const { card, site, creator } = Astro.props.twitter;
+const { card, site, title, creator, description, image, imageAlt } = Astro.props.twitter;
 ---
 
 {card ? <meta name="twitter:card" content={card} /> : null}
 {site ? <meta name="twitter:site" content={site} /> : null}
+{title ? <meta name="twitter:title" content={title} /> : null}
+{image ? <meta name="twitter:image" content={image} /> : null}
+{imageAlt ? <meta name="twitter:image:alt" content={imageAlt} /> : null}
+{description ? <meta name="twitter:description" content={description} /> : null}
 {creator ? <meta name="twitter:creator" content={creator} /> : null}

src/pages/twitterTags.astro

@@ -7,7 +7,18 @@ import SEO from "../SEO.astro";
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
     <SEO
-      twitter={{ card: "summary_large_image", site: "@astrodotbuild", creator: "@astrodotbuild" }} />
+      twitter={
+        {
+          card: "summary_large_image",
+          site: "@astrodotbuild",
+          creator: "@astrodotbuild",
+          title: "Astro",
+          description: "No JS. No pain.",
+          image: "url",
+          imageAlt: "Image description."
+        }
+      }
+    />
   </head>
   <body>Test</body>
 </html>