0

I notice the default code for the image open graph protocol generates the smallest image available.

<meta property="og:image" content="<?= $block->escapeUrl($block->getImage($block->getProduct(), 'product_base_image')->getImageUrl()) ?>" />

How do I get the image that's shown on the product page (which is actually over 1000px)?

I am trying to upload products to a Facebook catalogue via pixel (it uses Open Graph data). And I can only presume this is the reason why it's not working correctly.

  • did u try to add these parameters, <meta property="og:image:width" content="200" /> <meta property="og:image:height" content="200" /> – Kavitha mano Jan 2 at 9:20
3
+25

If you are using a custom theme, you can override Magento_Catalog::product/view/opengraph/general.phtml by the following steps:

  1. Create the a template file like bellow struct:

app/design/frontend/YourTheme/themename/Magento_Catalog/templates/product/view/opengraph/general.phtml

  1. Change this:

<meta property="og:image" content="<?php echo $block->escapeUrl($block->getImage($block->getProduct(), 'product_base_image')->getImageUrl()); ?>" />

to

<meta property="og:image" content="<?php echo $block->escapeUrl($block->getImage($block->getProduct(), 'product_page_image_large')->getImageUrl()); ?>" />

Now, your open graph protocol image will be changed to the large image. I tried this and it worked fine for me

  • Not working for me in 2.2.6 Lee. Gives me the exact same result as the original piece of code... – YorkieMagento Jan 3 at 16:43
  • It works for me on 2.2.6. Before: imgur.com/a/qplfMpg After: imgur.com/a/4WHidAi . Please make sure you cleaned block_html cache and your custom theme is activating – bachlee89 Jan 4 at 0:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.