How can I add different meta open graphs for homepage and single product pages?
-
28-12-2020 - |
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??
La 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.
Autres conseils
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>