How to set Open Graph images for a Magento product page
Set the right og:image for Magento product pages. Learn how to choose the image, implement metadata for your storefront, and verify the rendered result.
To set the Open Graph image for a Magento product page, make sure its rendered HTML includes an <meta property="og:image" content="https://…"> tag whose value is the full, public URL of the product image you want shared. The implementation depends on your storefront: Adobe Commerce Storefront documents a metadata-table workflow, while a conventional Magento theme may need a theme or module customization, or a compatible extension. Magento’s Base product-image role is the main product-detail image, but Adobe does not promise that every theme automatically uses it as og:image.
1. Identify your storefront and current output
Before changing product data or code, inspect the actual product page. Open the product URL, view its page source, and search for og:image. Check whether the tag is absent, duplicated, or points to the wrong asset. Also note whether the page is rendered by Adobe Commerce Storefront, a conventional Magento theme, or a headless/custom storefront; the correct place to set metadata varies by architecture.
Use an absolute URL that a visitor can access without authentication. A relative path such as /media/catalog/product/example.jpg does not meet the documented Adobe Commerce Storefront requirement for a full URL. Confirm the URL uses the intended scheme and host and resolves to the desired image.
2. Choose the product image deliberately
Adobe Commerce assigns product images roles such as Base, Small Image, Thumbnail, and Swatch. Adobe describes Base as the main image on the product detail page. These roles affect storefront image usage, but the role documentation does not establish a universal mapping from Base to og:image. See Adobe’s product image and video documentation.
Check the product’s image assignments, ordering, visibility, and store-view scope. Role assignments and visibility can vary by store view, so the image shown on one storefront may differ from another. Choose which image should represent the product when shared, then verify that your metadata implementation selects that same image.
Theme image configuration is separate from Open Graph selection. Adobe documents image types, IDs, and properties in the theme’s etc/view.xml. Those settings can control image rendering and dimensions in storefront locations; they do not by themselves prove which source image a theme will emit in og:image. See Adobe’s theme properties guide.
3. Set og:image for your storefront
Adobe Commerce Storefront metadata table
For the documented Adobe Commerce Storefront workflow, add an og:image property to the metadata table and set its value to the full URL of the product or page image. The same metadata system supports properties such as og:type, og:title, and og:description. Confirm that this metadata table applies to the page document and product setup in your storefront; a customized data flow may need a different implementation. Refer to Adobe’s Page Metadata documentation.
Conventional Magento theme or custom storefront
If your rendered product page has no suitable og:image, add it where your storefront generates page metadata. Use the current product’s intended image and render its absolute public URL. The exact class, layout, template, or hook depends on the Magento version, theme, and installed modules; the research sources do not establish one universal code snippet or setting that works across conventional installations.
- Confirm the target product image and its store-view assignment.
- Find the existing page metadata generation point in your theme or module.
- Set one
og:imagevalue from the selected product image’s public URL. - Escape the URL for an HTML attribute and ensure the generated markup is valid.
- Render the product page and inspect its source to confirm the final value.
Do not assume changing view.xml alone changes the Open Graph tag. It configures theme image types and properties, not a documented universal Open Graph mapping.
Extension option
An extension may be useful when you want metadata generated from Magento product data without maintaining custom theme code. The Adobe Commerce Marketplace listing for Apptrian Open Graph Meta Tags says it generates Open Graph metadata from Magento data and uses the full-size primary product image for a product’s og:image. Treat that as the vendor listing’s claim, not a guarantee for every installation. Before installing, check supported Commerce versions, theme and headless compatibility, image-selection controls, and maintenance status.
4. Validate the rendered page and image URL
- Load the public product page and inspect the rendered document’s
<head>. - Confirm there is one intended
og:imagetag and its content is the full URL you selected. - Open the image URL directly in a private browser session to confirm it is publicly accessible and displays the expected asset.
- Check the relevant store view and repeat for other storefront hosts or locales where product images differ.
- If a crawler or sharing preview still shows another image, inspect the actual deployed page and image response, including CDN and cache behavior.
Adobe’s metadata documentation specifies a full URL for the documented Storefront property. The behavior of crawlers, social platforms, CDNs, and caches depends on your deployment; validate the live result rather than assuming a theme setting or local preview establishes what external fetchers receive.
5. Image configuration context
Magento image-role selection and image resizing are related but distinct. Adobe’s product image configuration documentation describes frontend resizing, placeholders, and upload settings. It suggests JPG quality of 80–90% for balancing file size and quality, and documents default maximum dimensions of 1920 by 1200 pixels. These are Adobe Commerce configuration recommendations, not universal Open Graph platform requirements. See Adobe’s product image configuration guide.
For themes, image IDs and properties are configured under <media><images module="Magento_Catalog">…</images></media> in <theme_dir>/etc/view.xml. Use this when adjusting how storefront image types are rendered, but separately verify the exact URL chosen for metadata.
6. Troubleshooting
| Symptom | Likely cause | What to check or fix |
|---|---|---|
No og:image appears |
The active storefront does not use the metadata mechanism you edited, or its theme/module does not emit the tag. | Inspect the live rendered page source and identify which theme, module, or storefront generates its head metadata. Add the tag at that layer. |
| The wrong product image appears | The metadata selector uses a different role or image than intended, or the product assignment differs by store view. | Check Base and other role assignments, ordering, visibility, and store-view values; then confirm the generated URL. |
| The tag contains a relative path | The implementation outputs a media path without the storefront’s public host. | Generate the full public URL for the correct storefront and verify it in rendered source. |
| The image URL fails when opened | The URL may be private, incorrect, unavailable through the deployed host, or affected by delivery configuration. | Test the exact URL without an authenticated session and inspect the response and CDN behavior. |
| Multiple og:image tags appear | A theme and extension, or multiple metadata customizations, may each emit a tag. | Find all generators and configure a single intended output, then inspect the deployed head again. |
| A theme image change has no effect on sharing metadata | view.xml configures storefront image types and dimensions; it is not a documented universal og:image switch. |
Update the metadata generation point separately and verify the rendered tag. |
| One store view works but another does not | Image role assignments or visibility may differ at store-view scope, or the storefront uses a different host. | Inspect product image configuration and the final absolute URL for each affected view. |
7. Performance, reliability, and cost
For Magento itself, image resizing and delivery settings affect asset size and storefront behavior; Adobe’s documented JPG quality and maximum dimensions are configuration guidance, not proof of a particular load-time or sharing result. Avoid introducing an image-processing step into page rendering unless your architecture requires it. A stable public image URL and a metadata value generated consistently from product data are easier to validate than a manually maintained URL that can drift.
Theme or module customizations require maintenance when the storefront implementation changes. An extension reduces the amount of custom metadata code you maintain, but adds a compatibility and update dependency. Check the extension’s current support against your Commerce version and storefront architecture before relying on it. No universal version compatibility matrix is established by the cited sources.
Or skip the browser setup
To inspect a product page’s rendered output without setting up browser automation, request a screenshot from ScreenshotNeo. It is a website screenshot API and MCP server for developers. The shot helps you review the rendered page visually; inspect the page source separately to verify the exact og:image metadata.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots, and 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000.
Sign up for 1,000 free screenshots a month, with no card required.
FAQ
Does setting Base guarantee it becomes og:image?
No. Adobe identifies Base as the main product-detail image role, but that does not establish a universal mapping to Open Graph metadata. Inspect your storefront’s rendered tag.
Can I use the product page URL as the image value?
No. The og:image value should point to the image itself using its full public URL.
Should I change view.xml to fix a missing og:image?
Not by itself. Theme image configuration controls image types and rendering properties; add or fix metadata through the storefront’s metadata generation path.
Will an extension work with a headless storefront?
Do not assume so. Verify its documented compatibility with your Commerce version and storefront architecture before installing.
