{"id":166,"date":"2016-05-03T21:35:34","date_gmt":"2016-05-03T21:35:34","guid":{"rendered":"https:\/\/www.annawerner.de\/?p=166"},"modified":"2018-07-15T12:08:43","modified_gmt":"2018-07-15T12:08:43","slug":"displaying-the-featured-image-on-facebook","status":"publish","type":"post","link":"https:\/\/annaschneider.me\/blog\/displaying-the-featured-image-on-facebook\/","title":{"rendered":"Displaying the featured image on facebook"},"content":{"rendered":"<p>Publishing\u00a0a blog post for most bloggers automatically include posting it on facebook, twitter, and all other networks to spread the content. Unfortunately, facebook does not always pick up on the featured image and instead shows a different image, the header image or no image at all.<\/p>\n<h3>How facebook choses which image to display<\/h3>\n<p>Facebook retrieves it information using the so called <a href=\"http:\/\/ogp.me\/\">Open Graph protocol<\/a>. It basically is a standarized way to add information about a page to this page. The Open Graph (og) elements tell facebook for example the titel, the URL and the thumbnail image.<\/p>\n<p>This is how the meta information looks like for my last post. All the tags start is &#8220;og:&#8221; The &#8220;og:image&#8221; tag tells facebook precicely, which image to use for the thumbnail.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-170 aligncenter\" src=\"https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/og-metainfo-300x48.png\" alt=\"og-metainfo\" width=\"681\" height=\"109\" srcset=\"https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/og-metainfo-300x48.png 300w, https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/og-metainfo-768x124.png 768w, https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/og-metainfo-1024x166.png 1024w, https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/og-metainfo-1080x175.png 1080w, https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/og-metainfo.png 1763w\" sizes=\"(max-width: 681px) 100vw, 681px\" \/><\/p>\n<p>If the wrong image shows up,\u00a0it often happened that\u00a0there are multiple images set in the og:image tag and the featured image is smaller than the rest of the images. Facebook will then use the larger image. Other reasons to display a wrong picture are cashing plugins or a missing og meta tag for the image.\u00a0Unfortunately, the facebook debug tool doesn&#8217;t show a specific error message. So it&#8217;s important to make sure the og tags are set right for every post.<\/p>\n<p>Many SEO Plugins <a title=\"How to Install and Setup WordPress SEO Plugin by Yoast\" href=\"https:\/\/yoast.com\/wordpress\/plugins\/seo\/\">SEO by Yoast<\/a>\u00a0 automatically add the og tags to your site and therefor prevent missing thumbnails. So if you use a SEO plugin, just make sure you set the featured image in there.<\/p>\n<h3>Setting the og tags via a plugin<\/h3>\n<p>If you do not have a SEO plugin, you can make sure the og meta information is still in the header. You can use this code to <a href=\"https:\/\/codex.wordpress.org\/Writing_a_Plugin\">create a plugin<\/a> who will provide the tags in the header:<\/p>\n<p><code>\/\/Adding the Open Graph in the Language Attributes<br \/>\nfunction add_opengraph_doctype( $output ) {<br \/>\nreturn $output . ' xmlns:og=\"http:\/\/opengraphprotocol.org\/schema\/\" xmlns:fb=\"http:\/\/www.facebook.com\/2008\/fbml\"';<br \/>\n}<br \/>\nadd_filter('language_attributes', 'add_opengraph_doctype');<\/code><\/p>\n<p><code>\/\/Lets add Open Graph Meta Info<br \/>\nfunction insert_fb_in_head() {<br \/>\nglobal $post;<br \/>\nif ( !is_singular()) \/\/if it is not a post or a page<br \/>\nreturn;<br \/>\necho '&lt;meta property=\"fb:admins\" content=\"YOUR USER ID\"\/&gt;';<br \/>\necho '&lt;meta property=\"og:title\" content=\"' . get_the_title() . '\"\/&gt;';<br \/>\necho '&lt;meta property=\"og:type\" content=\"article\"\/&gt;';<br \/>\necho '&lt;meta property=\"og:url\" content=\"' . get_permalink() . '\"\/&gt;';<br \/>\necho '&lt;meta property=\"og:site_name\" content=\"Your Site NAME Goes HERE\"\/&gt;';<br \/>\nif(!has_post_thumbnail( $post-&gt;ID )) { \/\/the post does not have featured image, use a default image<br \/>\n$default_image=\"http:\/\/example.com\/image.jpg\"; \/\/replace this with a default image on your server or an image in your media library<br \/>\necho '&lt;meta property=\"og:image\" content=\"' . $default_image . '\"\/&gt;';<br \/>\n}<br \/>\nelse{<br \/>\n$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post-&gt;ID ), 'medium' );<br \/>\necho '&lt;meta property=\"og:image\" content=\"' . esc_attr( $thumbnail_src[0] ) . '\"\/&gt;';<br \/>\n}<br \/>\necho \"<br \/>\n\";<br \/>\n}<br \/>\nadd_action( 'wp_head', 'insert_fb_in_head', 5 );<\/code><br \/>\nThis should work for all new posts.<\/p>\n<h3>Using facebook debug<\/h3>\n<p>Though for already published and shared posts, facebook cashed the information once retrieved. Luckily, they offer a <a href=\"https:\/\/developers.facebook.com\/tools\/debug\/\">debug tool<\/a>. When entering the post url and pressing &#8220;debug&#8221; all the information facebook has gets visible. If the wrong image is still displayed here (which is quite likely) scroll all the way down and go to the\u00a0<a href=\"https:\/\/developers.facebook.com\/tools\/debug\/og\/object\/\">Open Graph Object Debugger<\/a>. This tool allows to make facebook &#8220;fetch new scrape information&#8221;. It will search your post again for the og tags and update its own information.<\/p>\n<p><img decoding=\"async\" class=\" wp-image-174 alignright\" src=\"https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/Facebook-Refresh-Share-Attachment-266x300.png\" alt=\"Facebook Refresh Share Attachment\" width=\"181\" height=\"162\" \/>If you already posted on facebook and you don&#8217;t want to post again with the right image, you can navigate to you post, klick on the small error and select &#8220;Refresh share attachment&#8221;. This will refresh the information facebook provides for you blog post and the new image should come up now.<\/p>\n<p>That trick fixes the problem 99% of the time, so make sure to keep that in mind when FB isn\u2019t fetching your image properly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Publishing\u00a0a blog post for most bloggers automatically include posting it on facebook, twitter, and all other networks to spread the content. Unfortunately, facebook does not always pick up on the featured image and instead shows a different image, the header image or no image at all. How facebook choses which image to display Facebook retrieves [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","jetpack_post_was_ever_published":false,"footnotes":""},"categories":[3,7],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Displaying the featured image on facebook - Anna Schneider<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/annaschneider.me\/blog\/displaying-the-featured-image-on-facebook\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Displaying the featured image on facebook - Anna Schneider\" \/>\n<meta property=\"og:description\" content=\"Publishing\u00a0a blog post for most bloggers automatically include posting it on facebook, twitter, and all other networks to spread the content. Unfortunately, facebook does not always pick up on the featured image and instead shows a different image, the header image or no image at all. How facebook choses which image to display Facebook retrieves [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/annaschneider.me\/blog\/displaying-the-featured-image-on-facebook\/\" \/>\n<meta property=\"og:site_name\" content=\"Anna Schneider\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-03T21:35:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-07-15T12:08:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/og-metainfo-300x48.png\" \/>\n<meta name=\"author\" content=\"anna\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"anna\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/annaschneider.me\/blog\/displaying-the-featured-image-on-facebook\/\",\"url\":\"https:\/\/annaschneider.me\/blog\/displaying-the-featured-image-on-facebook\/\",\"name\":\"Displaying the featured image on facebook - Anna Schneider\",\"isPartOf\":{\"@id\":\"https:\/\/annaschneider.me\/blog\/#website\"},\"datePublished\":\"2016-05-03T21:35:34+00:00\",\"dateModified\":\"2018-07-15T12:08:43+00:00\",\"author\":{\"@id\":\"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/aed03681a2dc960294c5442477a37844\"},\"breadcrumb\":{\"@id\":\"https:\/\/annaschneider.me\/blog\/displaying-the-featured-image-on-facebook\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/annaschneider.me\/blog\/displaying-the-featured-image-on-facebook\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/annaschneider.me\/blog\/displaying-the-featured-image-on-facebook\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/annaschneider.me\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Displaying the featured image on facebook\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/annaschneider.me\/blog\/#website\",\"url\":\"https:\/\/annaschneider.me\/blog\/\",\"name\":\"Anna Schneider\",\"description\":\"Front-End Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/annaschneider.me\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/aed03681a2dc960294c5442477a37844\",\"name\":\"anna\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6c797411dcaa0edbe0f7d081dd142432?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6c797411dcaa0edbe0f7d081dd142432?s=96&d=mm&r=g\",\"caption\":\"anna\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Displaying the featured image on facebook - Anna Schneider","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:\/\/annaschneider.me\/blog\/displaying-the-featured-image-on-facebook\/","og_locale":"en_US","og_type":"article","og_title":"Displaying the featured image on facebook - Anna Schneider","og_description":"Publishing\u00a0a blog post for most bloggers automatically include posting it on facebook, twitter, and all other networks to spread the content. Unfortunately, facebook does not always pick up on the featured image and instead shows a different image, the header image or no image at all. How facebook choses which image to display Facebook retrieves [&hellip;]","og_url":"https:\/\/annaschneider.me\/blog\/displaying-the-featured-image-on-facebook\/","og_site_name":"Anna Schneider","article_published_time":"2016-05-03T21:35:34+00:00","article_modified_time":"2018-07-15T12:08:43+00:00","og_image":[{"url":"https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/og-metainfo-300x48.png"}],"author":"anna","twitter_card":"summary_large_image","twitter_misc":{"Written by":"anna","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/annaschneider.me\/blog\/displaying-the-featured-image-on-facebook\/","url":"https:\/\/annaschneider.me\/blog\/displaying-the-featured-image-on-facebook\/","name":"Displaying the featured image on facebook - Anna Schneider","isPartOf":{"@id":"https:\/\/annaschneider.me\/blog\/#website"},"datePublished":"2016-05-03T21:35:34+00:00","dateModified":"2018-07-15T12:08:43+00:00","author":{"@id":"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/aed03681a2dc960294c5442477a37844"},"breadcrumb":{"@id":"https:\/\/annaschneider.me\/blog\/displaying-the-featured-image-on-facebook\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/annaschneider.me\/blog\/displaying-the-featured-image-on-facebook\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/annaschneider.me\/blog\/displaying-the-featured-image-on-facebook\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/annaschneider.me\/blog\/"},{"@type":"ListItem","position":2,"name":"Displaying the featured image on facebook"}]},{"@type":"WebSite","@id":"https:\/\/annaschneider.me\/blog\/#website","url":"https:\/\/annaschneider.me\/blog\/","name":"Anna Schneider","description":"Front-End Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/annaschneider.me\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/aed03681a2dc960294c5442477a37844","name":"anna","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6c797411dcaa0edbe0f7d081dd142432?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6c797411dcaa0edbe0f7d081dd142432?s=96&d=mm&r=g","caption":"anna"}}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9x5Dx-2G","jetpack-related-posts":[{"id":48624,"url":"https:\/\/annaschneider.me\/blog\/finally-wordpress-image-editing-at-its-best\/","url_meta":{"origin":166,"position":0},"title":"Finally &#8211; WordPress image editing at its best","author":"anna","date":"May 31, 2022","format":false,"excerpt":"Blogs live not only from their written content, but many of those out there live off their pictures. The most known examples coming to mind are travel and food blogs, fashion and jewelry, sports and news and that\u2019s just the big keywords.\u00a0 For most creators, this means they take a\u2026","rel":"","context":"In &quot;WordPress Tips&quot;","block_context":{"text":"WordPress Tips","link":"https:\/\/annaschneider.me\/blog\/wordpress-tips\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":48553,"url":"https:\/\/annaschneider.me\/blog\/plugin-image-slider-block\/","url_meta":{"origin":166,"position":1},"title":"Plugin: Image Slider Block","author":"anna","date":"March 26, 2019","format":false,"excerpt":"Download from WordPress.org A simple image slider block plugin for Gutenberg blocks Create a fully responsive image slider gallery as a block. Features:\u2013 Simple Image Slider\u2013 Enable\/Disable arrow navigation\u2013 Enable\/Disable dot navigation\u2013 Enable\/Disable autoplay\u2013 Enable\/Disable image crop to same height\u2013 Set autoplay speed\u2013 Fade or scroll effect\u2013 Image linking","rel":"","context":"In &quot;WordPress Tips&quot;","block_context":{"text":"WordPress Tips","link":"https:\/\/annaschneider.me\/blog\/wordpress-tips\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2019\/03\/image-slider-block-banner.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2019\/03\/image-slider-block-banner.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2019\/03\/image-slider-block-banner.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2019\/03\/image-slider-block-banner.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2019\/03\/image-slider-block-banner.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2019\/03\/image-slider-block-banner.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":48639,"url":"https:\/\/annaschneider.me\/blog\/adding-custom-content-with-javascript-to-wordpress-media-modals\/","url_meta":{"origin":166,"position":2},"title":"Adding custom content to WordPress media modals","author":"anna","date":"June 13, 2022","format":false,"excerpt":"This is a short tutorial on extending the WordPress media modal with your own content. Here we add a button in the media upload image details section. The wp.media class When adding, choosing and editing images in WordPress, most of the time you will see a modal opening up. This\u2026","rel":"","context":"In &quot;WordPress Tips&quot;","block_context":{"text":"WordPress Tips","link":"https:\/\/annaschneider.me\/blog\/wordpress-tips\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":191,"url":"https:\/\/annaschneider.me\/blog\/the-storefront-parallax-image-plugin\/","url_meta":{"origin":166,"position":3},"title":"The Storefront Parallax Image Plugin","author":"anna","date":"May 13, 2016","format":false,"excerpt":"The Prallax effect is a nice add-on for modern websites. While adding some interesting looks, it's not obtrusive and it makes scrolling down a page more fun - at least in my opinion. WooThemes has a nice extension that integrates with Storefront:\u00a0Storefront Parallax Hero. There are two different ways, to\u2026","rel":"","context":"In &quot;Customization&quot;","block_context":{"text":"Customization","link":"https:\/\/annaschneider.me\/blog\/customization\/"},"img":{"alt_text":"ParallaxEffect","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/ParallaxEffect-300x154.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/ParallaxEffect-300x154.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/ParallaxEffect-300x154.gif?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":147,"url":"https:\/\/annaschneider.me\/blog\/why-i-love-working-with-woothemes-canvas\/","url_meta":{"origin":166,"position":4},"title":"Why I love working with WooThemes Canvas","author":"anna","date":"March 18, 2016","format":false,"excerpt":"The Canvas theme Canvas describes itself as: \"a\u00a0clean, minimalistic and beautiful WordPress theme framework or so called starter theme that you can use as-is or customize it via Theme Options. Canvas Theme Options provides with over 100 different values you can tweak to change font size, color, background, widget styling,\u2026","rel":"","context":"In &quot;Customization&quot;","block_context":{"text":"Customization","link":"https:\/\/annaschneider.me\/blog\/customization\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":48341,"url":"https:\/\/annaschneider.me\/blog\/custom-gutenberg-blocks-for-custom-websites\/","url_meta":{"origin":166,"position":5},"title":"Custom Gutenberg Blocks for Custom Websites","author":"anna","date":"September 11, 2018","format":false,"excerpt":"It often occurs, that one is building a website for a customer who has very specific design needs. And it happens even more, that the people publishing posts are not the ones designing the looks. So writers don\u2019t know how things are supposed to be, yet they should still be\u2026","rel":"","context":"In &quot;Front-End Development&quot;","block_context":{"text":"Front-End Development","link":"https:\/\/annaschneider.me\/blog\/front-end-development\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/posts\/166"}],"collection":[{"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/comments?post=166"}],"version-history":[{"count":3,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/posts\/166\/revisions"}],"predecessor-version":[{"id":48313,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/posts\/166\/revisions\/48313"}],"wp:attachment":[{"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/media?parent=166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/categories?post=166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/tags?post=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}