{"id":14419,"date":"2019-10-03T06:39:43","date_gmt":"2019-10-03T06:39:43","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=14419"},"modified":"2020-01-20T10:25:57","modified_gmt":"2020-01-20T10:25:57","slug":"how-to-show-opengraph-meta-tags-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-show-opengraph-meta-tags-in-amp\/","title":{"rendered":"How to show OpenGraph Meta Tags in AMP"},"content":{"rendered":"\n<p>Open graph meta tags allow you to control what content shows up when a page is shared on Facebook. We\u2019ve all seen posts like these on Facebook. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"http:\/\/redclayinteractive.com\/wp-content\/uploads\/open_graph_tags.png\"><img decoding=\"async\" src=\"http:\/\/redclayinteractive.com\/wp-content\/uploads\/open_graph_tags.png\" alt=\"open_graph_tags\" class=\"wp-image-1318\"\/><\/a><\/figure><\/div>\n\n\n\n<p>To enable the Open Graph meta tags in AMP you need to go to <strong>WordPress Dashboard<\/strong> -&gt; <strong>AMP Option Panel <\/strong>-&gt; <strong>Settings<\/strong> -&gt; <strong>SEO<\/strong> -&gt; Enable &#8220;<strong>OpenGraph Meta Tags<\/strong>&#8221; and then click on the &#8220;<strong>Save Changes&#8221;<\/strong> button.<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"442\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/1-1024x442.png\" alt=\"\" class=\"wp-image-14422\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/1-1024x442.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/1-300x129.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/1-768x331.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/1-50x22.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/1-60x26.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/1-100x43.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/1.png 1315w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><br><\/figcaption><\/figure>\n\n\n\n<p><strong>In the source code, OpenGraph Meta Tags markup will be added like below the screenshot. <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"330\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/2-1024x330.png\" alt=\"\" class=\"wp-image-14424\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/2-1024x330.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/2-300x97.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/2-768x247.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/2-50x16.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/2-60x19.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/2-100x32.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/2.png 1350w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Below are the most common Open Graph tags you will encounter with a brief description of each.<\/strong><\/p>\n\n\n\n<ul><li><strong>og:title<\/strong>&nbsp;\u2013 The title of your page, content, object etc. as you would like for it to appear when displayed on Facebook.<\/li><li><strong>og:site_name<\/strong>&nbsp;\u2013 the name of your site.<\/li><li><strong>og:description<\/strong>&nbsp;\u2013 Perhaps the most important tag. This is the 1-2 sentence snippet that shows up in the post. Write this carefully as this can be the difference between getting clicks or not.<\/li><li><strong>og:type<\/strong> \u2013 The type of content. Think of these as categories, hotel, blog, article etc. <\/li><li><strong>og:image<\/strong>&nbsp;\u2013 The URL for an image you want to represent the your content. Images must be either PNG, JPEG and GIF formats and at least 50px by 50px.<\/li><li><strong>og:url<\/strong>&nbsp;\u2013 This will be the URL that will be associated with your content ie the link.<\/li><\/ul>\n\n\n\n<p><strong>That\u2019s it for this tutorial!!!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Open graph meta tags allow you to control what content shows up when a page is shared on Facebook. We\u2019ve all seen posts like these on Facebook. To enable the Open Graph meta tags in AMP you need to go to WordPress Dashboard -&gt; AMP Option Panel -&gt; Settings -&gt;&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[34],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14419"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=14419"}],"version-history":[{"count":11,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14419\/revisions"}],"predecessor-version":[{"id":15738,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14419\/revisions\/15738"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=14419"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=14419"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=14419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}