Mosaicora LogoMosaicora

Embed Mosaicora share images

For developers: add Mosaicora share image tags to a website so social platforms can find the right image.

Follow the steps below to complete this workflow from start to finish.

Next recommended

Go to get started
Back to tutorialsAdvanced Configuration

Overview

A quick summary before you begin.

Goal
Choose the helper script or manual tags and confirm the page points to the correct image.
Time
5 to 10 minutes
Prerequisites
A site ID and access to the website code that controls page metadata.

Steps

  1. 1

    Open the website template or layout that controls social sharing tags.

  2. 2

    Decide whether Mosaicora should add the tags automatically or whether you want to paste the tags yourself.

  3. 3

    If Mosaicora should manage the tags, add the script and initialize it with your site ID.

  4. 4

    If your site manages tags directly, paste the generated image tags into the page metadata.

  5. 5

    Check the final page output and confirm the social image tags point to the Mosaicora image.

Script include

Load the browser helper before you initialize the share image flow.

<script src="https://static.mosaicora.io/js/og-image.min.js"></script>

Initializer

Use this when you want Mosaicora to inject the final image tags automatically.

<script>
  window.MosaicoraOgImage.init({
    siteId: "ABC123",
  });
</script>

Manual OG tags

Paste this into your page head when you want to manage the metadata yourself.

<head>
  <meta property="og:image" content="https://cdn.mosaicora.io/s/ABC123/product/products/view.jpg?page=2&sku=123" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:type" content="image/jpeg" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content="https://cdn.mosaicora.io/s/ABC123/product/products/view.jpg?page=2&sku=123" />
</head>

Generated head tags

This is the kind of output you should see once the helper is active.

<meta property="og:image" content="https://cdn.mosaicora.io/s/ABC123/product/products/view.jpg?page=2&sku=123" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta name="twitter:image" content="https://cdn.mosaicora.io/s/ABC123/product/products/view.jpg?page=2&sku=123" />
Head preview with the share image script, generated tags, and final image URL visible.