Mosaicora LogoMosaicora

Branded social previews for every Magento product and category

Turn the catalog data your team already maintains into page-specific Open Graph images, then keep the complete Magento setup guide close at hand.

Request a Magento preview auditView live demoStart the technical setup

See live Magento preview data

Inspect generated product and category metadata from the demo storefront.

Product previewSee product-specific title, price, availability, and generated image metadata.Category previewSee a catalog category publish its own social-preview context.

What this integration does

  • Connects a Magento store view to the Mosaicora site that should generate its social-preview images.
  • Uses the titles, descriptions, catalog data, and media your Magento team already maintains.
  • Lets you tailor page-level content sources without changing storefront templates.

Expected outcome

Your Magento store view is connected to the matching Mosaicora site and publishes one consistent set of social-preview metadata for every storefront page.

How the pieces connect

The integration connects content your application already knows about to the metadata a social crawler can read.

  1. Install the Magento module
  2. Connect the store view
  3. Choose page content
  4. Customize image generation
  5. Check the public preview

Use this integration when

  • Your storefront runs Magento 2, Mage-OS, or Adobe Commerce.
  • You want metadata managed through Magento configuration and content fields.
  • You use Luma, Hyvä, or a compatible storefront that renders Magento head blocks.

Choose another path

Explore another Mosaicora connection path when Magento is not the right storefront platform.

View all integrations

Before you begin

  • Magento 2, Mage-OS, or Adobe Commerce with Catalog, CMS, Store, Web API, and GraphQL modules enabled.
  • PHP 8.1 through 8.5 and command-line access to the Magento project root.
  • Composer credentials for repo.magento.com when the Magento dependency tree requires them.
  • A Mosaicora account with a site created for the storefront you are connecting.
  • The Magento website and store view that should use that Mosaicora site.
Package
mosaicora/module-opengraph
Platforms
Magento 2, Mage-OS, Adobe Commerce
Runtime
PHP 8.1-8.5
Themes
Luma and Hyvä compatible
1

Install and enable the module

Add the Composer package, register the module, and refresh Magento configuration.

Run every command from the Magento project root. Do not run composer install inside a mounted or symlinked module directory because a nested vendor tree can cause duplicate class loading.

Install and enable

composer require mosaicora/module-opengraph

bin/magento module:enable Mosaicora_OpenGraph
bin/magento setup:upgrade
bin/magento cache:flush config layout block_html eav full_page config_webservice

Production deployment

Run these when required by your normal production deployment process.

bin/magento setup:di:compile
bin/magento setup:static-content:deploy

Expected result

  • Mosaicora_OpenGraph is enabled.
  • setup:upgrade completes successfully.
  • Magento caches are refreshed.
2

Connect the intended store view

Enable Mosaicora for the selected Magento store view and paste its matching public Site ID.

Open the matching site in Mosaicora and copy its public Site ID from the Overview page. The ID identifies the image configuration Magento should use. It is not a secret credential.

In Magento Admin, select the correct website and store view, then open Stores > Configuration > Mosaicora > Open Graph. Under Mosaicora Image Generation, choose Yes for Enable Mosaicora, paste the Site ID, and save the configuration.

The focused Mosaicora configuration confirms the integration is ready, enables image generation for the store view, and connects the matching public Site ID.
Use the complete configuration view to review the connection and metadata defaults in the correct Magento store scope.

Expected result

  • The selected store view matches the customer-facing storefront.
  • Enable Mosaicora is set to Yes for that store view.
  • The pasted Site ID matches the Mosaicora site you configured.
  • The configuration has been saved.
3

Choose page-specific content

Choose the title, description, and image source that should represent each product, category, and CMS page.

Set dependable defaults under Content Defaults, then use individual Open Graph fields when a storefront page needs a deliberate social title, description, or image source.

Each page type can inherit the store-view configuration or select a source that better represents the content being shared. Use maintained Magento values so the preview stays useful as the catalog changes.

Category settings can inherit defaults or select dedicated title, description, and image sources.
Product settings support the same resolved-source workflow with page-level overrides.
CMS pages can use their own content fields and image source while staying connected to the store view.

Expected result

  • A product resolves a title, description, and image.
  • Category and CMS pages have suitable fallbacks.
  • The intended store view has a usable default image.
4

Map content into image hints

Map maintained Magento fields to semantic roles for more relevant generated social-preview images.

Advanced Mosaicora Image Hints map product attributes, category attributes, and CMS fields to semantic roles. When Mosaicora is enabled, the module publishes that structured JSON-LD context alongside the page.

Choose fields that genuinely describe the page. These mappings help Mosaicora generate more relevant social-preview images, but they do not promise an exact visual result.

