2 Steps to Configure Magento 2 Open Graph Tags

2 Steps to Configure Magento 2 Open Graph Tags

Are you struggling to make your product pages stand out on social media? Magento 2 open graph tags (OG) are snippets of code that control how your website's URLs are displayed on social media apps. In this tutorial, we will explain how to install and configure the Magento 2 open graph tags extension.

Key Takeaways

  • Learn to customize how your products appear on social media with Open Graph tags.

  • Understand how to maintain consistent brand messaging across all social platforms.

  • Discover how compelling visuals and descriptions can increase click-through rates.

  • Follow simple steps to download, install, and configure the Open Graph extension.

  • Combine Open Graph tags with other SEO best practices for maximum impact.

Benefits of Magento 2 Open Graph Tags

1. Enhanced Social Media Presence

  • When a product page is shared on social media, Open Graph meta tags dictate the title, description, and image.

  • It ensures that the shared content looks appealing and provides enough context to get interactions.

  • For example, share a Magento CMS page about a fashion collection on Facebook. By using Open Graph meta tags, you can ensure it includes a headline like "Explore Our Latest Spring Fashion Line!". It could have a stunning image of the collection and a brief description.

2. Controlled and Consistent Messaging

  • Open Graph meta tags allow you to control the narrative when your content is shared externally. It is important for maintaining brand consistency and ensuring marketing messages are conveyed. It is regardless of who is sharing the link.

  • You can add Open Graph tags to new product launches to consistently feature key selling points and promotional terms. It ensures that every share sends the campaign message you've crafted in the Magento admin.

3. Increased Click-Through Rates

  • Compelling visuals and descriptions in Open Graph meta tags can increase the click-through rates on social media. It translates into more traffic to your Magento store and potentially higher sales conversions.

  • For a high-ticket item like a luxury watch, use an Open Graph tag to display a close-up image of the watch. It can have a description emphasizing exclusivity and can bring enthusiasts to click and explore the product details.

4. SEO Benefits

  • While Open Graph tags are primarily for social media platforms, they also indirectly contribute to Magento SEO. Engaging social shares that drive traffic back to the site can reduce bounce rates and increase time on site. These are positive indicators for search engines.

  • A blog post about "Sustainable Gardening Techniques" with Open Graph tags can gain traction on social media. It leads to increased engagement and longer site visits, which in turn could boost the page’s SEO ranking.

5. Improved User Experience

  • By ensuring that each share on social media represents the linked content, Open Graph meta tags improve the overall user experience. Users feel more inclined to engage with and share content that looks professional and matches what they expect.

  • Open Graph tags ensure that the date, location, and details of the events are visible. It aids in quick decision-making for potential attendees.

Steps to Set Up and Configure Magento 2 Open Graph Tags Extension

Step 1: Download and Install the Extension

  1. Log in to your account on the extension provider's website.

  2. Verify your purchase, then download and extract the extension zip file.

  3. Upload the extracted extension folder to the Magento 2 root directory.

  4. Run the following commands in the SSH console: composer require vendor/module-name php bin/magento setup php bin/magento setup:di php bin/magento setup:static-content php bin/magento cache php bin/magento cache php bin/magento maintenance

Step 2: Configure the Magento 2 Extension Settings

  1. Log in to the Magento Admin Panel after installing the extension.

  2. Navigate to Stores > Configuration > Open Graph Tags extension. Select pages for Magento 2 open graph tags

  3. Select the pages of your store in Use Meta Graph Tag For.

  4. Enable the open graph tags on all the pages by selecting Yes.

navigate to configure Magento 2 open graph tags

open grapgh meta data to configure Magento 2 open graph tags

  1. Go to Catalog > Products. Expand the Open Graph Metadata.

Title and description for Magento 2 open graph tags

  1. Enter a suitable OG title and description.

Selecting images for Magento 2 open graph tags

  1. Select a suitable image and give it an OG role on the product page.

Select role for Magento 2 open graph tags

  1. Repeat steps 6 and 7 for the other store pages as well.

  2. Click Save Config to save changes after modifying the title and the description.

Top 3 Open Graph Tags Extensions for Magento 2

Extension Key Features
Open Graph Tags for Magento 2 by Amasty - Enable Open Graph tags on product, category, CMS, and home pages
- Customize Open Graph title and description attributes
- Automatically generate tags if product attributes are not set
- Part of the SEO Toolkit Pro extension
Magento 2 Facebook Open Graph Tags by Magefan - Set default Open Graph image and description
- Automatic tag generation based on SEO metadata
- Individual tags for products, categories, CMS pages, blog posts/categories
- Configure tags from the admin panel without coding
Open Graph Tags by MageComp - Add Open Graph title, description, and image tags
- Separate tags for products, categories, and CMS pages
- Set default Open Graph tags
- Enhance social media sharing and drive traffic

Best Practices for Open Graph Tags Extensions

