Merge pull request #305 from AllenInstitute/feature/enrich-bff-links

Add more meta info
AllenInstitute · Oct 24, 2024 · 1bdc82a · 1bdc82a
2 parents ab60277 + 5a5b3b3
commit 1bdc82a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git a/packages/web/assets/bff-logo.png b/packages/web/assets/bff-logo.png
diff --git a/packages/web/src/index.tsx b/packages/web/src/index.tsx
@@ -16,6 +16,7 @@ import Learn from "./components/Learn";
 import Home from "./components/Home";
 import Layout from "./components/Layout";
 import OpenSourceDatasets from "./components/OpenSourceDatasets";
+import BFFLogo from "../assets/bff-logo.png";
 import FmsFileExplorer from "../../core/App";
 import { createReduxStore } from "../../core/state";
 
@@ -72,6 +73,13 @@ async function asyncRender() {
         </Provider>,
         document.getElementById(APP_ID)
     );
+
+    try {
+        (document.getElementById("og-image") as any).content = BFFLogo;
+        (document.getElementById("tw-image") as any).content = BFFLogo;
+    } catch (err) {
+        console.error("Failed to set <head /> meta tags", err);
+    }
 }
 
 asyncRender();
diff --git a/packages/web/webpack/index.html b/packages/web/webpack/index.html
@@ -5,10 +5,24 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>BioFile Finder</title>
+
     <meta name="description" content="Open-use web application created for easy access, collaboration, and sharing of datasets through rich metadata search, filter, sort, and direct viewing.">
     <meta name="author" content="Allen Institute for Cell Science">
     <link rel="icon" type="image/x-icon"href="logo.ico" />
 
+    <!-- Necessary for BFF link to be unfurled into rich context info -->
+    <meta property="og:title" content="BioFile Finder" />
+    <meta property="og:description" content="Open-use web application created for easy access, collaboration, and sharing of datasets through rich metadata search, filter, sort, and direct viewing." />
+    <!-- Dynamically entered in src/components/index.tsx -->
+    <meta id="og-image" property="og:image" content="" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://biofile-finder.allencell.org" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="BioFile Finder" />
+    <meta name="twitter:description" content="Open-use web application created for easy access, collaboration, and sharing of datasets through rich metadata search, filter, sort, and direct viewing." />
+    <!-- Dynamically entered in src/components/index.tsx -->
+    <meta id="tw-image" name="twitter:image" content="" />
+
     <!-- Google Tag Manager -->
     <script>(function (w, d, s, l, i) {
             w[l] = w[l] || []; w[l].push({
@@ -25,6 +39,7 @@
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KCCN6L4X" height="0" width="0"
             style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
+
     <main id="biofile-finder"></main>
 </body>
 </html>