Map semantic roles to Magento attributes and fields for product, category, and CMS image hints.
5

Customize the social-preview design

Use the OG Designer to control how connected Magento content appears in generated images.

Open the OG Designer, choose a preset, and fetch a public page from the connected store. The live preview shows how resolved page content can appear in the selected design.

Auto follows connected metadata, Custom lets you supply deliberate content, and CSS selectors retrieve content from specific elements on the connected page. CSS selectors are for content retrieval, not styling adjustments.

The OG Designer lets you select a preset and control how connected page content is used in a social-preview image.
Open OG DesignerChoose and customize a social-preview image design.
6

Publish and check the live preview

Save the configuration, refresh Magento caches, and inspect a public storefront URL before sharing it.

After saving configuration, flush the relevant Magento caches and inspect a public URL from the intended store view. Confirm the initial HTML contains one consistent set of social tags and that the image is publicly reachable.

Use the checker with a representative product, category, or CMS page. Confirm the title, description, image, dimensions, and canonical URL describe the page a visitor will reach.

Refresh relevant caches

bin/magento cache:flush config layout block_html full_page
Open demo shopExplore the public Magento storefront using the integration.Check a product previewOpen the checker with a representative product URL already filled in.

Expected result

  • The checker shows the intended title, description, image, and dimensions.
  • Category, product, CMS, and home pages resolve the intended images.
  • No competing social metadata keys remain.

Request a Magento preview audit

Send your public storefront URL after reviewing the setup. We will reply asynchronously with the clearest next steps and one setup proposal.

What you receive

  • Review of three representative storefront URLs
  • Specific metadata and social-preview issues to fix
  • One async Mosaicora setup proposal

We will use these details only to review the requested store and send one setup proposal. You will not be added to recurring marketing. Read the Privacy Policy.

Reference

Advanced usage

Magento configuration articles

Use the companion guides when you need installation details, local-image fallback guidance, duplicate-tag handling, or API metadata references.

Magento Open Graph module guideInstallation, local-image fallback, duplicate tags, and REST/GraphQL details.Magento social-preview best practicesStore-view configuration, image hints, and validation guidance.

REST and GraphQL metadata

Use the resolved storefront metadata through public APIs when a headless storefront or preview tool needs the same values.

  • GET /V1/mosaicora/opengraph/product/:sku
  • GET /V1/mosaicora/opengraph/category/:categoryId
  • GET /V1/mosaicora/opengraph/cms/:identifier
  • GET /V1/mosaicora/opengraph/home
  • ProductInterface.open_graph and CategoryInterface.open_graph
  • CmsPage.open_graph and StoreConfig.home_open_graph

Product GraphQL query

query ProductOpenGraph($sku: String!) {
  products(filter: { sku: { eq: $sku } }) {
    items {
      open_graph {
        enabled
        tags { name content }
      }
    }
  }
}

Default resolution and cache behavior

Understand where values and generated images come from when no explicit override exists.

  • Products fall back from meta_title to name and from meta_description to short_description or description.
  • Product images fall back from open_graph_image to image and small_image.
  • Categories and CMS pages use their metadata fields, content fields, and configured defaults.
  • Generated images are cached under pub/media/mosaicora/opengraph/cache.
  • Authorized administrators can clear generated Open Graph images from cache management.
  • Store-scoped ACL resources protect configuration and image-cache management.

Live examples

Inspect working category and product metadata on the Mosaicora Magento demo.

Check a category previewCategory metadata with a generated social image.Check a product previewProduct metadata with price and availability.Check another product previewA second product using the default resolution workflow.

Help

Troubleshooting

No Open Graph tags appear

Confirm Mosaicora_OpenGraph is enabled, select the correct store scope, enable Open Graph Tags, and flush config, layout, block, and full-page caches.

The wrong image or text is selected

Review the page-specific Open Graph fields, configured content source attributes, and fallback order for that product, category, or CMS page.

Generated images stay stale

Clear generated Open Graph images through Magento cache management, then flush full-page cache. The cache key also changes when the local source file modification time changes.

Metadata appears twice

Disable social metadata in the competing theme or extension. If that is impossible, enable Remove Competing Social Tags for the affected store view.

Continue learning

Magento Open Graph module guide

Read the full module installation and compatibility reference.

Magento social-preview best practices

Learn more about store views, image hints, and validation.

Open Graph Checker

Inspect the metadata and social image published by a public page.

All integrations

Compare the available Mosaicora integration paths.

Need help with another publishing workflow?

Open the dashboard to start with the current integrations, or contact us if you need a different workflow.

Start for freeCompare plans