Magento 2 Open Graph

Extension Installation

• Download the zip file
• Extract and put it into /app/code/
• Open Cli in the Magento directory and follow the below commands:
  • php bin/magento s:up
  • php bin/magento s:d:c
  • php bin/magento s:s:d -f
  • php bin/magento i:rei
  • php bin/magento c:f
  • php bin/magento cron:install
  • php bin/magento cron:run

Configuration:

• Module Enable > Turn on the Module.
• Use Open Graph Tag For > Choose the open graph tags option from the three that are displayed in the image.
• Default OG Image : Set default open graph image.
• Default OG Title : Enter default open graph title.
• Default OG Description: Enter default open graph description & save Config.
• If any value has not been placed in the page prior, you will see “Default Title”, “Default description”,and “Default Upload Image”.

• Open any page in the storefront that isn t marked with OG tags now. Use Ctrl+U or right-click to choose View Page Source. According to your configuration settings, you can see that the default Open Graph Tags have been inserted for that page successfully in the area.

 

• Declare the Open Graph Title. If it is configured, the Meta Title will be used if you haven t set it up. If not, the product s name will be used.
• Enter the product Open Graph Description. Meta Description of the product will be used in case an OG description hasn t been set up. If there are none of the descriptions configured, the Deflut Description will be used.

 

 

• To add a new image or change an existing one, set the product Open Graph Image (Facebook image) moving to the Images and Videos area.
• selected the image and assigned it the original image role. For a product, Defult OG Image will be utilized if the Open Graph Image is not set.
• Remember to hit the Save button once you re done.

• Open any page in the storefront that isn t marked with OG tags now. Use Ctrl+U or right-click to choose View Page Source. According to your configuration settings, you can see that the default Open Graph Tags have been inserted for that page successfully in the area..

 

• For Category page

• Go to Admin Panel > Catalog > Categories.
• Locate the Open Graph Metadata area for the category you want to configure the OG tags for.
• In the OG Title area, provide the title of the Open Graph. If you haven t configured it, the Meta Title will be utilized. The category name will be used if it isn t set.
• Set the category s Open Graph description in the OG Description. In the event that an OG description is not specified, the category s meta description will be used. The Default Description will be used if none of the preset descriptions are present
• In the OG Image, set an Open Graph Image; if not, the Default OG Image will be used. When you re done, don t forget to click Save.

• Open any page in the storefront that isn t marked with OG tags now. Use Ctrl+U or right-click to choose View Page Source. According to your configuration settings, you can see that the default Open Graph Tags have been inserted for that page successfully in the area.

 

• For CMS Pages :

• To do that, select Content > Pages and launch the CMS page of your choice in Edit mode. Select the Open Graph Metadata tab now, and click to make it larger.

• OG Title : This CMS page needs an open graph title. Add one.
• OG Description : For this CMS page, include a description of an open graph.
• OG Image :For this CMS page, upload an image of an open graph.

• Open this CMS page now in the storefront. Use Ctrl+U or right-click to choose View Page Source. As per your configuration settings, you can see that the Open Graph Tags have been successfully placed to the area of the page.

 

• OG: url specifies the URL of the Main Website page being shared, ensuring that social media platforms link back to this exact page.
• OG: site_name defines the site name as “Main Website”, which appears alongside the shared link to provide brand context.
• OG: type is set to “cms,” identifying the content as a general webpage.
• OG: image:type, OG:image:width, OG:image:height define the type and dimensions of the preview image in JPEG format, ensuring that platforms display a correctly sized image.
• OG: locale is set to “en_US,” specifying the language and locale as British English for more localized content display.
• These tags help control how the page appears in social media previews, enhancing both visual consistency and content relevance

• Open Graph Tags Display on Social Media

• A link with Open Graph tags will look like this when you share it with your friends and networks on social media.