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.

1
  • did u try to add these parameters, <meta property="og:image:width" content="200" /> <meta property="og:image:height" content="200" /> Commented Jan 2, 2019 at 9:20

1 Answer 1

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

2
  • Not working for me in 2.2.6 Lee. Gives me the exact same result as the original piece of code... Commented Jan 3, 2019 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
    Commented Jan 4, 2019 at 0:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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