How can I add different meta open graphs for homepage and single product pages?

magento.stackexchange https://magento.stackexchange.com/questions/211020

Question

When I post the link of my site on facebook, the image added was 2 images, logo and other one. Facebook displayed the first ones. So I needed to add in default_head_block.xml file (app/design/frontend/Venustheme/kasitoo/Magento_Theme/layout)

the following code:

<meta property="og:type" content="website" />
<meta property="og:title" content="Sitename" />
<meta property="og:description" content="description site lorem ipsum" />
<meta property="og:url" content="http://sitename.ro/" />
<meta property="og:site_name" content="MyOrganic" />
<meta property="og:image" content="http://sitename/pub/media/facebook.jpg" />

The problem is that this overrides the meta open graphs from single product page. That are located in 

general.phtml in vendor/magento/module-catalog/view/frontend/templates/product/view/opengraph

<meta property="og:type" content="og:product" />
<meta property="og:title" content="<?php echo $block->escapeHtml($block->getProduct()->getName()); ?>" />
<meta property="og:image" content="<?php echo $block->escapeUrl($block->getImage($block->getProduct(), 'product_base_image')->getImageUrl()); ?>" />
<meta property="og:description" content="<?php echo $block->escapeHtml($block->getProduct()->getShortDescription()); ?>" />
<meta property="og:url" content="<?php echo $block->escapeUrl($block->getProduct()->getProductUrl()); ?>" />
<?php if ($priceAmount = $block->getProduct()->getFinalPrice()):?>
    <meta property="product:price:amount" content="<?php /* @escapeNotVerified */ echo $priceAmount; ?>"/>
    <?php echo $block->getChildHtml('meta.currency'); ?>
<?php endif;?>

Where should I add the metas for homepage, in order to work properly the metas for single product pages??

Was it helpful?

Solution

Meta tags can be added to a cms_index_index.xml layout file the same way as you added them to the default_head_block.xml file and they will then only apply on the homepage.

Example -

default_head_block.xml -

<head>
    <meta property="og:image" content="http://example.com/DEFAULTIMAGE.png" />
</head>

cms_index_index.xml -

<head>
    <meta property="og:image" content="http://example.com/HOMEPAGEIMAGE.png" />
</head>

Will result in the og:image property being DEFAULTIMAGE.png on every page without an image explicitly set, and HOMEPAGEIMAGE.png on the home page.

OTHER TIPS

OG Meta tags can be added to layout file of default_head_block.xml file and they will be apply on the All Pages.

<head>

    <meta name="og:title" content="Printing coop is a most famous Digital Printing certer"/>
    <meta name="og:description" content="Printing coop is a most famous Digital Printing certer in Montreal Canada.Professional Printer Services."/>

</head>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top