{"id":1241,"date":"2020-04-16T15:31:22","date_gmt":"2020-04-16T15:31:22","guid":{"rendered":"https:\/\/www.rankmovers.com\/?p=1241"},"modified":"2024-02-23T09:26:57","modified_gmt":"2024-02-23T09:26:57","slug":"open-graph-markup","status":"publish","type":"post","link":"https:\/\/www.rankmovers.com\/open-graph-markup\/","title":{"rendered":"What is Open Graph Markup?"},"content":{"rendered":"<p>Open Graph markup or tags are code that is used to control how URLs are presented on social media. They are located in the &lt;head&gt; section of your webpage and are part of Facebook&#8217;s Open Graph Protocol.<\/p>\n<p>Here is an example of the code that is used for the open graph meta tags:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1242 size-full\" title=\"Open Graph Markup\" src=\"https:\/\/www.rankmovers.com\/wp-content\/uploads\/2020\/04\/open-graph-markup.png\" alt=\"Open Graph Markup\" width=\"500\" height=\"210\" \/><\/p>\n<p>Here is an example of what it will look like when shared on social media:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1243 size-full\" title=\"Open Graph Snippet\" src=\"https:\/\/www.rankmovers.com\/wp-content\/uploads\/2020\/04\/open-graph-snippet.png\" alt=\"Open Graph Snippet\" width=\"500\" height=\"332\" srcset=\"https:\/\/www.rankmovers.com\/wp-content\/uploads\/2020\/04\/open-graph-snippet.png 500w, https:\/\/www.rankmovers.com\/wp-content\/uploads\/2020\/04\/open-graph-snippet-300x200.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<h2>Why are Open Graph Markups Important?<\/h2>\n<ul>\n<li>The content will look more appealing on social media<\/li>\n<li>It gives people a glance at the content and what it is about<\/li>\n<li>People will more likely see and click on your shared content<\/li>\n<li>Your brand will have more visibility on social media search<\/li>\n<li>It helps Facebook to understand the content of your page<\/li>\n<li>When people share your page link in direct messages, and open graph creates a snippet. However, it is only if the apps support open graphs.<\/li>\n<\/ul>\n<h2>Basic Tags the Should Be Used<\/h2>\n<p>There are 17 open graph tags listed by Facebook. However, there are the basic ones that you need for your page. In this section, we will be looking at those basic ones.<\/p>\n<p>Here are the standard open graph markups:<\/p>\n<p><strong>og:url<\/strong> &#8211; This is the page URL used for the page, which will be similar to the canonical URL.<\/p>\n<p><strong>Og:title<\/strong> &#8211; This is the title of the page, and in SEO&#8217;s case would be the H1 of your page. The title has to be short following a guidance of 40 characters for mobile and 60 characters for desktop.<\/p>\n<p><strong>Og:description<\/strong> \u2013 this a brief explanation of the content that should complement the title. You can use your meta description for this section as long as it describes what the content is about clearly. Facebook recommends using two to four sentences.<\/p>\n<p><strong>Og:image<\/strong> \u2013 this is the image that will appear in the social snippet. It is the most important as it occupies most of the social snippets. The image dimensions must be at least 1200&#215;630 pixels and must not exceed 8MB.<\/p>\n<p><strong>Og:locale<\/strong> \u2013 this defines the language that is used for the content. If there is no language that is allocated for the content, Facebook will assume that the page uses American English. In our case, this would be already be allocated in our meta property.<\/p>\n<h2>How to Set Up Markup Tags on WordPress<\/h2>\n<p><strong>Step 1: go to the Yoast box in the backend<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1244 size-full\" title=\"Where to Add the Tags on WordPress\" src=\"https:\/\/www.rankmovers.com\/wp-content\/uploads\/2020\/04\/where-to-add-the-tags-on-wordpress.png\" alt=\"Where to Add the Tags on WordPress\" width=\"500\" height=\"273\" \/><\/p>\n<p><strong>Step 2: Add title, description, and image for that specific page<\/strong><\/p>\n<p>It is suggested that you don&#8217;t fill out the URL manually because Yoast does it for you. Yoast will also add image dimensions as well. Also, if you don&#8217;t set an image tag, the featured image will be used as default.<\/p>\n<p><strong>Step 3: set the image tag sitewide<\/strong><\/p>\n<p>This has to set up in Yoast settings. In our Yoast, you will click on the SEO button, choose the social options, and enable the toggle.<\/p>\n<h2>How to Test Open Graph Tags<\/h2>\n<p>To check if your tags are working properly, you can use the following:<\/p>\n<ul>\n<li><a href=\"https:\/\/developers.facebook.com\/tools\/debug\/\" target=\"_blank\" rel=\"noopener\">Facebook Sharing Debugger<\/a><\/li>\n<li><a href=\"https:\/\/cards-dev.twitter.com\/validator\" target=\"_blank\" rel=\"noopener\">Twitter Card Validator<\/a><\/li>\n<li><a href=\"https:\/\/www.linkedin.com\/post-inspector\/inspect\/\" target=\"_blank\" rel=\"noopener\">LinkedIn Post Inspector<\/a><\/li>\n<\/ul>\n<p>They all work the same way by checking your page&#8217;s open graph markup tags and show how it will look when shared. When you do the test, it will also help with preventing issues where there are tags that aren&#8217;t pulled correctly. The important thing is that the snippet looks appealing, so even if you miss the less relevant tags like fb:app_id, it&#8217;s not a problem.<\/p>\n<p>Here is an example of how Facebook Sharing Debugger looks:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1246 size-full\" title=\"Open Graph Facebook Checker\" src=\"https:\/\/www.rankmovers.com\/wp-content\/uploads\/2020\/04\/open-graph-facebook-checker.png\" alt=\"Open Graph Facebook Checker\" width=\"500\" height=\"387\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Open Graph markup or tags are code that is used to control how URLs are presented on social media. They are located in the &lt;head&gt; section of your webpage and are part of Facebook&#8217;s Open Graph Protocol. Here is an example of the code that is used for the open graph meta tags: Here is [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":1248,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[89],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Open Graph Markup \u2013 How to Optimize for Social Media Snippets<\/title>\n<meta name=\"description\" content=\"Find out how to optimize open graph markup for social snippets. Control how your pages information appears on social media when shared. Click for more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.rankmovers.com\/open-graph-markup\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Optimise Open Graph for Social Media Snippets\" \/>\n<meta property=\"og:description\" content=\"Control how your pages information appears on social media when shared. Click for more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.rankmovers.com\/open-graph-markup\/\" \/>\n<meta property=\"og:site_name\" content=\"Rank Movers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/seorankmovers\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-16T15:31:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-23T09:26:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.rankmovers.com\/wp-content\/uploads\/2020\/04\/social-meadia-open-graph-snippets.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"470\" \/>\n\t<meta property=\"og:image:height\" content=\"353\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Lilian Postle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@rankmoversseo\" \/>\n<meta name=\"twitter:site\" content=\"@rankmoversseo\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lilian Postle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/www.rankmovers.com\/open-graph-markup\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.rankmovers.com\/open-graph-markup\/\"},\"author\":{\"name\":\"Lilian Postle\",\"@id\":\"https:\/\/www.rankmovers.com\/#\/schema\/person\/ac7a27965de5fd9387ac276b8c7452f6\"},\"headline\":\"What is Open Graph Markup?\",\"datePublished\":\"2020-04-16T15:31:22+00:00\",\"dateModified\":\"2024-02-23T09:26:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.rankmovers.com\/open-graph-markup\/\"},\"wordCount\":593,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.rankmovers.com\/#organization\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.rankmovers.com\/open-graph-markup\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.rankmovers.com\/open-graph-markup\/\",\"url\":\"https:\/\/www.rankmovers.com\/open-graph-markup\/\",\"name\":\"Open Graph Markup \u2013 How to Optimize for Social Media Snippets\",\"isPartOf\":{\"@id\":\"https:\/\/www.rankmovers.com\/#website\"},\"datePublished\":\"2020-04-16T15:31:22+00:00\",\"dateModified\":\"2024-02-23T09:26:57+00:00\",\"description\":\"Find out how to optimize open graph markup for social snippets. Control how your pages information appears on social media when shared. Click for more.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.rankmovers.com\/open-graph-markup\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.rankmovers.com\/open-graph-markup\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.rankmovers.com\/open-graph-markup\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.rankmovers.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\/\/www.rankmovers.com\/category\/blog\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"What is Open Graph Markup?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.rankmovers.com\/#website\",\"url\":\"https:\/\/www.rankmovers.com\/\",\"name\":\"Rank Movers\",\"description\":\"Latest News On Search Engine Optimization &amp; Marketing\",\"publisher\":{\"@id\":\"https:\/\/www.rankmovers.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.rankmovers.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.rankmovers.com\/#organization\",\"name\":\"Rank Movers\",\"url\":\"https:\/\/www.rankmovers.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.rankmovers.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.rankmovers.com\/wp-content\/uploads\/2023\/03\/rankmovers-logo.png\",\"contentUrl\":\"https:\/\/www.rankmovers.com\/wp-content\/uploads\/2023\/03\/rankmovers-logo.png\",\"width\":138,\"height\":60,\"caption\":\"Rank Movers\"},\"image\":{\"@id\":\"https:\/\/www.rankmovers.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/seorankmovers\",\"https:\/\/twitter.com\/rankmoversseo\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.rankmovers.com\/#\/schema\/person\/ac7a27965de5fd9387ac276b8c7452f6\",\"name\":\"Lilian Postle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.rankmovers.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b71f5d7953e25f11999277307e0d62e3?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b71f5d7953e25f11999277307e0d62e3?s=96&d=retro&r=g\",\"caption\":\"Lilian Postle\"},\"url\":\"https:\/\/www.rankmovers.com\/author\/lilian\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Open Graph Markup \u2013 How to Optimize for Social Media Snippets","description":"Find out how to optimize open graph markup for social snippets. Control how your pages information appears on social media when shared. Click for more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.rankmovers.com\/open-graph-markup\/","og_locale":"en_US","og_type":"article","og_title":"How to Optimise Open Graph for Social Media Snippets","og_description":"Control how your pages information appears on social media when shared. Click for more.","og_url":"https:\/\/www.rankmovers.com\/open-graph-markup\/","og_site_name":"Rank Movers","article_publisher":"https:\/\/www.facebook.com\/seorankmovers","article_published_time":"2020-04-16T15:31:22+00:00","article_modified_time":"2024-02-23T09:26:57+00:00","og_image":[{"width":470,"height":353,"url":"https:\/\/www.rankmovers.com\/wp-content\/uploads\/2020\/04\/social-meadia-open-graph-snippets.jpg","type":"image\/jpeg"}],"author":"Lilian Postle","twitter_card":"summary_large_image","twitter_creator":"@rankmoversseo","twitter_site":"@rankmoversseo","twitter_misc":{"Written by":"Lilian Postle","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/www.rankmovers.com\/open-graph-markup\/#article","isPartOf":{"@id":"https:\/\/www.rankmovers.com\/open-graph-markup\/"},"author":{"name":"Lilian Postle","@id":"https:\/\/www.rankmovers.com\/#\/schema\/person\/ac7a27965de5fd9387ac276b8c7452f6"},"headline":"What is Open Graph Markup?","datePublished":"2020-04-16T15:31:22+00:00","dateModified":"2024-02-23T09:26:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.rankmovers.com\/open-graph-markup\/"},"wordCount":593,"commentCount":0,"publisher":{"@id":"https:\/\/www.rankmovers.com\/#organization"},"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.rankmovers.com\/open-graph-markup\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.rankmovers.com\/open-graph-markup\/","url":"https:\/\/www.rankmovers.com\/open-graph-markup\/","name":"Open Graph Markup \u2013 How to Optimize for Social Media Snippets","isPartOf":{"@id":"https:\/\/www.rankmovers.com\/#website"},"datePublished":"2020-04-16T15:31:22+00:00","dateModified":"2024-02-23T09:26:57+00:00","description":"Find out how to optimize open graph markup for social snippets. Control how your pages information appears on social media when shared. Click for more.","breadcrumb":{"@id":"https:\/\/www.rankmovers.com\/open-graph-markup\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.rankmovers.com\/open-graph-markup\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.rankmovers.com\/open-graph-markup\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.rankmovers.com\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/www.rankmovers.com\/category\/blog\/"},{"@type":"ListItem","position":3,"name":"What is Open Graph Markup?"}]},{"@type":"WebSite","@id":"https:\/\/www.rankmovers.com\/#website","url":"https:\/\/www.rankmovers.com\/","name":"Rank Movers","description":"Latest News On Search Engine Optimization &amp; Marketing","publisher":{"@id":"https:\/\/www.rankmovers.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.rankmovers.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.rankmovers.com\/#organization","name":"Rank Movers","url":"https:\/\/www.rankmovers.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.rankmovers.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.rankmovers.com\/wp-content\/uploads\/2023\/03\/rankmovers-logo.png","contentUrl":"https:\/\/www.rankmovers.com\/wp-content\/uploads\/2023\/03\/rankmovers-logo.png","width":138,"height":60,"caption":"Rank Movers"},"image":{"@id":"https:\/\/www.rankmovers.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/seorankmovers","https:\/\/twitter.com\/rankmoversseo"]},{"@type":"Person","@id":"https:\/\/www.rankmovers.com\/#\/schema\/person\/ac7a27965de5fd9387ac276b8c7452f6","name":"Lilian Postle","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.rankmovers.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b71f5d7953e25f11999277307e0d62e3?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b71f5d7953e25f11999277307e0d62e3?s=96&d=retro&r=g","caption":"Lilian Postle"},"url":"https:\/\/www.rankmovers.com\/author\/lilian\/"}]}},"_links":{"self":[{"href":"https:\/\/www.rankmovers.com\/wp-json\/wp\/v2\/posts\/1241"}],"collection":[{"href":"https:\/\/www.rankmovers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rankmovers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rankmovers.com\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rankmovers.com\/wp-json\/wp\/v2\/comments?post=1241"}],"version-history":[{"count":1,"href":"https:\/\/www.rankmovers.com\/wp-json\/wp\/v2\/posts\/1241\/revisions"}],"predecessor-version":[{"id":2586,"href":"https:\/\/www.rankmovers.com\/wp-json\/wp\/v2\/posts\/1241\/revisions\/2586"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rankmovers.com\/wp-json\/wp\/v2\/media\/1248"}],"wp:attachment":[{"href":"https:\/\/www.rankmovers.com\/wp-json\/wp\/v2\/media?parent=1241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rankmovers.com\/wp-json\/wp\/v2\/categories?post=1241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rankmovers.com\/wp-json\/wp\/v2\/tags?post=1241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}