How to Add Open Graph Meta Tags to Magento 2: Easy Guide

Table of Contents

  1. Introduction
  2. What Are Open Graph Meta Tags in Magento 2?
  3. How to Add Open Graph Meta Tags to Magento 2?
  4. Maintain Brand Consistency on Social Media
  5. FAQ Section
Shopify - App image

Introduction

In a digital age where social media presence can make or break a business, ensuring your content appears flawlessly when shared is crucial. Imagine painstakingly crafting your website, only to find that shared links appear unstructured or unappealing on social platforms. This is where Open Graph meta tags come in. They enhance how your store URLs are displayed on social media, ensuring consistency and aesthetic appeal. In this blog post, you'll learn step-by-step how to easily add Open Graph meta tags to your Magento 2 store.

By the end of this guide, you'll have a clear understanding of what Open Graph meta tags are, why they are beneficial, and how you can implement them without any technical hassle. Whether you're a seasoned Magento user or a beginner, this comprehensive guide will walk you through every necessary step.

What Are Open Graph Meta Tags in Magento 2?

Open Graph meta tags are snippets of code that control how URLs appear when they are shared on social media platforms. Originally developed by Facebook, these tags can significantly enhance the visual appeal of your links on multiple platforms. They ensure that your content, including images and text, displays in a structured and attractive manner.

For example, by utilizing Open Graph meta tags, you can dictate what title, description, and image are displayed when someone shares a link from your Magento 2 store. This level of control ensures that your brand maintains a cohesive look across all social media platforms, positively impacting your audience's perception and engagement.

How to Add Open Graph Meta Tags to Magento 2?

Implementing Open Graph meta tags in Magento 2 doesn’t have to be a daunting task. With the help of the Meetanshi Social Meta Tags extension, you can add these tags effortlessly. Follow these steps to get started:

Step 1: Install and Configure The Extension

First, you need to install the Meetanshi Social Meta Tags extension. Begin by extracting the zip folder and uploading the extension files to the root directory of your Magento 2 installation via FTP.

Once the files are uploaded, log in to your server via SSH and run the following command to enable the extension:

php bin/magento setup:upgrade

Following the upgrade, clean the cache with:

php bin/magento cache:clean

Now, access your Magento 2 admin panel and navigate to Stores > Configuration > Social Meta Tags to configure the extension settings.

Step 2: Set The Open Graph Settings

Within the configuration settings, you'll find an option for Open Graph. Here is what you need to do:

  1. Enable Open Graph: Toggle the setting to 'Yes' to enable Open Graph meta tags.
  2. Define Default Open Graph Image: Upload a default image that will be used if specific pages don’t have their own designated image. This ensures a consistent look across your site.
  3. Set Titles and Descriptions: Customize the default title and description for your store to be used in Open Graph tags. Ensure these accurately reflect your brand and key messaging.

Step 3: Set The Twitter Card Settings

While setting up Open Graph, you can also enable Twitter Cards to enhance how your URLs appear on Twitter. In the same configuration panel:

  1. Enable Twitter Cards: Toggle the setting to 'Yes'.
  2. Default Twitter Card Image: Like Open Graph, set a default image for Twitter Cards.
  3. Customize Content: Adjust titles and descriptions specifically for Twitter sharing.

Step 4: Product Page and Category Page Settings

Before you start sharing your content, ensure that individual product and category pages are optimized with appropriate meta tags.

Product Page Settings

Navigate to one of your product pages and scroll down to the Social Meta Tags section. Here, you can customize the Open Graph title, description, and image for this specific product. Doing this ensures each product shares in its best light.

Category Page Settings

For category pages, go to Catalog > Categories, select a category, and then head to the Social Meta Information tab to fill in the necessary details. Customizing each category page similarly ensures consistency and relevance in shares.

Step 5: Test Your URL

After configuring your settings, it’s crucial to test your URLs. Copy any URL from your store and paste it into a social media platform to see how it renders. Ensure that the images, titles, and descriptions appear correctly, adhering to your configurations.

Testing these URLs not only helps verify successful tag implementation but also provides an opportunity to make any necessary adjustments for better brand representation.

Maintain Brand Consistency on Social Media

Adding Open Graph meta tags is an essential step in maintaining a solid and clear social media presence. It’s a relatively simple procedure thanks to extensions like the one from Meetanshi and can be accomplished without consuming too much of your time.

FAQ Section

What are Open Graph Meta Tags?

Open Graph meta tags are snippets of code that define how URLs are displayed on social media platforms, ensuring that content appears structured and visually appealing.

Why Should I Use Open Graph Meta Tags?

These tags enhance your content's display on social media, helping to maintain a consistent and professional look which can positively impact engagement and brand perception.

How Do I Install the Meetanshi Social Meta Tags Extension?

Download the extension, upload the files to your Magento 2 installation via FTP, and enable it through command line commands provided in the installation guide.

Can I Customize Tags for Individual Products and Categories?

Yes, you can customize Open Graph and Twitter meta tags for individual products and category pages via the Magento admin panel.

How Do I Test If My Open Graph Tags Are Working?

After setting up, copy your store’s URL and paste it into any social media platform to check how it renders and see if the configurations appear correctly.

Adding Open Graph meta tags to your Magento 2 store is straightforward and incredibly beneficial for your online presence. Follow this guide to ensure your content looks great every time it is shared on social media platforms.