{"id":12397,"date":"2023-03-20T17:27:42","date_gmt":"2023-03-20T11:57:42","guid":{"rendered":"https:\/\/magecomp.com\/support\/?post_type=manual_documentation&#038;p=12397"},"modified":"2024-05-21T14:55:05","modified_gmt":"2024-05-21T09:25:05","slug":"open-graph-tags-cms-pages","status":"publish","type":"manual_documentation","link":"https:\/\/magecomp.com\/support\/docs\/open-graph-tags-magento-2\/open-graph-tags-cms-pages\/","title":{"rendered":"Open Graph Tags for CMS Pages"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">You can add open graph tags for CMS pages using this extension.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For that, go to <\/span><b>Content &gt; Pages <\/b><span style=\"font-weight: 400;\">and open your desired CMS page 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-12398 size-full\" title=\"open graph tags for CMS page\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-tags-for-CMS-page.png\" alt=\"open graph tags for CMS page\" width=\"1254\" height=\"548\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-tags-for-CMS-page.png 1254w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-tags-for-CMS-page-300x131.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-tags-for-CMS-page-1024x447.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-tags-for-CMS-page-768x336.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/open-graph-tags-for-CMS-page-600x262.png 600w\" sizes=\"(max-width: 1254px) 100vw, 1254px\" \/><\/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 CMS page.<\/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 CMS page.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>OG Image:<\/b><span style=\"font-weight: 400;\"> Upload an open graph image for this CMS page.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Now, in the storefront, open this CMS 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 size-full wp-image-12399\" title=\"frontend open graph tags for CMS page\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/frontend-open-graph-tags-for-CMS-page.png\" alt=\"frontend open graph tags for CMS page\" width=\"1350\" height=\"605\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/frontend-open-graph-tags-for-CMS-page.png 1350w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/frontend-open-graph-tags-for-CMS-page-300x134.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/frontend-open-graph-tags-for-CMS-page-1024x459.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/frontend-open-graph-tags-for-CMS-page-768x344.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/frontend-open-graph-tags-for-CMS-page-600x269.png 600w\" sizes=\"(max-width: 1350px) 100vw, 1350px\" \/><\/p>\n<p>If you have added a description to the content section of CMS pages, it will automatically add it to the OG Description.<\/p>\n<p><span style=\"font-weight: 400;\">For that, go to <\/span><b>Content &gt; Pages <\/b><span style=\"font-weight: 400;\">and open your desired CMS page in <\/span><b>Edit<\/b><span style=\"font-weight: 400;\"> mode.<\/span> Now move to the<b>\u00a0Content<\/b>\u00a0tab and enlarge it.\u00a0 Add a\u00a0<strong>Description<\/strong> of the CMS page.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-13733\" title=\"SS\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-8.png\" alt=\"cms page content\" width=\"1216\" height=\"572\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-8.png 1216w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-8-300x141.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-8-1024x482.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-8-768x361.png 768w\" sizes=\"(max-width: 1216px) 100vw, 1216px\" \/><\/p>\n<p>Now move to the\u00a0<strong>Open Graph Metadata<\/strong>\u00a0tab and enlarge it. You will find that the description content is automatically added to the\u00a0<strong>OG Description<\/strong>\u00a0field.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13734\" title=\"SS\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-9.png\" alt=\"OG description of CMS page from content\" width=\"1232\" height=\"502\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-9.png 1232w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-9-300x122.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-9-1024x417.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-9-768x313.png 768w\" sizes=\"(max-width: 1232px) 100vw, 1232px\" \/><\/p>\n<p>Likewise, it will automatically take the CMS page name as OG Title for the particular CMS Page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13735\" title=\"SS\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-10.png\" alt=\"CMS page name as OG title\" width=\"1193\" height=\"575\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-10.png 1193w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-10-300x145.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-10-1024x494.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/03\/SS-10-768x370.png 768w\" sizes=\"(max-width: 1193px) 100vw, 1193px\" \/><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":12380,"menu_order":4,"template":"","manualdocumentationcategory":[4034],"manual_doc_tag":[],"class_list":["post-12397","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\/12397","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":1,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/12397\/revisions"}],"predecessor-version":[{"id":13736,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/12397\/revisions\/13736"}],"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=12397"}],"wp:term":[{"taxonomy":"manualdocumentationcategory","embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manualdocumentationcategory?post=12397"},{"taxonomy":"manual_doc_tag","embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_doc_tag?post=12397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}