Magento + Mosaicora: Generate Better Social Previews

A shared product, category, or CMS page should make sense before someone visits it. The integration gives the Magento Open Graph module a Mosaicora Site ID to use for the selected store view, so a generated preview can reflect the resolved page context instead of relying on one generic image.

• Keep social-preview rules aligned with the Magento content your team already maintains.
• Use different Mosaicora sites and defaults when store views need distinct brand or campaign treatments.
• Retain page-level control when a category, product, or CMS page needs a deliberate title, description, or image source.
• Pass structured attributes as content hints so generated images can better reflect the entity being shared.

In Magento Admin, open Stores, Configuration, Mosaicora, Open Graph. Select the website and store view before saving settings. Under Mosaicora Image Generation, enable Mosaicora and paste the public Site ID from the matching Mosaicora site. The Site ID identifies the image configuration. It is not a secret credential.

The integration resolves page context from Magento, then lets you override it where a campaign or editorial page needs more control. Use the store-view defaults for a dependable baseline and the Open Graph fields on individual entities when their shared message should differ from the storefront’s standard metadata.

Advanced Mosaicora Image Hints map product attributes, category attributes, and CMS fields to semantic roles. When Mosaicora is enabled, the module uses those mappings to publish structured JSON-LD context alongside the page. Choose fields that genuinely describe the page, such as a product’s material or category, rather than adding values only for an image generator.

Once Magento is connected to a Mosaicora site, use the OG Designer to tailor the generated image without changing Magento templates. Start from a preset, load a public storefront page into the live preview, and review how the resolved page content appears in the selected design.

• Use Auto when a design should follow metadata from the connected Magento storefront.
• Use Custom to provide deliberate text or content for a specific design.
• Use CSS to define selectors that retrieve content from specific elements on the connected page.

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