Hi, my site has a list of posts with url /post?id=<id>. The posts are stored on a backend outside hubspot. I need to add meta tags with relevant information about the post based on the ID. I am using https://github.hubspot.com/cms-react/ and everything works fine except one thing. When I use getServerSideProps to get the post data and useInlineHeadAsset() to add a meta tag, the meta tag is added in the form of
<script nonce=‘hs-random-nonce’>
document.head.innerHTML += `<meta property=‘og:image’ content=‘url’/>;`;
</script>
My code looks like this.
export const getServerSideProps = withUrlAndQuery(async (props, url) => {
const id = url.url.searchParams.get('id');
const post = await fetch(...);
return {
serverSideProps: {
img: post.img
},
caching: {
cacheControl: {
maxAge: 60
}
}
}
});
export const Component = ({ serverSideProps }) => {
const img = serverSideProps.img;
useInlineHeadAsset(() => {
return <>
<meta property="og:image" content={img} />
</>
});
I was testing and noticed that the meta tag is added to the head if I don’t use getServerSideProps, but in that case I can’t get the post data.
Is there any solution to this problem or is there any other way to dynamically add meta tag?
