refactor: Improve structured data setup

Amsterdam-Music-Lab · May 3, 2024 · 7382e66 · 7382e66
1 parent 1103707
commit 7382e66
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/frontend/src/components/Experiment/Experiment.jsx b/frontend/src/components/Experiment/Experiment.jsx
@@ -117,7 +117,10 @@ const Experiment = ({ match }) => {
                     title: experiment.name,
                     description: experiment.description,
                     image: `${API_ROOT}/${experiment.image}`,
-                    url: window.location.href
+                    url: window.location.href,
+                    structuredData: {
+                        "@type": "Experiment",
+                    },
                 });
 
                 // Set theme

diff --git a/frontend/src/components/Helmet/Helmet.tsx b/frontend/src/components/Helmet/Helmet.tsx
@@ -10,6 +10,9 @@ const Helmet = () => {
         "@type": "Organization",
         url: url,
         logo: image,
+        name: headData.title,
+        description: description,
+        ...headData.structuredData,
     };
 
     return (
@@ -35,7 +38,6 @@ const Helmet = () => {
                 {JSON.stringify(structuredData)}
             </script>
         </ReactHelmet>
-
     );
 };
 

diff --git a/frontend/src/util/stores.ts b/frontend/src/util/stores.ts
@@ -2,13 +2,21 @@ import { create, StateCreator } from "zustand";
 import * as Sentry from '@sentry/react';
 import { Participant } from "@/types/Participant";
 
-
+interface StructuredData {
+    "@context": string;
+    "@type": string;
+    url: string;
+    logo: string;
+    name: string;
+    description: string;
+}
 
 interface HeadData {
     title: string;
     description: string;
     image: string;
     url: string;
+    structuredData: Partial<StructuredData>;
 }
 
 interface DocumentHeadSlice {
@@ -24,6 +32,14 @@ const createDocumentHeadSlice: StateCreator<DocumentHeadSlice> = (set) => ({
         description: "",
         image: "",
         url: "",
+        structuredData: {
+            "@context": "http://schema.org",
+            "@type": "Organization",
+            url: import.meta.env.VITE_OG_URL ?? "",
+            logo: import.meta.env.VITE_OG_IMAGE ?? "",
+            name: import.meta.env.VITE_OG_TITLE ?? "",
+            description: import.meta.env.VITE_OG_DESCRIPTION ?? "",
+        }
     },
     setHeadData: (headData) => set(() => ({ headData })),
     patchHeadData: (headData) => set((state) => ({ headData: { ...state.headData, ...headData } })),