← Help
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>
    </>
  )
}