{"id":27866,"date":"2021-05-18T22:01:58","date_gmt":"2021-05-18T22:01:58","guid":{"rendered":"http:\/\/automate-social-images-next-puppeteer"},"modified":"2021-05-18T22:01:58","modified_gmt":"2021-05-18T22:01:58","slug":"automate-social-images-next-puppeteer","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/automate-social-images-next-puppeteer\/","title":{"rendered":"Automate Social Images with Next.js and Puppeteer"},"content":{"rendered":"

People usually share links and pages through social networks. If we have a blog, an e-commerce platform, or any other website, we want our content to stand out in social media user timelines. To do that, we can take advantage of SEO (Search Engine Optimization)<\/a> and Open Graph<\/a> tools.<\/p>\n

One of the ways we can highlight content shared in social networks is by creating social images (or cards). These images are displayed on social networks together with the links to our website. When someone shares a hyperlink to a certain page from our website, we will see that picture displayed on the social network timeline if we used Open Graph protocol and the og:image<\/code> property to set an image URL.<\/p>\n

We could create custom images for each one of the pages of our website. We could also use pictures from an image gallery, or a platform like Unsplash<\/a>. But If we have hundreds or thousands of different pages on our site, and we want to display images with useful information, we will need an automatic way to generate them.<\/p>\n

In this article, we will see how to create a web app that generates social images automatically. The service will generate HTML content dynamically, based on a request, generate a \u201csnapshot\u201d of the content, and return it to the requester. In order to do this, we will need to automate the usage of a web browser.<\/p>\n

Browser Automation<\/h2>\n

As a premise, we should always try to automate things. We save time. We make things faster. We depend less on human interaction.<\/p>\n

Browser automation means simulating and executing actions related to web browsers, in an automatic way. We can fake interactions with a website as if we were using input devices (keyboard, mouse, etc.), or we can check that visual elements are working and displayed correctly. By doing this, we can be fast and efficient at a level that wouldn\u2019t be possible If we depended on human interaction.<\/p>\n

There are a number of different tools that execute browser automation, and they each offer a variety of features. For our example app, we will use Puppeteer.<\/p>\n

What is Puppeteer?<\/h2>\n

Puppeteer<\/a> is a Node library that provides an API to control Chromium based browsers (Google Chrome, Microsoft Edge), using the DevTools Protocol<\/a>. It allows us to automate actions that we can usually do manually in the browser.<\/p>\n

What is Next.js?<\/h2>\n

Next.js<\/a> is one of the most popular React frameworks presently. We can use it to create user interfaces, static pages, and server-side rendered pages.<\/p>\n

It also allows us to create serverless API routes using Node.js logic, and that\u2019s what we\u2019re going to do in our application.<\/p>\n

Automatic Social Images App<\/h2>\n

We will create a serverless web application that receives a plain text message, and an image extension, and returns a social image with a logo and the specified message. We will be able to use the URL in our pages, setting the og:image<\/code> property in the <head><\/code> element.<\/p>\n

<meta property="og:image" content="https:\/\/automatic-social-images.vercel.app\/Test%20Message.jpeg" \/>\n<\/code><\/pre>\n
The image will be displayed in social network timelines.<\/p>\n
To see the app code, you can take a look at this CodeSandbox<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
You can also see the app deployed and working in Vercel<\/a>. Clicking on the previous link will display the resulting image in your browser. You can change the message you want to display directly in the URL.<\/p>\n
If you want to use this solution in your web application, edit the code we used today, or make your custom version of the app, you can clone\nhttps:\/\/github.com\/fgiuliani\/automatic-social-images<\/a>.\nAfter forking and cloning the repository, switch into the newly created folder automatic-social-images<\/code> in your Terminal and run npm install<\/code> to install the necessary Node packages. Now, you can run the development server with npm run dev<\/code> or yarn dev<\/code>.\nWith the server running, you can start generating images using the URLs http:\/\/localhost:3000\/[message].jpeg<\/code> or http:\/\/localhost:3000\/[message].png<\/code>, depending on which image file type you want to use.<\/p>\n
Summary<\/h2>\n
In this article, we learned how to generate automatic images to share on social networks. Using Open Graph protocol, we can set image URLs to our pages that will be displayed whenever users share a link to our website in their timelines.\nWe create a web application to generate automatic images. We use Next.js and Puppeteer, a Node library. From our pages, we set the og:image<\/code> property pointing to our web app and send plain text through the URL, simulating an image filename (i.e. Test.png). The application generates an image using browser automation that will be displayed on social network timelines.<\/p>\n
This web application can be extended in different ways. We could grab and manipulate different pictures and mix them in our automatic social images. We could use different data sources for the information we want to display in the images we generate, such as databases or APIs. We could dynamically resize the image, or define the font to use or the logo to display, using querystring parameters.<\/p>\n
External resources<\/h2>\n