FI-2622: Update meta tags for link unfurling (#553)

* add meta description * add custom meta tags * add twitter meta tags * update description tag * move tags to wrapper * move meta tags to separate component for consistency
inferno-framework · Nov 29, 2024 · 9d0288e · 9d0288e
1 parent e2773e9
commit 9d0288e
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 38 deletions.
diff --git a/client/src/components/LandingPage/LandingPage.tsx b/client/src/components/LandingPage/LandingPage.tsx
@@ -12,6 +12,7 @@ import { postTestSessions } from '~/api/TestSessionApi';
 import { getStaticPath } from '~/api/infernoApiService';
 import { useAppStore } from '~/store/app';
 import infernoLogo from '~/images/inferno_logo.png';
+import MetaTags from '~/components/_common/MetaTags';
 import SelectionPanel from '~/components/_common/SelectionPanel/SelectionPanel';
 import lightTheme from '~/styles/theme';
 import useStyles from './styles';
@@ -73,6 +74,10 @@ const LandingPage: FC<LandingPageProps> = ({ testSuites }) => {
             }
       }
     >
+      <MetaTags
+        title="Inferno Test Session"
+        description="Test your server's conformance to authentication, authorization, and FHIR content standards."
+      />
       <Box
         display="flex"
         flexDirection="column"

diff --git a/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx b/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
@@ -1,22 +1,23 @@
 import React, { FC, useEffect, useRef } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Typography, Box, Container } from '@mui/material';
 import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import { useSnackbar } from 'notistack';
+import { Typography, Box, Container } from '@mui/material';
+import { basePath } from '~/api/infernoApiService';
 import { postTestSessions } from '~/api/TestSessionApi';
 import { TestSuite, TestSession, SuiteOption } from '~/models/testSuiteModels';
 import {
   ListOptionSelection,
   RadioOptionSelection,
   isRadioOptionSelection,
 } from '~/models/selectionModels';
+import MetaTags from '~/components/_common/MetaTags';
+import SelectionPanel from '~/components/_common/SelectionPanel/SelectionPanel';
+import SelectionSkeleton from '~/components/Skeletons/SelectionSkeletion';
 import { useAppStore } from '~/store/app';
 import lightTheme from '~/styles/theme';
-import SelectionPanel from '~/components/_common/SelectionPanel/SelectionPanel';
 import useStyles from './styles';
-import { basePath } from '~/api/infernoApiService';
-import remarkGfm from 'remark-gfm';
-import SelectionSkeleton from '~/components/Skeletons/SelectionSkeletion';
 
 export interface SuiteOptionsPageProps {
   testSuite?: TestSuite;
@@ -127,6 +128,12 @@ const SuiteOptionsPage: FC<SuiteOptionsPageProps> = ({ testSuite }) => {
             }
       }
     >
+      <MetaTags
+        title={testSuite?.title.toUpperCase() || 'Suite Options'}
+        description={
+          testSuite?.short_description || `Select options for the ${testSuite?.title} Test Suite`
+        }
+      />
       <Box
         display="flex"
         flexDirection="column"

diff --git a/client/src/components/TestSuite/TestSession.tsx b/client/src/components/TestSuite/TestSession.tsx
@@ -319,20 +319,18 @@ const TestSessionComponent: FC<TestSessionComponentProps> = ({
     );
   };
 
