Hello!
I am have a React + Plasmic codebase, and i have to setup some OG description for each .jsx file corresponding to a Plasmic studio page. The issue I am facing now is that no matter what I do, the og setup that I have written in the .jsx file does not show up. For example, I have this .jsx file with this og setup:
// This is a skeleton starter React component generated by Plasmic.
// This file is owned by you, feel free to edit as you see fit.
import * as React from “react”;
import { PlasmicTheIndependent } from “./plasmic/o_21_p_partner_2_0_0_prod/PlasmicTheIndependent”;
import { Helmet } from “react-helmet-async”;
function TheIndependent_(props, ref) {
return (
<>
<Helmet>
<title>the independent.</title>
<meta name="og:title" content="the independent." />
<meta name="og:description" content="Human-scale digital infrastructure." />
<meta name="og:url" content=" https://partner.o21p.com/the-independent " />
<link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon2.ico" />
<link
rel="shortcut icon"
href="%PUBLIC_URL%/favicon2.ico"
type="image/x-icon"
/>
<link
rel="apple-touch-icon"
href="%PUBLIC_URL%/apple-touch-icon.png"
/>
<link
rel="apple-touch-icon"
sizes="57x57"
href="%PUBLIC_URL%/apple-touch-icon-57x57.png"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="%PUBLIC_URL%/apple-touch-icon-72x72.png"
/>
<link
rel="apple-touch-icon"
sizes="76x76"
href="%PUBLIC_URL%/apple-touch-icon-76x76.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="%PUBLIC_URL%/apple-touch-icon-114x114.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="%PUBLIC_URL%/apple-touch-icon-120x120.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="%PUBLIC_URL%/apple-touch-icon-144x144.png"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="%PUBLIC_URL%/apple-touch-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="%PUBLIC_URL%/apple-touch-icon-180x180.png"
/>
</Helmet>
<PlasmicTheIndependent root={{ ref }} {...props} />
</>
);
}
const TheIndependent = React.forwardRef(TheIndependent_);
export default TheIndependent;
Now, this setup is not effective in any way, meaning that the og description that it gets attached to the link connected to the .jsx component above is the same og description as it is in the public/index.html file.
I searched for solutions online and with GPT, but neither way gave me a viable solution.
Can you help me with a solution?
Thank You.