• Auto-generated Social Media Images
  • Originally by Chris Coyier
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Zz Zhaojin
  • Proofreader: KimYangOfCat, Chorer

Describe automatically generated social media images

I always think about social media images. These images are visible when you share links on platforms like Twitter, Facebook or iMessage. Without these images, your links will basically have a hard time getting attention because they can turn a normal post with a small link into a post with an eye-catching image and a large clickable area. Of all the images on the site, the images presented by social media are likely to be the most viewed, remembered, and sought after images on the site.

Essentially the following HTML makes them work:

<meta property="og:image" content="/images/social-media-image.jpg"/>
Copy the code

Make sure you understand it, because there are a bunch of other HTML tags you need to figure out.

GitHub seems to have a new social media card, so I’m thinking about it again. Here are the new cards:

tweet

tweet

Those GitHub social media images were clearly procedurally generated. Take a look at an example URL.

Automatic generation

While I know there are many advantages to having a hand-crafted custom designed social media image, it’s not practical for sites with lots of pages: blogs, e-commerce sites, etc. For such sites, it is best to create them automatically through templates. I’ve mentioned what others have done in this area before, so let’s review:

  • Drew McLellan: Social sharing images in motion
  • Vercel: Open atlas images as a service
  • Phil Hawksworth: Social image generation tool
  • Ryan Filler: Automatic sharing of social images

You know what they all have in common? Puppeteer is used.

Puppeteer allows easy control of Headless Chrome. Screenshot ({path: ‘screenshot.png’}); screenshot({path: ‘screenshot.png’}) . This is how our coding font site takes screenshots. This approach to screenshots makes one think it’s a good idea — why not design a social media template in HTML and CSS and have Puppeteer take screenshots of it and use them as social media images?

I like the idea, but it means it needs access to a Node service (Puppeteer runs on Node) that is either always running or can be used as a serverless function. So it’s no wonder that this idea resonates with the Jamstack crowd, who are used to doing things like running build processes and leveraging serverless functionality.

I think the idea of hosting serverless functionality on a URL and passing it the dynamic values contained in the screenshots via URL parameters is also smart.

Using SVG

I kind of like the idea of using SVG as a template for social media images, partly because we can design based on very fixed coordinates, which fits in with my mental model of the exact dimensions I need to design social media images. I like the composability of SVG.

George Francis’ blog post “Create your own SVG to generate social media images” is a great example of all this coming together nicely with randomness and whimsy. I also like contenteditable techniques, making ita useful tool for one-time screenshots.

I also co-wrote dynamic SVG: check out this conference page on our conference website.

Unfortunately, SVG is not a supported image format for social media images. Twitter explicitly stated the following:

Use the URL of an image in a social media image. The image must be less than 5MB. JPG, PNG, WEBP, and GIF formats. Only the first frame of a GIF animation will be used. SVG is not supported.

Twitter documents

However, composite design in SVG is also good. You can convert it to another format for eventual use. Once you have SVG, converting from SVG to PNG is almost a breeze. In my example, I use SVg2PNG and a small Gulp task that runs during the build process.

How to use WordPress

I haven’t built a program for my WordPress site — at least not one that runs every time I post or update an article — but I think WordPress would benefit the most (in my case) from dynamic social media images.

It’s not like I don’t have these things right now. Jetpack has been exploring this for a long time. It featured an image of a post as a social media image, allowing me to preview it and automatically post it to the social network. Below is a video I made where you can see the featured images loaded and displayed nicely.

But that doesn’t make their creation automatic. Sometimes custom images are the way to go (the one above might be a good example), but more often than not, a good template image is the way to go.

Luckily, I learned about the social image generator for WordPress from Daniel Post.

This is exactly what WordPress needs!

Daniel personally helped me create a custom template for the CSS-Tricks website. It’s always been a big dream of mine to have a bunch of templates to choose from, including titles, authors, selected citations, featured images, and other things. So far, we’ve only identified two templates, one with a title and author, and one with a featured image, title, and author. Images are created on the spot based on this metadata:

So clever.

This is not Puppeteer, or even Phantomjs-driven Svgtopng. This is a PHP generated image! Not even ImageMagick, but straight GD, something built directly into PHP. So these images are not created in any syntax and may feel comfortable to the front-end developer. You’re better off using only one of these templates, but if you want to see how my custom templates are coded (written by Daniel), let me know, I can open source the code.

Cool result, right?

Tweet

I understand why it has to be built this way: the technology it uses will work anywhere WordPress can run. This is very much in line with WordPress. But it did make me wish there was a more modern way to create templates. Imagine if the template for social media images looked like any other template file, like social-image.php at the root of the theme, and then designed the page with all the normal WordPress apis, like an ACF block. It then takes screenshots and uses them. Aren’t these cool? Yeah, it’s really cool.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.