In React 19+, 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>
  );
}

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>
    </>
  );
}