React
Get started with integrating Mosaic into your React project.
Step 1
In React 19+, you can render meta tags directly:
function BlogPost({ post }) {
return (
<article>
<title>{post.title}</title>
<meta property="og:title" content={post.title} />
<meta property="og:image" content={`https://mosaicimg.com/use?url=yourwebsite.com/${post.slug}`} />
<meta property="og:type" content="article" />
<h1>{post.title}</h1>
{/* Rest of your content */}
</article>
)
}
Step 2
For older React versions, use React Helmet:
import { Helmet } from 'react-helmet-async'
export default function Page() {
return (
<>
<Helmet>
<meta property="og:image" content="https://mosaicimg.com/use?url=yourwebsite.com/your_slug" />
<meta property="og:type" content="website" />
</Helmet>
<h1>Your Page Content</h1>
</>
)
}