draw it to a canvas<\/a> and spit out that PNG. <\/p>\n\n\n\nMeh, 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}]}}