← Help
React
Get started with integrating Mosaic into your React project.

Step 1

Install React Helmet Async:

npm install react-helmet-async

Step 2

Wrap your component with HelmetProvider and add the OG tags:

import React from 'react'
import { Helmet, HelmetProvider } from 'react-helmet-async'

export default function Page() {
  return (
    <HelmetProvider>
      <Helmet>
        <meta property="og:title" content="Your Page Title" />
        <meta property="og:description" content="Your page description" />
        <meta property="og:image" content="https://mosaicimg.com/use?url=yourwebsite.com" />
        <meta property="og:type" content="website" />
      </Helmet>
      <h1>Your Page Content</h1>
      {/* Rest of your page content */}
    </HelmetProvider>
  )
}

Step 3

Remember to replace the placeholder values (like 'Your Page Title' and 'yourwebsite.com') with your actual page title and website URL.