Astro
Get started with integrating Mosaic into your Astro project.
Step 1
In your Astro page, you can add the OG image URL:
---
const title = "Your Page Title";
const description = "Your page description";
const image = "https://mosaicimg.com/use?url=yourwebsite.com/your_slug";
---
<p>your page content</p>
Step 2
Add you can reference the image URL in your Layout file:
---
const { image } = Astro.props;
---
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="${image}" />
</head>
</html>
Step 3
Remember to replace the placeholder value (like 'yourwebsite.com' and 'your_slug') with your actual website URL and slug.