{"id":5051,"date":"2017-08-01T10:16:15","date_gmt":"2017-08-01T14:16:15","guid":{"rendered":"https:\/\/www.highedwebtech.com\/?p=5051"},"modified":"2017-08-01T10:22:27","modified_gmt":"2017-08-01T14:22:27","slug":"checking-your-open-graph-tags","status":"publish","type":"post","link":"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/","title":{"rendered":"Howto: check your open graph tags for Facebook posts"},"content":{"rendered":"

Recently, Facebook has made a change for fan\/brand pages and page managers can no longer change the images, headlines, and excerpts show when including a link in a post. Instead, they rely on open graph tags.<\/p>\n

On one hand, it’s annoying because if you were linking to a page you didn’t control, sometimes you would find yourself needing to adjust the description or excerpt if there wasn’t one. On the other, I think you can see where this editing power could lead people to create and\/or propagate, wait for it, “fake \u00a0news.”<\/p>\n

For those people that manage College and University pages, this is especially frustrating. Most of the time we are sharing links, it is to pages that we control and linking somewhere in our school’s network of websites. Even then, we can’t be sure people have correctly tagged their pages.<\/p>\n

This is important because having clear, interesting copy and images on your posts not only affects us when we share our own content, other people share our content too. We want to make sure our content looks great when shown to others as well!<\/p>\n

For several years, Facebook has been using “open graph” tags, similar to the meta tags of old, as a guide to use when sharing a post. These OG tags include a post title, URL, description, image, and more. Here’s an example:<\/p>\n

\r\n<meta property="og:url" content="http:\/\/www.nytimes.com\/2015\/02\/19\/arts\/international\/when-great-minds-dont-think-alike.html" \/>;\r\n<meta property="og:type" content="article" \/>;\r\n<meta property="og:title" content="When Great Minds Don\u2019t Think Alike" \/>;\r\n<meta property="og:description" content="How much does culture influence creative thinking?" \/>\r\n<meta property="og:image" content="http:\/\/static01.nyt.com\/images\/2015\/02\/19\/arts\/international\/19iht-btnumbers19A\/19iht-btnumbers19A-facebookJumbo-v2.jpg" \/>\r\n<\/pre>\n
You can set these open graph tags manually in your code. If you use WordPress, most of the SEO plugins including Yoast will set these tags for you and allow you to customize content for them.<\/p>\n
One area where this gets tricky is with the featured image. Unless you specify a particular image in your code, the WordPress tools like Yoast use the default image you set in the plugin’s settings.<\/p>\n
Facebook and Twitter want large images as your featured images, so make sure they’re at least 200px wide by 200px high. Facebook would love that to be higher. They say in their developer area:<\/p>\n
Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images. Images can be up to 8MB in size.<\/p><\/blockquote>\n
Time to test your content<\/h3>\n
Once you’ve got all your open graph tags ready, it’s time to test. Don’t wait to check until you’re ready to post your story or tweet that, um, tweet.<\/p>\n
Facebook has a handy debugging tools that will show you what it sees when it scrapes your page and shares it.<\/p>\n
When you enter a URL into Facebook’s sharing debugger<\/a>, you get this back. These are the results for a previous post on this blog about Snapchat<\/a>.<\/p>\n
\"Example<\/a><\/p>\n
As you can see, it has a good post title and the correct description. I’m not crazy about that image, though. It’s just grabbed one from the post to share, as I don’t have a default image setup for this blog.<\/p>\n
I’m using Yoast SEO on this site, so I can easily change that image. Before I do that, I need to clear Facebook’s cache of my post. To do that, I need to paste my URL into the Batch Invalidator. This will basically retcon Facebook and make them grab a fresh version of my page. You can enter URL’s one by one here, or paste many (hence, the batch in the name.)<\/p>\n
I created a custom graphic, added it to Yoast, invalidated my URL, and re-scraped. Now, Facebook shows me this:<\/p>\n
\"Open<\/a><\/p>\n
Yes, that’s an ugly graphic, but I only spent 2 minutes on it. Now, Facebook sees the graphic I intended as opposed to a random image Yoast and\/or Facebook selected or my default image.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Facebook has great developer tools to allow you to see what your page will look like when shared on their platform.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[30,51,66],"tags":[950,1051],"yoast_head":"\nHowto: check your open graph tags for Facebook posts - HighEdWebTech<\/title>\n<meta name=\"description\" content=\"In this era of fake news, Facebook has stopped page editors from changing tags and images on shared links. You can fight back by using Open Graph tags.\" \/>\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.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Howto: check your open graph tags for Facebook posts - HighEdWebTech\" \/>\n<meta property=\"og:description\" content=\"In this era of fake news, Facebook has stopped page editors from changing tags and images on shared links. You can fight back by using Open Graph tags.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/\" \/>\n<meta property=\"og:site_name\" content=\"HighEdWebTech\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-01T14:16:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-08-01T14:22:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2017\/08\/check2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mike\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Check your open graph tags\" \/>\n<meta name=\"twitter:description\" content=\"See what Facebook and Twitter see when users share your content.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2017\/08\/check2.png\" \/>\n<meta name=\"twitter:creator\" content=\"@mrichwalsky\" \/>\n<meta name=\"twitter:site\" content=\"@mrichwalsky\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/\"},\"author\":{\"name\":\"Mike\",\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"headline\":\"Howto: check your open graph tags for Facebook posts\",\"datePublished\":\"2017-08-01T14:16:15+00:00\",\"dateModified\":\"2017-08-01T14:22:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/\"},\"wordCount\":725,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"image\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2017\/08\/Capture.png\",\"keywords\":[\"facebook\",\"open graph\"],\"articleSection\":[\"facebook\",\"Marketing\",\"social media\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/\",\"url\":\"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/\",\"name\":\"Howto: check your open graph tags for Facebook posts - HighEdWebTech\",\"isPartOf\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2017\/08\/Capture.png\",\"datePublished\":\"2017-08-01T14:16:15+00:00\",\"dateModified\":\"2017-08-01T14:22:27+00:00\",\"description\":\"In this era of fake news, Facebook has stopped page editors from changing tags and images on shared links. You can fight back by using Open Graph tags.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/#primaryimage\",\"url\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2017\/08\/Capture.png\",\"contentUrl\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2017\/08\/Capture.png\",\"width\":743,\"height\":655,\"caption\":\"Example of Facebook Sharing Debugger Output\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.highedwebtech.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Howto: check your open graph tags for Facebook posts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.highedwebtech.com\/#website\",\"url\":\"https:\/\/www.highedwebtech.com\/\",\"name\":\"HighEdWebTech\",\"description\":\"Web & Marketing for Education & Nonprofits\",\"publisher\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.highedwebtech.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\",\"name\":\"Mike\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png\",\"contentUrl\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png\",\"width\":595,\"height\":128,\"caption\":\"Mike\"},\"logo\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/mikerichwalsky\/\",\"https:\/\/twitter.com\/mrichwalsky\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Howto: check your open graph tags for Facebook posts - HighEdWebTech","description":"In this era of fake news, Facebook has stopped page editors from changing tags and images on shared links. You can fight back by using Open Graph tags.","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.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/","og_locale":"en_US","og_type":"article","og_title":"Howto: check your open graph tags for Facebook posts - HighEdWebTech","og_description":"In this era of fake news, Facebook has stopped page editors from changing tags and images on shared links. You can fight back by using Open Graph tags.","og_url":"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/","og_site_name":"HighEdWebTech","article_published_time":"2017-08-01T14:16:15+00:00","article_modified_time":"2017-08-01T14:22:27+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2017\/08\/check2.png","type":"image\/png"}],"author":"Mike","twitter_card":"summary_large_image","twitter_title":"Check your open graph tags","twitter_description":"See what Facebook and Twitter see when users share your content.","twitter_image":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2017\/08\/check2.png","twitter_creator":"@mrichwalsky","twitter_site":"@mrichwalsky","twitter_misc":{"Written by":"Mike","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/#article","isPartOf":{"@id":"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/"},"author":{"name":"Mike","@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"headline":"Howto: check your open graph tags for Facebook posts","datePublished":"2017-08-01T14:16:15+00:00","dateModified":"2017-08-01T14:22:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/"},"wordCount":725,"commentCount":0,"publisher":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"image":{"@id":"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/#primaryimage"},"thumbnailUrl":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2017\/08\/Capture.png","keywords":["facebook","open graph"],"articleSection":["facebook","Marketing","social media"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/","url":"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/","name":"Howto: check your open graph tags for Facebook posts - HighEdWebTech","isPartOf":{"@id":"https:\/\/www.highedwebtech.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/#primaryimage"},"image":{"@id":"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/#primaryimage"},"thumbnailUrl":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2017\/08\/Capture.png","datePublished":"2017-08-01T14:16:15+00:00","dateModified":"2017-08-01T14:22:27+00:00","description":"In this era of fake news, Facebook has stopped page editors from changing tags and images on shared links. You can fight back by using Open Graph tags.","breadcrumb":{"@id":"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/#primaryimage","url":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2017\/08\/Capture.png","contentUrl":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2017\/08\/Capture.png","width":743,"height":655,"caption":"Example of Facebook Sharing Debugger Output"},{"@type":"BreadcrumbList","@id":"https:\/\/www.highedwebtech.com\/2017\/08\/01\/checking-your-open-graph-tags\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.highedwebtech.com\/"},{"@type":"ListItem","position":2,"name":"Howto: check your open graph tags for Facebook posts"}]},{"@type":"WebSite","@id":"https:\/\/www.highedwebtech.com\/#website","url":"https:\/\/www.highedwebtech.com\/","name":"HighEdWebTech","description":"Web & Marketing for Education & Nonprofits","publisher":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.highedwebtech.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980","name":"Mike","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/","url":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png","contentUrl":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png","width":595,"height":128,"caption":"Mike"},"logo":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/www.instagram.com\/mikerichwalsky\/","https:\/\/twitter.com\/mrichwalsky"]}]}},"_links":{"self":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts\/5051"}],"collection":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/comments?post=5051"}],"version-history":[{"count":0,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts\/5051\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/media?parent=5051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/categories?post=5051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/tags?post=5051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}