1. Optimize Open Graph Images

  • Choose high-quality, visually appealing Magento images that are relevant to the page's content.

  • Ensure that the images meet the recommended dimensions and aspect ratios for optimal display on social media platforms. For example, Facebook recommends using images with a minimum size of 1200x630 pixels.

  • Optimize the image file size to ensure fast loading times without compromising quality. Use appropriate image compression techniques and formats (e.g., JPEG or PNG) to reduce file size.

  • Consider using custom Open Graph images for important pages or products. It is necessary to create a more engaging and visually appealing social media presence.

2. Leverage Default Values and Fallbacks

  • Set default Open Graph tag values in the extension's configuration for cases where specific values are not provided for individual pages.

  • Configure fallback values for the Open Graph tags to ensure that relevant information is always available. It should be available even if specific values are missing for a particular page.

  • For example, set a default og:image that represents your brand or website if a specific image is not provided for a page.

3. Test and Validate Open Graph Tags

  • After configuring the Open Graph tags, thoroughly test their implementation on your Magento website.

  • Use tools like the Facebook Sharing Debugger or the Twitter Card Validator to preview how your pages will appear when shared on social media platforms.

  • Verify that the Open Graph tags are correctly populated and displayed for different types of pages, such as

    1. Magento product pages
    2. Category pages
    3. CMS pages
  • Test the sharing functionality on various social media platforms to ensure that the tags are being properly recognized and displayed.

4. Monitor and Maintain

  • Regularly monitor the performance and functionality of the Open Graph Tags extension on your Magento website.

  • Keep the extension up to date with the latest version releases to ensure compatibility with Magento updates and security patches.

  • Monitor the extension's impact on website performance, such as page load times, and optimize the configuration if necessary.

  • Regularly review and update the Open Graph tags. It is to ensure they accurately reflect any changes in your website's content or structure.

5. Integrate with Other SEO Practices

  • Use the Open Graph Tags extension in conjunction with other best practices for Magento SEO. It includes optimizing Magento meta tags, header tags, and product descriptions.

  • Meta tags and meta descriptions play an important role in search engine optimization. They inform search engines about the content of a page and also influence user decisions in search engine result pages.

  • Structured data markup (like Schema.org) is another SEO best practice that can complement Open Graph tags. Structured data helps enhance the presentation of your pages in SERPs through rich snippets.

  • Ensure that the Open Graph tags align with your overall SEO strategy and provide consistent and accurate information across different channels.

6. Customize and Extend as Needed

  • If required, customize the Open Graph Tags extension to meet your specific business requirements.

  • Extend the functionality of the extension by integrating it with other Magento plugins or third-party tools. It is to enhance your pages on social media.

  • Consider using social media meta tags, such as Twitter Cards or Pinterest Rich Pins, to optimize your website's visibility.

  • Using Open Graph tags to define products (og:type as product) can enhance the detail shown in shares. Include tags like product:price:amount and product:price:currency to display prices directly on social media. It can improve click-through rates.

FAQs

1. What is the Magento 2 Open Graph Extension?

The Magento 2 Open Graph Extension allows you to add OG tags to enhance how links appear on social media platforms.


2. How does the Facebook Open Graph Extension benefit my Magento 2 store?

The Magento 2 Facebook OG Tags extension ensures that your products and pages are presented attractively on Facebook. It increases engagement and click-through rates.


3. Can I customize the OG tags for my website using the Magento Open Graph Extension?

Yes, you can easily customize and manage social meta tags for your website using the Magento 2 Open Graph extension from the admin panel.


4. What are the advantages of using the 2 Facebook Open Graph Extension for my online store?

The 2 Facebook OG Tags Extension enhances the visibility of your Magento 2 store's links on social media. It offers controlled messaging and consistent branding.


5. How do I add OG tags to my Magento store using the meta tags extension?

Use the Magento 2 Open Graph Extension to add OG tags, enabling precise control over how your content appears when shared across social media platforms.

CTA

Summary

The Magento 2 open graph tags extension is an example of how you can accurately link your store pages with social media apps to generate revenue. In this tutorial, we explained the installation and configuration of the open graph tags extension. Here is a quick recap:

  • Customize titles, descriptions, and images to make social shares of your product pages more engaging.

  • Consistently convey your marketing messages across all social media shares.

  • Use compelling visuals and enticing descriptions in OG tags to drive higher click-through rates and more visits to your store.

  • Easily download, install, and configure the extension through the Magento Admin Panel to get started in no time.

  • Regularly update and integrate OG tags with broader SEO practices. It is to ensure your social shares are optimized for maximum effect.

Choose a managed Magento hosting plan to gain traction from graph tags and scale efficiently.

Nanda Kishore
Nanda Kishore
Technical Writer

Nanda Kishore is an experienced technical writer with a deep understanding of Magento ecommerce. His clear explanations on technological topics help readers to navigate through the industry.


Get the fastest Magento Hosting! Get Started