Get Started

This guide walks through the first successful setup from start to finish so your site, brand, design, and preview are ready together.

If your team has already completed part of the setup, jump to the section that matches the next item you want to finish.

Before you begin

• •

  Confirm that you can sign in to your Mosaicora workspace.

• •

  Have the website address ready, for example https://www.example.com.

• •

  Prepare your logo, brand colors, and any wording you already know should appear in the preview.

• •

  Choose the first page type you want to support, such as a homepage, product page, article, category page, or non-home page.

Sign in and confirm account access

1. 1

   Sign in with the account that will manage the workspace.

2. 2

   Check that the sidebar shows the main areas: Sites, Templates, Branding, and OG Designer.

3. 3

   Open your account area if you want to confirm profile, plan, security, or usage details before setup.

Add your site

Start with the website Mosaicora should manage.

1. 1

   Open Sites and choose Add Site.

2. 2

   Enter a clear site name and the website address, such as https://www.example.com.

3. 3

   Use the same website address visitors normally use.

4. 4

   Save the site and wait for the confirmation message.

5. 5

   Open the new site so you can continue with brand and image setup.

Connect branding assets

Add the visual details that should stay consistent in your share images.

1. 1

   Open Branding for the workspace or site.

2. 2

   Upload or confirm the logo that should appear in images.

3. 3

   Set the main colors and any supporting colors.

4. 4

   Review the preview to make sure the logo and colors look clear together.

5. 5

   Save the brand settings so they are available when you design images.

Create your first share image

Use OG Designer to create the image your site will use first when a link is shared.

1. 1

   Open OG Designer from the site or template flow.

2. 2

   Start from a preset that is close to the layout you want.

3. 3

   Adjust the text, image, colors, and layout while reviewing the live preview.

4. 4

   Save the result as the default share image for the site.

Choose images for different page types

A page type is a group of similar pages, such as products, articles, categories, or non-home pages. Use page types when those pages need a different share image than the site default.

1. 1

   Open the Page Types tab on the site.

2. 2

   Choose the page type or rule you want to adjust.

3. 3

   Select the alternate share image or template that should be used for those pages.

4. 4

   For example, blog pages can use an article-style image while a non-home rule covers the rest of the site and the homepage keeps the default image.

5. 5

   Save the change and confirm the mapping appears in the list.

Preview the result

Confirm that the default image and any page-type images look right before you rely on them.

Some platforms keep an older link preview for a while. If you update the image but Slack, LinkedIn, or X still shows the old version, the platform may need time to refresh its saved preview.

1. 1

   Open the preview for the site, page type, or template you just configured.

2. 2

   Check the title, image, logo, colors, and layout.

3. 3

   Compare the preview with the page it represents so the image feels accurate and trustworthy.

4. 4

   Make any final adjustments before you consider the setup ready for sharing.

<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" />

<script src="https://static.mosaicora.io/js/og-image.min.js"></script>
<script>
  window.MosaicoraOgImage.init({
    siteId: "ABC123",
  });
</script>

Confirm the integration is ready

Use a quick checklist to make sure the site is ready for ongoing use.

• •

  The site appears in your Sites list.

• •

  The default share image looks correct in preview.

• •

  Your logo and colors appear as expected.

• •

  Any page types that need a different image point to the right template.

• •

  The preview matches the page closely enough to share confidently.

What to do next

• •

  Open OG Designer when you want to edit the site’s main share image.

• •

  Open OG Designer Advanced when you need different images for different page types.

• •

  Return to Tutorials when you want a shorter task-focused walkthrough.

• •

  Open Advanced Configuration when a developer needs to lock exact image values.

• •

  Review the Changelog when you want to understand what has changed recently.

• •

  Revisit Introduction if you want a quick refresher on the workspace.