feat: add support for basic twitter tags

jonasmerlin · Sep 4, 2021 · ab90b55 · ab90b55
1 parent 1fc3df8
commit ab90b55
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 0 deletions.
diff --git a/cypress/integration/seo.spec.js b/cypress/integration/seo.spec.js
@@ -165,4 +165,34 @@ describe("Open Graph image tags", () => {
 		)
 	})
 
+})
+
+describe("Twitter tags", () => {
+
+	it("sets twitter:card tag", () => {
+		cy.visit("localhost:3000/twitterTags")
+		cy.get('head meta[name="twitter:card"]').should(
+			'have.attr',
+			'content',
+			'summary_large_image'
+		)
+	})
+
+	it("sets twitter:site tag", () => {
+		cy.visit("localhost:3000/twitterTags")
+		cy.get('head meta[name="twitter:site"]').should(
+			'have.attr',
+			'content',
+			'@astrodotbuild'
+		)
+	})
+
+	it("sets twitter:creator tag", () => {
+		cy.visit("localhost:3000/twitterTags")
+		cy.get('head meta[name="twitter:creator"]').should(
+			'have.attr',
+			'content',
+			'@astrodotbuild'
+		)
+	})
 })
diff --git a/src/SEO.astro b/src/SEO.astro
@@ -38,6 +38,11 @@ export interface Props {
 			height?: number;
 			alt?: string; 
 		}
+	},
+	twitter?: {
+		card?: string;
+		site?: string;
+		creator?: string;
 	}
 }
 
@@ -105,6 +110,30 @@ function generateOpenGraphImageTags(props: Props) {
 		)
 	}
 }
+
+function generateTwitterTags(props: Props) {
+	if (props.twitter) {
+		const {
+			card,
+			site,
+			creator
+		} = props.twitter;
+
+		return (
+			<Fragment>
+				{ card ? (
+					<meta name="twitter:card" content={card}/>
+				) : null}
+				{ site ? (
+					<meta name="twitter:site" content={site}/>
+				) : null}
+				{ creator ? (
+					<meta name="twitter:creator" content={creator}/>
+				) : null}
+			</Fragment>
+		)
+	}
+}
 ---
 { title ? <title>{title}</title> : null }
 
@@ -163,3 +192,4 @@ function generateOpenGraphImageTags(props: Props) {
 ) : null }
 
 {generateOpenGraphImageTags(props)}
+{generateTwitterTags(props)}
diff --git a/src/pages/twitterTags.astro b/src/pages/twitterTags.astro
@@ -0,0 +1,19 @@
+---
+import { SEO } from "../index.js"
+---
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <SEO 
+			twitter={{
+				card: "summary_large_image",
+				site: "@astrodotbuild",
+				creator: "@astrodotbuild"
+			}}
+    />
+</head>
+<body>
+    Test
+</body>
+</html>