Re: Magento 2 Facebook Open Graph Extension

johnpeters946f · ‎07-13-2020

Magento 2 Facebook Open Graph extension allows you to configure OG tags for your website pages setting the OG title description and image.

With an interesting picture and intriguing title, the content you share drives attention to your website.

There is no need to spend thousands on social media ads when you can just post to your Facebook page and drive traffic to your website for free.

Features:

Default Open Graph Image & Description
Automatic Open Graph Tags based on SEO data (Meta Tags)
Individual OG Tags for Product Pages
Individual OG Tags for Category Pages
Individual OG Tags for CMS Pages, including Home Page
Individual OG Tags for Magefan Blog Categories & Posts

Function:

Magento 2 Facebook Open Graph extension allows you to easily configure OG Meta Tags for Facebook.

Benefits:

Static Flow of Customers from Social Media
Improved SEO
Increased Profit

Meetanshi · ‎12-21-2022

Have a look at our Magento 2 Social Meta Tags extension which not only allows adding open graph meta tags but also Twitter cards. Share extended information on social media platforms such as Facebook, Twitter Pinterest, Google Plus, Pinterest and optimize the apprearance of website pages on various social media platforms.

---
If you've found my answer useful, please give"Kudos" and "Accept as Solution"

makky30068ce9a

How to Create Dynamic OG Images in Blogger (and Apply the Concept in Magento)

When links are shared on social media, the preview display is heavily influenced by OG (Open Graph) metadata. By setting up dynamic OG images, you can:

Show your brand logo when the homepage is shared
Automatically display the main article/product image when a post or product is shared
Make previews more attractive and increase CTR from social media

👉 I wrote a full tutorial for Blogger here:
Cara Membuat OG Image Dinamis di Blogger

What About Magento?

The same concept can be applied to other platforms, including Magento:

Homepage: use the brand logo as the default OG image
Product pages: automatically use the product’s main image
Category/Blog pages: use the category banner or the article’s main image

Here’s a simple snippet in Magento 2 (via layout XML or a custom module) to add dynamic OG images:

<head>
    <!-- Default OG image (for homepage) -->
    <meta property="og:image" content="https://www.yourstore.com/pub/media/logo/stores/1/logo.png"/>

    <!-- OG image for product pages -->
    <referenceBlock name="head.additional">
        <block class="Magento\Framework\View\Element\Template" 
               name="product.og.image" 
               template="Magento_Catalog::product/og_image.phtml"/>
    </referenceBlock>
</head>

Then in the og_image.phtml file, you can add:

<?php if ($_product = $block->getProduct()): ?>
    <?php if ($_image = $block->helper('Magento\Catalog\Helper\Image')->init($_product, 'product_base_image')): ?>
        <meta property="og:image" content="<?= $_image->getUrl(); ?>" />
        <meta property="og:image:secure_url" content="<?= $_image->getUrl(); ?>" />
    <?php endif; ?>
<?php endif; ?>

With this setup:

The homepage will always show your logo as the OG image.
Products will automatically display their main image when shared.
Social media previews become more consistent and professional.

In my experience, using dynamic OG images is a small tweak that makes a big impact on branding & social SEO.
Has anyone here already implemented dynamic OG images in Magento? What results have you seen?