{"id":340136,"date":"2021-05-14T13:34:49","date_gmt":"2021-05-14T20:34:49","guid":{"rendered":"https:\/\/css-tricks.com\/?p=340136"},"modified":"2021-09-10T06:36:06","modified_gmt":"2021-09-10T13:36:06","slug":"auto-generated-social-media-images","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/auto-generated-social-media-images\/","title":{"rendered":"Auto-Generated Social Media Images"},"content":{"rendered":"\n<p>I&#8217;ve been thinking about social media images <a href=\"https:\/\/css-tricks.com\/tag\/social-media-images\/\">again<\/a>. You know, the images that (can) show up when you share a link in places like Twitter, Facebook, or iMessage. You&#8217;re essentially leaving money on the table without them, because they turn a regular post with a little ol&#8217; link in it into a post with a big honkin&#8217; attention grabbin&#8217; image on it, with a massive clickable area. Of any image on a website, the social media image might be the #1 most viewed, most remembered, most network-requested image on the site.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>It&#8217;s essentially this bit of HTML that makes them happen:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;meta property=\"og:image\" content=\"\/images\/social-media-image.jpg\" \/><\/code><\/pre>\n\n\n\n<p>But make sure to <a href=\"https:\/\/css-tricks.com\/essential-meta-tags-social-media\/\">read up on it<\/a> as there are a bunch other other HTML tags to get right. <\/p>\n\n\n\n<p>I think I&#8217;m thinking about it again because GitHub seems to have new social media cards. These are new, right?<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"952\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-06-at-10.14.23-AM.png?resize=1024%2C952&#038;ssl=1\" alt=\"\" class=\"wp-image-340164\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-06-at-10.14.23-AM.png?resize=1024%2C952&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-06-at-10.14.23-AM.png?resize=300%2C279&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-06-at-10.14.23-AM.png?resize=768%2C714&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-06-at-10.14.23-AM.png?resize=1000%2C929&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-06-at-10.14.23-AM.png?w=1188&amp;ssl=1 1188w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption><a href=\"https:\/\/twitter.com\/ladyleet\/status\/1390353733868040196\" rel=\"noopener\">tweet<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"878\" height=\"1024\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-07-at-10.01.09-AM.png?resize=878%2C1024&#038;ssl=1\" alt=\"\" class=\"wp-image-340165\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-07-at-10.01.09-AM.png?resize=878%2C1024&amp;ssl=1 878w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-07-at-10.01.09-AM.png?resize=257%2C300&amp;ssl=1 257w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-07-at-10.01.09-AM.png?resize=768%2C896&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-07-at-10.01.09-AM.png?resize=1000%2C1167&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-07-at-10.01.09-AM.png?w=1188&amp;ssl=1 1188w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption><a href=\"https:\/\/twitter.com\/erikkroes\/status\/1389889553872392192\" rel=\"noopener\">tweet<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Those GitHub social media images are clearly programmatically generated. Check out <a href=\"https:\/\/opengraph.githubassets.com\/f55622dadf147f30f9a583a9be18924ac4567e2f8169cab9af601ecb204ec77f\/fempire\/resources\" rel=\"noopener\">an example URL<\/a>. <\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-automation\">Automation<\/h3>\n\n\n<p>While I think you can get a lot of bang out of a totally hand-crafted bespoke-designed social media image, that&#8217;s not practical for sites with lots of pages: blogs, eCommerce&#8230; you know what I mean. The trick for sites like that is to automate their creation via templating somehow. I&#8217;ve mentioned other people&#8217;s takes on this in the <a href=\"https:\/\/css-tricks.com\/social-cards-as-a-service\/\">past<\/a>, but let&#8217;s recap:<\/p>\n\n\n\n<ul><li>Drew McLellan: <a href=\"https:\/\/24ways.org\/2018\/dynamic-social-sharing-images\/\" rel=\"noopener\">Dynamic Social Sharing Images<\/a><\/li><li>Vercel: <a href=\"https:\/\/og-image.vercel.app\/\" rel=\"noopener\">Open Graph Image as a Service<\/a><\/li><li>Phil Hawksworth: <a href=\"https:\/\/github.com\/philhawksworth\/social-image-generator\" rel=\"noopener\">social-image-generator<\/a><\/li><li>Ryan Filler: <a href=\"https:\/\/www.ryanfiller.com\/blog\/automatic-social-share-images\/\" rel=\"noopener\">Automatic Social Share Images<\/a><\/li><\/ul>\n\n\n\n<p>You know what all those have in common? <a href=\"https:\/\/github.com\/puppeteer\/puppeteer\" rel=\"noopener\">Puppeteer<\/a>.<\/p>\n\n\n\n<p>Puppeteer is a way to spin up and control a headless copy of Chrome. It has this <a href=\"https:\/\/pptr.dev\/#?product=Puppeteer&amp;version=v5.2.1&amp;show=api-pagescreenshotoptions\" rel=\"noopener\">incredibly useful feature<\/a> of being able to take a screenshot of the browser window: <code>await page.screenshot({path: 'screenshot.png'});<\/code>. That&#8217;s how <a href=\"https:\/\/github.com\/chriscoyier\/coding-fonts\/blob\/master\/takeScreenshots.js\" rel=\"noopener\">our coding fonts website does the screenshots<\/a>. The screenshotting idea is what gets people&#8217;s minds going. Why not design a social media template in HTML and CSS, then ask Puppeteer to screenshot it, and use <em>that<\/em> as the social media image?<\/p>\n\n\n\n<p>I love this idea, but it means having access to a Node server (Puppeteer runs on Node) that is either running all the time, or that you can hit as <a href=\"https:\/\/serverless.css-tricks.com\/services\/functions\">a serverless function<\/a>. So it&#8217;s no wonder that this idea has resonated with the Jamstack crowd who are already used to doing things like running build processes and leveraging serverless functions. <\/p>\n\n\n\n<p>I think the idea of &#8220;hosting&#8221; the serverless function at a URL\u2009\u2014\u2009and passing it the dynamic values of what to include in the screenshot via URL parameter is also clever.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-svg-route\">The SVG route<\/h3>\n\n\n<p>I kinda dig the idea of using SVG as the thing that you template for social media images, partially because it has such fixed coordinates to design inside of, which matches my mental model of making the exact dimensions you need to design social media images. I like <a href=\"https:\/\/css-tricks.com\/swipey-image-grids\/\">how SVG is so composable<\/a>.<\/p>\n\n\n\n<p>George Francis blogged <a href=\"https:\/\/georgefrancis.dev\/writing\/generative-svg-social-images\/\" rel=\"noopener\">&#8220;Create Your Own Generative SVG Social Images&#8221;<\/a> which is a wonderful example of all this coming together nicely, with a touch of randomization and whimsy. I like the <code>contenteditable<\/code> trick as well, making it a useful tool for one-off screenshotting.<\/p>\n\n\n\n<p>I&#8217;ve dabbled in dynamic SVG creation as well: check out <a href=\"https:\/\/conferences.css-tricks.com\/conferences\/2021-magnoliajs\/\">this conference page<\/a> on our Conferences site. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-07-at-10.13.36@2x.png?resize=724%2C719&#038;ssl=1\" alt=\"\" class=\"wp-image-340168\" width=\"724\" height=\"719\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-07-at-10.13.36@2x.png?resize=1024%2C1017&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-07-at-10.13.36@2x.png?resize=300%2C298&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-07-at-10.13.36@2x.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-07-at-10.13.36@2x.png?resize=768%2C763&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-07-at-10.13.36@2x.png?resize=1536%2C1525&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-07-at-10.13.36@2x.png?resize=2048%2C2034&amp;ssl=1 2048w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-07-at-10.13.36@2x.png?resize=1000%2C993&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-07-at-10.13.36@2x.png?resize=100%2C100&amp;ssl=1 100w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-07-at-10.13.36@2x.png?w=3000&amp;ssl=1 3000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Unfortunately, SVG isn&#8217;t a supported image format for social media images. Here&#8217;s Twitter specifically:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p>URL of image to use in the card. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.<\/p><cite><a href=\"https:\/\/developer.twitter.com\/en\/docs\/twitter-for-websites\/cards\/overview\/markup\" rel=\"noopener\">Twitter docs<\/a><\/cite><\/blockquote>\n\n\n\n<p>Still, composing\/templating in SVG can be cool. You convert it to another format for final usage. Once you <em>have<\/em> an SVG, the conversion from SVG to PNG is almost trivially easy. In my case, I used <a href=\"https:\/\/www.npmjs.com\/package\/svg2png\" rel=\"noopener\">svg2png<\/a> and <a href=\"https:\/\/github.com\/CSS-Tricks\/conferences\/blob\/master\/tasks\/svg2png.js\" rel=\"noopener\">a very tiny Gulp task<\/a> that runs during the build process.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-about-wordpress\">What about WordPress?<\/h3>\n\n\n<p>I don&#8217;t have a build process for my WordPress site\u2009\u2014\u2009at least not one that runs every time I publish or update a post. But WordPress would benefit <em>the most<\/em> (in my world) from dynamic social media images. <\/p>\n\n\n\n<p>It&#8217;s not that I don&#8217;t have them now. <a href=\"https:\/\/jetpack.com\/support\/social\/?aff=8638\" rel=\"noopener\">Jetpack goes a long way<\/a> in making this work nicely. It makes the &#8220;featured image&#8221; of the post the social media image, allows me to preview it, and auto-posts to social networks. <a href=\"https:\/\/www.youtube.com\/watch?v=WEKRuohH43A\" rel=\"noopener\">Here&#8217;s a video I did on that.<\/a> That&#8217;s gonna get me to a place where the featured images are attached and showing nicely.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-07-at-12.12.12-PM.png?resize=567%2C533&#038;ssl=1\" alt=\"\" class=\"wp-image-340378\" width=\"567\" height=\"533\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-07-at-12.12.12-PM.png?w=1178&amp;ssl=1 1178w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-07-at-12.12.12-PM.png?resize=300%2C283&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-07-at-12.12.12-PM.png?resize=1024%2C965&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-07-at-12.12.12-PM.png?resize=1000%2C942&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>But it doesn&#8217;t automate their creation. Sometimes a bespoke graphic alone is the way to go (the one above might be a good example of that), but perhaps more often a nicely templated card is the way to go. <\/p>\n\n\n\n<p>Fortunately I caught wind of <a href=\"https:\/\/socialimagegenerator.com\/\" rel=\"noopener\">Social Image Generator<\/a> for WordPress from Daniel Post. Look how fancy:<\/p>\n\n\n\n<figure class=\"wp-block-video ticss-a205d3a8\"><video controls muted src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2021\/05\/editor.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>This is exactly what WordPress needs! <\/p>\n\n\n\n<p>Daniel himself helped me create a custom template just for CSS-Tricks. I had big dreams of having a bunch of templates to choose from that incorporate the title, author, chosen quotes, featured images, and other things. So far, we&#8217;ve settled on just two, a template with the title and author, and a template with a featured image, title, and author. The images are created from that metadata on the fly:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-10-at-4.49.26-PM.png?resize=369%2C452&#038;ssl=1\" alt=\"\" class=\"wp-image-340380\" width=\"369\" height=\"452\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-10-at-4.49.26-PM.png?w=712&amp;ssl=1 712w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-10-at-4.49.26-PM.png?resize=245%2C300&amp;ssl=1 245w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>So meta.<\/figcaption><\/figure>\n\n\n\n<p>This ain&#8217;t Puppeteer. This ain&#8217;t even the PhantomJS powered svgtopng. This is PHP generated images! And not even <a href=\"https:\/\/imagemagick.org\/index.php\" rel=\"noopener\">ImageMagick<\/a>, but <a href=\"https:\/\/www.php.net\/manual\/en\/intro.image.php\" rel=\"noopener\">straight up GD<\/a>, the thing built right into PHP. So these images are not created in any kind of syntax that would likely feel comfortable to a front-end developer. You&#8217;re probably better off using one of the templates, but if you wanna see how my custom one was coded (by Daniel), lemme know and I can post the code somewhere public. <\/p>\n\n\n\n<p>Pretty cool result, right?<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-12-at-3.39.02-PM.png?resize=558%2C484&#038;ssl=1\" alt=\"\" class=\"wp-image-340501\" width=\"558\" height=\"484\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-12-at-3.39.02-PM.png?w=1176&amp;ssl=1 1176w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-12-at-3.39.02-PM.png?resize=300%2C261&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-12-at-3.39.02-PM.png?resize=1024%2C890&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-12-at-3.39.02-PM.png?resize=768%2C667&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-12-at-3.39.02-PM.png?resize=1000%2C869&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption><a href=\"https:\/\/twitter.com\/css\/status\/1391758245178511366\" rel=\"noopener\">Tweet<\/a><\/figcaption><\/figure>\n\n\n\n<p>I get why it had to be built this way: it&#8217;s using technology that will work literally anywhere WordPress can run. That&#8217;s very much in the WordPress spirit. But it does make me wish creating the templates could be done in a more modern way. Like wouldn&#8217;t it be cool if the template for your social media images was just like <code>social-image.php<\/code> at the root of the theme like any other template file? And you template and design that page with all the normal WordPress APIs? Like an <a href=\"https:\/\/www.advancedcustomfields.com\/resources\/blocks\/\" rel=\"noopener\">ACF Block<\/a> almost? And it gets screenshot and used? I&#8217;ll answer for you: Yes, that would be cool.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve been thinking about social media images again. You know, the images that (can) show up when you share a link in places like Twitter, Facebook, or iMessage. You&#8217;re essentially leaving money on the table without them, because they turn a regular post with a little ol&#8217; link in it into a post with a [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":340501,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[18937],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-12-at-3.39.02-PM.png?fit=1176%2C1022&ssl=1","jetpack-related-posts":[{"id":345518,"url":"https:\/\/css-tricks.com\/github-explains-the-open-graph-images\/","url_meta":{"origin":340136,"position":0},"title":"GitHub Explains the Open Graph Images","date":"July 29, 2021","format":false,"excerpt":"An explanation of those new GitHub social media images: [...] our custom Open Graph image service is a little Node.js app that uses the GitHub GraphQL API to collect data, generates some HTML from a template, and pipes it to\u00a0Puppeteer\u00a0to \u201ctake a screenshot\u201d of that HTML.Jason Etcovich on The GitHub\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/framework-open-graph-images_fig-3-godot-twitter-card-1.webp?fit=1024%2C512&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":350830,"url":"https:\/\/css-tricks.com\/if-i-work-really-hard-on-my-open-graph-images-people-will-share-my-blog-posts\/","url_meta":{"origin":340136,"position":1},"title":"If I work really hard on my Open Graph images, people will share my blog posts.","date":"September 2, 2021","format":false,"excerpt":"Zach did that thing where each of his blog posts has a special URL with the design of social image card that is screenshat by a headless browser (like Puppeteer) and used as a true meta Open Graph image, meaning it's displayed on Twitter, Facebook, iMessage, Slack, Discord, and whatever\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/Screen-Shot-2021-08-29-at-1.08.19-PM.png?fit=1200%2C781&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351726,"url":"https:\/\/css-tricks.com\/social-image-generator-jetpack\/","url_meta":{"origin":340136,"position":2},"title":"Social Image Generator + Jetpack","date":"September 13, 2021","format":false,"excerpt":"I feel like my quest to make sure this site had pretty sweet (and automatically-generated) social media images (e.g. Open Graph) came to a close once I found Social Image Generator. The trajectory there was that I ended up talking about it far too much on ShopTalk, to the point\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-11.51.02-PM-1.png?fit=1200%2C710&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":331731,"url":"https:\/\/css-tricks.com\/automatic-social-share-images\/","url_meta":{"origin":340136,"position":3},"title":"Automatic Social Share Images","date":"December 29, 2020","format":false,"excerpt":"It's a pretty low-effort thing to get a big fancy link preview on social media. Toss a handful of specific <meta> tags on a URL and you get a big image-title-description thing. Here's Twitter's version of an article on this site: It's particularly low-effort on this site, as our Yoast\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/final-card-image.png?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":362991,"url":"https:\/\/css-tricks.com\/a-chrome-extension-for-cloudinary-that-helps-you-pluck-out-useful-media-urls-from-your-library-quickly\/","url_meta":{"origin":340136,"position":4},"title":"A Chrome Extension for Cloudinary That Helps You Pluck Out Useful Media URLs From Your Library Quickly","date":"February 10, 2022","format":false,"excerpt":"Cloudinary is a host for your digital assets like images and video. If you don't already know them, you should, because you can build it into the asset management you almost certainly need to do if you run any size of website. Cloudinary helps you serve the assets as efficiently\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/CleanShot-2022-01-31-at-15.45.08@2x.png?fit=1200%2C794&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":354296,"url":"https:\/\/css-tricks.com\/create-your-own-automated-social-images-with-resoc\/","url_meta":{"origin":340136,"position":5},"title":"Create Your Own Automated Social Images With Resoc","date":"October 29, 2021","format":false,"excerpt":"There has been a lot of talk about automated social images lately. GitHub has created its own. A WordPress plugin has been acquired by Jetpack. There is definitely interest! People like Ryan Filler and Zach Leatherman have implemented social images on their websites. They had to code a lot of\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/social-image.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/340136"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=340136"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/340136\/revisions"}],"predecessor-version":[{"id":351729,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/340136\/revisions\/351729"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/340501"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=340136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=340136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=340136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}