Add one hosted script to your site and let Mosaicora publish matching Open Graph and Twitter image tags from each page's canonical URL. It is the quickest setup when you can edit the document head.
Expected outcome
Each browser page receives a stable Mosaicora image URL based on its canonical address, with the full query string preserved and sorted for predictable results.
The integration connects content your application already knows about to the metadata a social crawler can read.
Choose another path
Choose a server-rendered integration when social crawlers must receive image tags in the initial HTML response.
Use the Next.js integrationUse the public identifier for the site configuration that should create the images.
Open the site overview in Mosaicora and copy the site ID. This value identifies your public image configuration and is safe to include in website markup.
Example site ID
321cac22d2103fb1660c50bdExpected result
Load the hosted helper and initialize it with one data attribute.
Add the script to the document head or your platform's site-wide custom code area. The data-og-site-id attribute starts the integration automatically when the script loads.
Add the snippet once. Repeated initialization is safe, but one site-wide script keeps the setup easier to maintain.
Automatic setup
<script
src="https://static.mosaicora.io/js/og-image.min.js"
data-og-site-id="321cac22d2103fb1660c50bd"
></script>Expected result
Let the helper use the canonical URL, or fall back to the current browser address.
The helper reads a valid link rel="canonical" value first. When the canonical link is missing or invalid, it uses window.location.href.
Every query parameter is retained and sorted by key and value. Hash fragments are ignored, duplicate slashes are normalized, and the .jpg suffix appears before the query string.
Optional canonical URL
<link
rel="canonical"
href="https://example.com/products/view?sku=123&campaign=launch"
/>Generated image URL
https://cdn.mosaicora.io/s/321cac22d2103fb1660c50bd/products/view.jpg?campaign=launch&sku=123Load the helper once and start it from your own browser code.
Automatic initialization is the recommended setup. If your tag manager or application controls script timing, omit the data attribute and call the public initializer after the helper loads.
Manual setup
<script src="https://static.mosaicora.io/js/og-image.min.js"></script>
<script>
window.MosaicoraOgImage.init({
siteId: "321cac22d2103fb1660c50bd",
});
</script>Expected result
Confirm the injected tags, then check whether your target crawler can read them.
Open a public page, inspect the live browser DOM, and confirm that og:image and twitter:image point to the expected cdn.mosaicora.io URL.
Then inspect the initial page source or use the Open Graph Checker. Many social crawlers do not execute client-side JavaScript, so browser-injected tags may not appear to those services.
Expected result
Reference
The hosted helper keeps page-to-image mapping stable and repeatable.
Choose the metadata delivery method that matches the services sharing your pages.
Help
Confirm the script request succeeds, data-og-site-id contains a valid site ID, and the snippet is placed in executable page markup rather than a field that escapes HTML.
Inspect the page's canonical link. Remove or correct an outdated canonical URL so the helper can use the intended public page identity.
The service may not execute JavaScript. Use the Next.js integration or framework-agnostic npm package so the image tags are present in the initial HTML.
Publish the image metadata in the initial App Router HTML.
Build server-rendered metadata in other Node.js applications.
Inspect the metadata and social image published by a public page.
Compare the available Mosaicora integration paths.
Open the dashboard to start with the current integrations, or contact us if you need a different workflow.