{"id":3488,"date":"2024-05-24T10:20:21","date_gmt":"2024-05-24T10:20:21","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/how-to-add-open-graph-meta-tags-to-magento-2\/"},"modified":"2025-03-06T09:30:22","modified_gmt":"2025-03-06T09:30:22","slug":"how-to-add-open-graph-meta-tags-to-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/how-to-add-open-graph-meta-tags-to-magento-2\/","title":{"rendered":"How to Add Open Graph Meta Tags to Magento 2: Easy Guide"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Here is your simple guide on how to add Open Graph Meta Tags to Magento 2.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Open Graph meta tags are an effective way to optimize how your content appears on social media platforms. In this blog post, I will show you the exact steps to add Open Graph Meta Tags without being technical.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, let\u2019s start!  <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-open-graph-meta-tags\">What Are Open Graph Meta Tags in Magento 2?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open Graph Meta Tags control how your store URLs display on social media platforms when you share your brand post. They help ensure your content and image look proper and structured on any social media channel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is how your store URL appears with Open Graph meta tags.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/05\/Social-meta-tags-Facebook.png\" alt=\"Social meta tags - Facebook\" class=\"wp-image-45941\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Using Open Graph Meta Tags:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gives you&nbsp;<strong>more control<\/strong>&nbsp;over how your content will appear on social media platforms rather than the particular platform deciding it.<\/li>\n\n\n\n<li>Makes a&nbsp;<strong>pleasing impression<\/strong>&nbsp;among visitors scrolling through the platform.<\/li>\n\n\n\n<li>It improves the chances of a&nbsp;<strong>higher click-through rate<\/strong>, as Facebook posts with images get 2.3 times more CTR than posts without images.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-add-open-graph-meta-tags\">How to Add Open Graph Meta Tags to Magento 2?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The easiest way to add Open Graph meta tags is using Meetanshi\u2019s&nbsp;<a href=\"https:\/\/meetanshi.com\/magento-2-social-meta-tags.html\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 Social Meta Tags<\/a>&nbsp;extension.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/05\/Magento-2-Social-Meta-Tags.png\" alt=\"Magento 2 Social Meta Tags\" class=\"wp-image-45900\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Install and Configure The Extension<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Extract the zip folder and upload the extension to the root of your Magento 2 directory via FTP.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After this, login to your SSH and run the following commands step by step:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>php bin\/magento setup:upgrade<\/code><\/li>\n\n\n\n<li><code>For Magento version 2.0.x to 2.1.x - php bin\/magento setup:static-content:deploy<\/code><\/li>\n\n\n\n<li><code>For Magento version 2.2.x &amp; above - php bin\/magento setup:static content:deploy \u2013f<\/code><\/li>\n\n\n\n<li><code>php bin\/magento cache:flush<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let\u2019s configure it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Head to&nbsp;<strong>Stores &gt; Configuration &gt; Social Meta Tags<\/strong>, where you will find the configuration settings.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Social Meta Tags:<\/strong>&nbsp;Enable the Social Meta Tags extension.<\/li>\n\n\n\n<li><strong>Price for Bundled Products:<\/strong>&nbsp;Select the option to display no price, minimum, or maximum price accordingly.<\/li>\n\n\n\n<li><strong>Product Image Fallback:<\/strong>&nbsp;Select the order of image fallback from the dropdown menu.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/05\/Social-meta-tags-general-settings-.png\" alt=\"Social meta tags - general settings\" class=\"wp-image-45902\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Set The Open Graph Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Here, you will have to enable some settings for the Open Graph:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Open Graph:<\/strong>&nbsp;Enable Open Graph Tags.<\/li>\n\n\n\n<li>\u00a0<strong>Application ID\/Key:<\/strong>\u00a0Enter the Application ID you must have got while registering at\u00a0<a href=\"https:\/\/developers.facebook.com\/docs\/development\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developers.facebook.com\/docs\/apps\/<\/a><\/li>\n\n\n\n<li><strong>Enable Product Type:<\/strong>&nbsp;If you want to show additional product attributes, enable this option.<\/li>\n\n\n\n<li><strong>Fallback Image:<\/strong>&nbsp;Upload a default image here. This fallback will be used if no image is used while sharing your post.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/05\/Open-Graph-Settings-.png\" alt=\"Open Graph Settings\" class=\"wp-image-45903\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Set The Twitter Card Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now, in the same way, you can enable Twitter card settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Twitter Card:<\/strong>&nbsp;Enable Twitter Card.<\/li>\n\n\n\n<li><strong>Twitter Username:<\/strong>&nbsp;Enter the Twitter username of your store.<\/li>\n\n\n\n<li><strong>Author:<\/strong>&nbsp;Enter the author\u2019s username.<\/li>\n\n\n\n<li><strong>Twitter Card Type for CMS Pages:<\/strong>&nbsp;Select the Twitter card type for CMS Pages.<\/li>\n\n\n\n<li><strong>Twitter Card Type for Categories:<\/strong>&nbsp;Select the Twitter card type for categories.<\/li>\n\n\n\n<li><strong>Twitter Card for Products:<\/strong>&nbsp;Select the Twitter card type for products.<\/li>\n\n\n\n<li><strong>Use Thumbnail Image for Summary Card:<\/strong>&nbsp;Enable it if you want to use a thumbnail image for the summary card.<\/li>\n\n\n\n<li><strong>Fallback Image:<\/strong>&nbsp;Upload the default fallback image.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/05\/Twitter-Card-Settings.png\" alt=\"Twitter Card Settings\" class=\"wp-image-45904\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Product Page and Category Page Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now that you\u2019ve enabled the configuration&nbsp;and set tags, there are a few settings you need to make before you start sharing your content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>a. Product Page Settings<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Image Role Setting: You need to set a product image that will be used as a Twitter Card image and an Open Graph share image. Head to&nbsp;<strong>Catalog &gt; Products &gt; Select Product &gt; Image<\/strong>&nbsp;to add the image.<\/li>\n\n\n\n<li>Search Engine Optimization Setting: Here, you will need to add information about each product page.&nbsp;<strong>Go to Catalog &gt; Products &gt; Select Product &gt; Search Engine Optimization Settings<\/strong>&nbsp;and fill in the information below.\n<ul class=\"wp-block-list\">\n<li><strong>Open Graph Title:<\/strong>&nbsp;Write the Open Graph title<\/li>\n\n\n\n<li><strong>Open Graph Description:<\/strong>&nbsp;Write the Open Graph description.<\/li>\n\n\n\n<li><strong>Twitter Title:<\/strong>&nbsp;Write the Twitter Card title.<\/li>\n\n\n\n<li><strong>Twitter Description:<\/strong>&nbsp;Write the Twitter Card description.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/05\/Search-engine-optimization.png\" alt=\"Search engine optimization for open meta tags\" class=\"wp-image-45908\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>b. Category Page Settings<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After the product page, it is time to add information for the category pages. Head to&nbsp;<strong>Catalog &gt; Categories &gt; Select Category &gt; Social Meta Information<\/strong>&nbsp;and fill in the below details:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Open Graph Image:<\/strong>&nbsp;Upload Open Graph image<\/li>\n\n\n\n<li><strong>Open Graph Title:<\/strong>&nbsp;Write the Open Graph title<\/li>\n\n\n\n<li><strong>Open Graph Description:<\/strong>&nbsp;Write the Open Graph description.<\/li>\n\n\n\n<li><strong>Twitter Card Image:<\/strong>&nbsp;Upload Twitter card image.<\/li>\n\n\n\n<li><strong>Twitter Title:<\/strong>&nbsp;Write the title for Twitter<\/li>\n\n\n\n<li><strong>Twitter Description:<\/strong>&nbsp;Write the description for Twitter.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/05\/Social-meta-information.png\" alt=\"Social meta information\" class=\"wp-image-45909\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Test Your URL<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">After this, copy your URL and paste it on the social media platforms to see if it works as expected on your social media pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span>Magento 2 Social Media Tags<\/span>\r\n<p>Control and optimize your store visibility on social media pages like a pro.<\/p>\r\n<a href=\"https:\/\/meetanshi.com\/magento-2-social-meta-tags.html\" target=\"_blank\" class=\"btn-primary\">Take Charge Now<\/a>\r\n<\/div>\r\n<div class=\"cta-image-new\">\r\n<img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/magento-2-social-media-tags.png\" alt=\"Magento 2 Social Media Tags\">\r\n<\/div>\r\n<\/div><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"maintain-brand-consistency\">Maintain Brand Consistency on Social Media<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">OG tags are important for maintaining a solid and clear social media presence. Adding them to your Magento 2 store is simple and doesn\u2019t require a lot of your time and effort. Using the Meetanshi extension, you can enable this feature instantly in your store.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is your simple guide on how to add Open Graph Meta Tags to Magento 2. Open Graph meta tags are an effective way to&#8230;<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-3488","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=3488"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3488\/revisions"}],"predecessor-version":[{"id":8476,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3488\/revisions\/8476"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=3488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=3488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=3488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}