-  const renderDrawerContents = () => {
-    return (
-      <nav className={classes.drawer}>
-        <TestSuiteTreeComponent
-          testSuite={testSession.test_suite}
-          selectedRunnable={selectedRunnable}
-          view={view || 'run'}
-          presets={testSession.test_suite.presets}
-          getSessionData={getSessionData}
-          testSessionId={testSession.id}
-        />
-      </nav>
-    );
-  };
+  const renderDrawerContents = () => (
+    <nav className={classes.drawer}>
+      <TestSuiteTreeComponent
+        testSuite={testSession.test_suite}
+        selectedRunnable={selectedRunnable}
+        view={view || 'run'}
+        presets={testSession.test_suite.presets}
+        getSessionData={getSessionData}
+        testSessionId={testSession.id}
+      />
+    </nav>
+  );
 
   const renderView = (view: ViewType) => {
     const runnable = runnableMap.get(selectedRunnable);

diff --git a/client/src/components/TestSuite/TestSessionWrapper.tsx b/client/src/components/TestSuite/TestSessionWrapper.tsx
@@ -1,6 +1,14 @@
 import React, { FC, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
+import { useSnackbar } from 'notistack';
 import { Alert, Box, Fade } from '@mui/material';
+import {
+  getCurrentTestSessionResults,
+  getLastTestRun,
+  getTestSession,
+  getTestSessionData,
+} from '~/api/TestSessionApi';
+import { getCoreVersion } from '~/api/VersionsApi';
 import {
   Result,
   SuiteOption,
@@ -10,20 +18,13 @@ import {
   TestSession,
   TestSuite,
 } from '~/models/testSuiteModels';
+import MetaTags from '~/components/_common/MetaTags';
 import AppSkeleton from '~/components/Skeletons/AppSkeleton';
 import Footer from '~/components/Footer';
 import FooterSkeleton from '~/components/Skeletons/FooterSkeleton';
 import Header from '~/components/Header';
 import HeaderSkeleton from '~/components/Skeletons/HeaderSkeleton';
 import TestSessionComponent from '~/components/TestSuite/TestSession';
-import {
-  getCurrentTestSessionResults,
-  getLastTestRun,
-  getTestSession,
-  getTestSessionData,
-} from '~/api/TestSessionApi';
-import { getCoreVersion } from '~/api/VersionsApi';
-import { useSnackbar } from 'notistack';
 import { useAppStore } from '~/store/app';
 
 const TestSessionWrapper: FC<unknown> = () => {
@@ -120,13 +121,16 @@ const TestSessionWrapper: FC<unknown> = () => {
     setDrawerOpen(newDrawerOpen);
   };
 
-  /*
-   * Set the page title when testSession data is loaded
-   */
-  const setTitle = (session: TestSession) => {
+  /* Meta tags for link unfurling */
+  const renderMetaTags = (session: TestSession) => {
+    // Set the page title when testSession data is loaded
     const suiteName = session?.test_suite.short_title || session?.test_suite.title;
     const titlePrepend = suiteName ? `${suiteName} ` : '';
-    document.title = `${titlePrepend}Test Session`;
+    const title = `${titlePrepend}Test Session`;
+    document.title = title;
+    const description =
+      session.test_suite.short_description || session.test_suite.description || '';
+    return <MetaTags title={title} description={description} />;
   };
 
   if (testSession && testResults && sessionData) {
@@ -148,11 +152,10 @@ const TestSessionWrapper: FC<unknown> = () => {
           .filter((v) => v) // Remove empty values
       : [];
 
-    setTitle(testSession);
-
     return (
       <Fade in={true}>
         <Box display="flex" flexDirection="column" flexGrow="1" height="100%">
+          {renderMetaTags(testSession)}
           <Header
             suiteId={testSession.test_suite.id}
             suiteTitle={testSession.test_suite.title}

diff --git a/client/src/components/_common/MetaTags.tsx b/client/src/components/_common/MetaTags.tsx
@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+
+export interface MetaTagsProps {
+  title: string;
+  description: string;
+}
+
+/* Meta tags for link unfurling */
+const MetaTags: FC<MetaTagsProps> = ({ title, description }) => {
+  // These tags are dynamic -- static tags are located in index.html.erb
+  return (
+    <>
+      <title>{title}</title>
+      <link rel="canonical" href={window.location.href} />
+      <meta name="description" content={description} />
+      <meta name="og:title" content={title} />
+      <meta name="og:description" content={description} />
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={description} />
+    </>
+  );
+};
+
+export default MetaTags;
diff --git a/dev_suites/dev_demo_ig_stu1/demo_suite.rb b/dev_suites/dev_demo_ig_stu1/demo_suite.rb
@@ -6,6 +6,7 @@ module DemoIG_STU1 # rubocop:disable Naming/ClassAndModuleCamelCase
   class DemoSuite < Inferno::TestSuite
     title 'Demonstration Suite'
     id 'demo'
+    short_description 'Development suite for testing standard inputs and results'
     source_code_url 'https://github.com/inferno-framework/inferno-core'
     report_issue_url 'https://github.com/inferno-framework/inferno-core/issues'
     download_url 'https://github.com/inferno-framework/inferno-core/releases'

diff --git a/lib/inferno/apps/web/index.html.erb b/lib/inferno/apps/web/index.html.erb
@@ -9,10 +9,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta id="base-path" name="base-path" content="<%= Inferno::Application['base_path'] %>">
-    <meta
-      name="description"
-      content="FHIR Testing"
-    />
+
+    <!-- Social media link unfurling meta tags -->
+    <title>Inferno Test Session</title>
+    <link rel="canonical" href="<%= Inferno::Application['base_url'] %>" />
+    <meta name="application-name" content="Inferno" />
+    <meta name="og:image" content="<%= Inferno::Application['inferno_host'] %><%= Inferno::Application['public_path'] %>/logo192.png" />
+    <meta name="og:type" content="website" />
+    <meta name="og:url" content="<%= Inferno::Application['base_url'] %>" />
+    <meta name="og:site_name" content="Inferno" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:image" content="<%= Inferno::Application['inferno_host'] %><%= Inferno::Application['public_path'] %>/logo192.png" />
+
     <link rel="apple-touch-icon" href="<%= Inferno::Application['public_path'] %>/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a