Add OpenGraph tags to home and detail pages

Add OpenGraph tags (and the associated social cards) to the main (list view) page as well as on the individual detail pages. Closes #460
georgetown-cset · Jun 25, 2024 · b7c7327 · b7c7327
1 parent 5940da9
commit b7c7327
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 16 deletions.
diff --git a/web/gui-v2/package-lock.json b/web/gui-v2/package-lock.json
diff --git a/web/gui-v2/package.json b/web/gui-v2/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@eto/eto-ui-components": "^1.8.0",
+    "@eto/social-cards": "^0.4.3",
     "@mdx-js/react": "^2.3.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.5",

diff --git a/web/gui-v2/src/components/MetaTagsWrapper.jsx b/web/gui-v2/src/components/MetaTagsWrapper.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { MetaTags } from '@eto/social-cards';
+import socialCard from '@eto/social-cards/dist/tools/parat.png';
+
+const MetaTagsWrapper = ({
+  title = "PARAT \u2013 Emerging Technology Observatory",
+  subtitle = undefined,
+  description = "ETO's tool to map high-level trends in global emerging technology research."
+}) => {
+  const fullTitle = subtitle ? `${subtitle} \u2013 ${title}` : title;
+
+  return (
+    <>
+      <title>{fullTitle}</title>
+      <MetaTags
+        title={fullTitle}
+        description={description}
+        socialCardUrl={socialCard}
+      />
+    </>
+  );
+};
+
+export default MetaTagsWrapper;
diff --git a/web/gui-v2/src/pages/company/{companiesJson.cset_id}-{companiesJson.name}.jsx b/web/gui-v2/src/pages/company/{companiesJson.cset_id}-{companiesJson.name}.jsx
@@ -6,6 +6,7 @@ import { AppWrapper } from '@eto/eto-ui-components';
 import DetailView from '../../components/DetailView';
 import ParatUsageDisclaimer from '../../components/ParatUsageDisclaimer';
 import { company_data as allCompanies } from '../../static_data/data';
+import MetaTagsWrapper from '../../components/MetaTagsWrapper';
 
 const CompanyPage = ({ data }) => {
   const { cset_id: companyId, name: companyName } = data.companiesJson;
@@ -36,9 +37,6 @@ export const query = graphql`
 
 export const Head = ({ pageContext }) => {
   return (
-    <>
-      <html lang="en" />
-      <title>{pageContext.name} &ndash; PARAT &ndash; Emerging Technology Observatory</title>
-    </>
+    <MetaTagsWrapper subtitle={pageContext.name} />
   );
 };
diff --git a/web/gui-v2/src/pages/index.js b/web/gui-v2/src/pages/index.js
@@ -9,6 +9,7 @@ import {
 } from '@eto/eto-ui-components';
 
 import ListView from '../components/ListView';
+import MetaTagsWrapper from '../components/MetaTagsWrapper';
 import ParatUsageDisclaimer from '../components/ParatUsageDisclaimer';
 
 const styles = {
@@ -65,9 +66,6 @@ export default IndexPage;
 
 export const Head = () => {
   return (
-    <>
-      <html lang="en" />
-      <title>PARAT &ndash; Emerging Technology Observatory</title>
-    </>
+    <MetaTagsWrapper />
   );
 };