Magento 2 Social Meta Tags

Magento 2 Social Meta Tags enables open graph tags, twitter cards for product pages, category pages as well as CMS pages.

Table of Content

Extract the zip folder and upload our extension to the root of your Magento 2 directory via FTP.
Login to your SSH and run below commands step by step:
- php bin/magento setup:upgrade
- For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
- For Magento version 2.2.x & above - php bin/magento setup:static content:deploy –f
- php bin/magento cache:flush
That’s it.

Configuration
To configure the extension, log in to Magento backend, move to Stores > Configuration > Social Meta Tags where you can find various settings to configure the extension.

Social Meta Tags: Enable or disable the Social Meta Tags extension from here.
Price for Bundled Products: Select the option to display no price, minimum or maximum price accordingly for the bundled products.
Product Image Fallback: Select the order of image fallback from the dropdown menu. This order is the priority for the image to fetch and display for product pages if not set individually. You can also set the custom option for custom image attributes.

Open Graph Settings
Open Graph Meta tags allow controlling how your webpage shows up when shared on Facebook.
- Open Graph: Enable Open Graph Tags.
- Application ID/Key: Enter the Application ID you got while registration at https://developers.facebook.com/docs/apps/
- Enable Product Type: Enable the option to allow sharing additional product attributes on social media.
- Fallback Image: Upload the default fallback image. This image is used for social sharing if no product fallback image is found.

Twitter Card Settings
Twitter Card allows sharing additional media on Twitter for enjoying more traffic!

Twitter Card: Enable Twitter Card.
Twitter Username: Enter the Twitter username of the website
Author: Enter the author’s username.
Twitter Card Type for CMS Pages: Select the Twitter card type for CMS Pages.
Twitter Card Type for Categories: Select the Twitter card type for categories.
Twitter Card for Products: Select the Twitter card type for products.
Use Thumbnail Image for Summary Card: Enable it if you want to use thumbnail image for the summary card. By enabling this option, the thumbnail image is used instead of the image set in the product image fallback option. However, the same will be used if no thumbnail image is found.
Fallback Image: Upload the default fallback image.

Image Role Settings
The image role is to be set from the Catalog > Products > Select Product > Image. It allows using the product image as Twitter Card image and Open Graph share image. Select the image role as shown below.

Search Engine Optimization Settings
Configure the Social Meta tags information for each product page from Catalog > Products > Select Product > Search Engine Optimization Settings.
- Open Graph Title: Enter the Open Graph title
- Open Graph Description: Enter the Open Graph description.
- Twitter Title: Enter the Twitter Card title.
- Twitter Description: Enter the Twitter Card description.

Category Page Settings
Configure the social Meta tags information for category pages from Catalog > Categories > Select Category > Social Meta Information.

Social Meta Tags in Frontend
Once the settings are configured as mentioned above, When the web store URL is shared on the social media such as Facebook, Twitter, Pinterest, etc., it will show social meta tags enabled while sharing.