HTML
Get started with integrating Mosaic into your HTML project.
Step 1
In your HTML file, you can add the OG image URL:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
<!-- Basic SEO -->
<meta name="description" content="Your page description">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<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/your_slug">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your page description">
<meta name="twitter:image" content="https://mosaicimg.com/use?url=yourwebsite.com/your_slug">
</head>
<body>
<!-- Your content here -->
</body>
</html>
Step 2
For pages with dynamic slugs, create a template like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Post Title</title>
<!-- You can use server-side code to insert the slug -->
<!-- Example with PHP: -->
<?php
$slug = basename($_SERVER['REQUEST_URI']);
$ogImage = "https://mosaicimg.com/use?url=yourwebsite.com/${slug}";
?>
<meta property="og:image" content="<?php echo htmlspecialchars($ogImage); ?>">
<!-- Or if using JavaScript to set it dynamically: -->
<script>
const slug = window.location.pathname.split('/').pop();
const ogImage = `https://mosaicimg.com/use?url=yourwebsite.com/${slug}`;
// Update OG tags
document.querySelector('meta[property="og:image"]')
?.setAttribute('content', ogImage);
document.querySelector('meta[name="twitter:image"]')
?.setAttribute('content', ogImage);
</script>
<!-- Rest of your meta tags -->
</head>
<body>
<!-- Your content here -->
</body>
</html>
Step 3
Remember to replace the placeholder value (like 'yourwebsite.com' and 'your_slug') with your actual website URL and slug.