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. This is useful when store views have different site names, languages, default images, catalog attributes, or creative requirements. Start with a dependable baseline, then reserve page-level overrides for campaigns and genuinely exceptional pages.

A storefront product image and a share image often have different jobs. The module adds an Open Graph Image role to Magento product images. Upload an image to that role when a campaign or seasonal share card needs its own visual, without replacing the catalog image shoppers see. Categories and CMS pages can also use their own uploaded Open Graph image. When no dedicated image is set, the module follows practical Magento fallbacks.

A sharp product image is not always already sized for a social card. Image optimization is enabled by default and turns local Magento media into cached share images at 1200 by 630, the widely used Open Graph card ratio. You can control the width, height, resize mode, and background color. External image URLs are intentionally left unchanged.

• 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.