{"id":331731,"date":"2020-12-29T08:00:55","date_gmt":"2020-12-29T16:00:55","guid":{"rendered":"https:\/\/css-tricks.com\/?p=331731"},"modified":"2021-05-07T10:17:41","modified_gmt":"2021-05-07T17:17:41","slug":"automatic-social-share-images","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/automatic-social-share-images\/","title":{"rendered":"Automatic Social Share Images"},"content":{"rendered":"\n

It’s a pretty low-effort thing to get a big fancy link preview on social media. Toss a handful of specific <meta><\/code> tags on a URL and you get a big image-title-description thing. Here’s Twitter’s version of an article on this site:<\/p>\n\n\n\n\n\n\n\n

\"\"<\/figure>\n\n\n\n

It’s particularly low-effort on this site, as our Yoast SEO plugin<\/a> puts the correct tags in place automatically. The image it uses by default is the “featured image” feature of WordPress, which we use anyway. <\/p>\n\n\n\n

I’m a fan of that kind of improvement for that so little work. Jetpack helps the process<\/a>, too, by automating things.<\/p>\n\n\n\n

But let’s say you don’t use these particular tools. Maybe creating an image per blog post isn’t even something you’re interested in doing, but you still want something nice to show for the social media preview.<\/p>\n\n\n\n

We’ve covered this before.<\/a> You can design the “image” with HTML and CSS, using content and metadata you already have from the blog post. You can turn it into an image with Puppeteer<\/a> (or the like<\/a>) and then use that for the image in the meta tags. <\/p>\n\n\n\n

Ryan Filler has detailed out that process<\/a> the best I’ve seen so far. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
  1. Create a route on your site that takes dynamic data from the URL to create the layout<\/li>
  2. Make a cloud function that hits that route, turns it into an image, and uploads it to Cloudinary (for optimizing and serving)<\/li>
  3. Any time the image is requested, check to see if you’ve already created it. If so, serve it from Cloudinary; if not, make it, then serve it.<\/li><\/ol>\n\n\n\n

    This stuff gets my brain cooking. What if we didn’t need to create a raster image at all?<\/p>\n\n\n\n

    Maybe rather than needing to create a raster image we could use SVG? SVG would be easy to template, and we know <img src=\"file.svg\" alt=\"\" \/><\/code> is extremely capable<\/a>. But… Twitter says<\/a>:<\/p>\n\n\n\n

    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><\/blockquote>\n\n\n\n

    Fifty sad faces, Twitter. But let’s continue this thought experiment. <\/p>\n\n\n\n

    We need raster. The <canvas><\/code> element can spit out a PNG<\/a>. What if the cloud function that you talked to was an actual browser? Richard Young called that a “browser function”<\/a> last year. Maybe the browser-in-the-cloud could do that SVG templating we’re dreaming of, but then draw it to a canvas<\/a> and spit out that PNG. <\/p>\n\n\n\n

    Meh, I’m not sure that solves anything since you’d still have the Puppeteer dependency and, if anything, this just complicates how you make the image. Still, something appeals to me about being able to use native browser abilities at the server level.<\/p>\n","protected":false},"excerpt":{"rendered":"

    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:<\/p>\n","protected":false},"author":3,"featured_media":331734,"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":[17],"tags":[1409,18876,18937],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/final-card-image.png?fit=1200%2C630&ssl=1","jetpack-related-posts":[{"id":340136,"url":"https:\/\/css-tricks.com\/auto-generated-social-media-images\/","url_meta":{"origin":331731,"position":0},"title":"Auto-Generated Social Media Images","date":"May 14, 2021","format":false,"excerpt":"I'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're essentially leaving money on the table without them, because they turn a regular post with a little ol' link in it\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"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&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":331731,"position":1},"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 "Article"","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":[]},{"id":343850,"url":"https:\/\/css-tricks.com\/meta-theme-color-and-trickery\/","url_meta":{"origin":331731,"position":2},"title":"Meta Theme Color and Trickery","date":"July 13, 2021","format":false,"excerpt":"Starting with Version 15, Safari supports the theme-color tag both on macOS and iOS. That\u2019s exciting news because now the first desktop browser supports this tag and it also supports the media attribute and the prefers-color-scheme media feature. I never really took much note of the theme-color meta\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/meta-theme-color.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":242956,"url":"https:\/\/css-tricks.com\/essential-meta-tags-social-media\/","url_meta":{"origin":331731,"position":3},"title":"The Essential Meta Tags for Social Media","date":"June 20, 2016","format":false,"excerpt":"These days, almost every website encourages visitors to share its pages on social media. We\u2019ve all seen the ubiquitous Facebook and Twitter icons, among others, just begging to be clicked. This comes as no surprise as sharing via social media, the internet incarnation of word-of-mouth, is one of the most\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":340403,"url":"https:\/\/css-tricks.com\/html-boilerplates\/","url_meta":{"origin":331731,"position":4},"title":"HTML Boilerplates","date":"May 14, 2021","format":false,"excerpt":"Manuel Matuzovi\u0107 goes line-by-line through a boilerplate HTML document. I like it. It's a good reference and has a lot of the same type of stuff I tend to put in the main HTML template. It makes me think about how opinionated this kind of thing can be. Dang near\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-11-at-4.43.59-PM.png?fit=1200%2C673&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":331731,"position":5},"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 "Link"","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":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/final-card-image.png?fit=1024%2C538&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/331731"}],"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=331731"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/331731\/revisions"}],"predecessor-version":[{"id":331855,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/331731\/revisions\/331855"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/331734"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=331731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=331731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=331731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}