← Help

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.