{"id":12387,"date":"2023-03-20T17:20:18","date_gmt":"2023-03-20T11:50:18","guid":{"rendered":"https:\/\/magecomp.com\/support\/?post_type=manual_documentation&#038;p=12387"},"modified":"2024-05-21T12:52:52","modified_gmt":"2024-05-21T07:22:52","slug":"open-graph-tags-products","status":"publish","type":"manual_documentation","link":"https:\/\/magecomp.com\/support\/docs\/open-graph-tags-magento-2\/open-graph-tags-products\/","title":{"rendered":"Open Graph Tags for Products"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">You can add product-specific open graph tags using this extension.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For that, go to <\/span><b>Catalog &gt; Products <\/b><span style=\"font-weight: 400;\">and open your desired product in <\/span><b>Edit<\/b><span style=\"font-weight: 400;\"> mode. Now move to the<\/span><b> Open Graph Metadata<\/b><span style=\"font-weight: 400;\"> tab and enlarge it.<\/span><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-12388 size-full\" title=\"open graph tags for products\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-tags-for-products.png\" alt=\"open graph tags for products\" width=\"1249\" height=\"395\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-tags-for-products.png 1249w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-tags-for-products-300x95.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-tags-for-products-1024x324.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-tags-for-products-768x243.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-tags-for-products-600x190.png 600w\" sizes=\"(max-width: 1249px) 100vw, 1249px\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>OG Title:<\/b><span style=\"font-weight: 400;\"> Add an open graph title for this product.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>OG Description:<\/b><span style=\"font-weight: 400;\"> Add an open graph description for this product.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Now,\u00a0 enlarge the <\/span><b>Images and Videos<\/b><span style=\"font-weight: 400;\"> tab and open the Product image.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-12389 size-full\" title=\"open graph image tag for product\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-image-tag-for-product.png\" alt=\"open graph image tag for product\" width=\"1358\" height=\"659\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-image-tag-for-product.png 1358w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-image-tag-for-product-300x146.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-image-tag-for-product-1024x497.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-image-tag-for-product-768x373.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-image-tag-for-product-600x291.png 600w\" sizes=\"(max-width: 1358px) 100vw, 1358px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Select the <\/span><b>OG Image<\/b><span style=\"font-weight: 400;\"> role to add an open graph image for this product.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, in the storefront, open this product page. Right-click and select <\/span><b>View Page Source<\/b><span style=\"font-weight: 400;\"> or press <\/span><b>Ctrl+U<\/b><span style=\"font-weight: 400;\">. You can find that the Open Graph Tags have been successfully added in the &lt;head&gt; section of the page as per your configuration settings.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-12390 size-full\" title=\"frontend open graph tags for product\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/frontend-open-graph-tags-for-product.png\" alt=\"frontend open graph tags for product\" width=\"1350\" height=\"605\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/frontend-open-graph-tags-for-product.png 1350w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/frontend-open-graph-tags-for-product-300x134.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/frontend-open-graph-tags-for-product-1024x459.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/frontend-open-graph-tags-for-product-768x344.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/frontend-open-graph-tags-for-product-600x269.png 600w\" sizes=\"(max-width: 1350px) 100vw, 1350px\" \/><\/p>\n<p>If you have added a short description to the content section of products, it will automatically add it to the OG Description.<\/p>\n<p>For that, go to\u00a0<b>Catalog &gt; Products\u00a0<\/b>and open your desired product in\u00a0<b>Edit<\/b>\u00a0mode. Now move to the<b> Content<\/b> tab and enlarge it. Add a <strong>Short Description<\/strong> of the product.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-13723\" title=\"SS\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-2.png\" alt=\"product content description\" width=\"1235\" height=\"548\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-2.png 1235w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-2-300x133.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-2-1024x454.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-2-768x341.png 768w\" sizes=\"(max-width: 1235px) 100vw, 1235px\" \/><\/p>\n<p>Now move to the <strong>Open Graph Metadata<\/strong> tab and enlarge it. You will find that the short description content is automatically added to the <strong>OG Description<\/strong> field.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13724\" title=\"SS\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-3.png\" alt=\"OG description from content for product\" width=\"1230\" height=\"559\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-3.png 1230w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-3-300x136.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-3-1024x465.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-3-768x349.png 768w\" sizes=\"(max-width: 1230px) 100vw, 1230px\" \/><\/p>\n<p>Likewise, it will automatically take the product name as OG Title for the particular product.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13725\" title=\"SS\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-4.png\" alt=\"Product name as OG title\" width=\"1208\" height=\"563\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-4.png 1208w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-4-300x140.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-4-1024x477.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-4-768x358.png 768w\" sizes=\"(max-width: 1208px) 100vw, 1208px\" \/><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":12380,"menu_order":2,"template":"","manualdocumentationcategory":[4034],"manual_doc_tag":[],"class_list":["post-12387","manual_documentation","type-manual_documentation","status-publish","hentry","manualdocumentationcategory-m2-open-graph-tags"],"_links":{"self":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/12387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation"}],"about":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/types\/manual_documentation"}],"author":[{"embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":2,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/12387\/revisions"}],"predecessor-version":[{"id":13726,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/12387\/revisions\/13726"}],"up":[{"embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/12380"}],"wp:attachment":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/media?parent=12387"}],"wp:term":[{"taxonomy":"manualdocumentationcategory","embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manualdocumentationcategory?post=12387"},{"taxonomy":"manual_doc_tag","embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_doc_tag?post=12387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}