diff --git a/frontend/src/components/Experiment/Experiment.jsx b/frontend/src/components/Experiment/Experiment.jsx index 9ad77729b..51a2df35e 100644 --- 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 index 94eb065ea..67c1e3656 100644 --- 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)} - ); }; diff --git a/frontend/src/util/stores.ts b/frontend/src/util/stores.ts index 3c78a3e47..98fb551de 100644 --- 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; } interface DocumentHeadSlice { @@ -24,6 +32,14 @@ const createDocumentHeadSlice: StateCreator = (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 } })),