How to Fix Magento Social Media Previews with Open Graph Images

A share preview should describe the page a shopper will reach, not a generic storefront. The module adds Open Graph metadata during layout generation for product pages, category pages, CMS pages, and the home page. That gives marketing and development teams one place to control the social contract across the page types that customers most often share.

• Product pages resolve metadata from the active product.
• Category pages resolve metadata from the active category.
• CMS pages resolve metadata from the page rendered by Magento.
• The home page uses the active CMS home page when one exists, then falls back to the configured site name and default image.

The package supports Magento 2, Mage-OS, and Adobe Commerce storefronts running PHP 8.1 through 8.5. Install it from the Magento project root, then run your usual upgrade and cache process. Keep Composer dependencies at the project level rather than creating a nested vendor directory inside a mounted module.

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

Configuration lives under Stores, Configuration, Mosaicora, Open Graph. Where Magento allows it, settings are store-scoped, so each store view can select its own site name, social-card behavior, and content fields. Set the Open Graph basics first, then choose the product, category, and CMS title and description sources that match the attributes your team maintains.

Mosaicora image generation is optional. When it is enabled for a store view, the module replaces og:image and twitter:image with a Mosaicora CDN preview generated from page context. Add the public Site ID for the matching Mosaicora site, then use the advanced mappings to pass the product, category, and CMS values that should inform the generated image. When it is disabled, the module keeps the local Magento image workflow.

When Mosaicora image generation is off, the module resolves the configured product image source and then follows its normal fallback list. The Open Graph Image product-media role remains a share-only option for local workflows. Local Magento media can be transformed into cached 1200 by 630 share images, while external image URLs are intentionally emitted unchanged.

• Set a default image that still represents the brand when a page does not resolve a more specific local image.
• Use the default 1200 by 630 output when one landscape format fits the campaign and platform mix.
• Review the resize mode and background color against transparent-packshot and portrait product imagery.
• Expect only normalized local Magento media paths to be transformed and cached.
• Use the admin cache action after a deliberate image correction when generated Open Graph images need to be cleared.

A Magento theme or another extension may already write Open Graph or Twitter Card tags. The cleanest setup is to disable the other output so each metadata key has one owner. If that is not possible, the module can remove competing Open Graph, product, and enabled Twitter Card tags for keys it generates. The setting is off by default to preserve compatibility.

The module exposes the same normalized metadata through anonymous, read-only REST endpoints for product, category, CMS, and home pages. Its GraphQL fields appear on Magento's native storefront types, including ProductInterface, CategoryInterface, CmsPage, and StoreConfig. Both surfaces return the resolved tag list, so a headless storefront, mobile application, or other custom frontend can use the same metadata as the Magento storefront.

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

This workflow keeps the technical metadata and the marketing message aligned. Developers get a predictable resolution path and inspectable output. Marketers get accurate, page-specific previews without needing a separate set of storefront templates for every campaign.