![]() The instance of the function installed Puppeteer and spun up a Chrome headless browser in memory You called out to a serverless function hosted on Vercel ![]() Let’s take a look at what just happened when you called the URL in the browser. Switch out the page parameter for a different URL to watch it in action! This would be a URL of a web page you want to screenshot, including Give it a try by visiting this URL: This puppeteer-demo repository contains a Vercel serverless function that runs in the browser and accepts a URL parameter of page. How to take screenshots of webpages with code If you want to dive straight into some example code, this repository demonstrates how you can get started with Puppeteer to generate screenshots of web page pages. They show a preview of your application in your deployment dashboard. Other uses for the automation of generating screenshots of web pages might include build pipeline tools that check for web page regressions during new feature releases, or to provide richer experiences in the front end for your audience. Most things that you can do manually in the browser can be done using Puppeteer.Ī great way to elevate your Open-Graph-image game is to harness the power of Puppeteer by providing a link in your OG image tags that calls out to a serverless function that generates a screenshot of a browser page. “Headless” browsers allow you to automate your interactions with a browser-like environment via a command-line interface. Puppeteer is a Node library that provides a high-level API to control headless Chrome or Chromium. But in a world of sensory overload, how do you ensure your OG images provide useful context to your audience for the link you are sharing? How do you create automatically generated dynamic OG images for your web pages without having to open up Photoshop each time you want to promote a new post? Read more about the Open Graph protocol here.Ī basic - yet useful - implementation of an Open Graph image tag on your web pages should point to a static image. ![]() You can see this in this image generated from one of my tweets. For example, Twitter rolled out their own custom implementation of this, built on the OG protocol, and the following code tells Twitter to show the large image web page previews. OG meta tags can also be used to customize the appearance of your web pages according to the platform it’s shared on. It provides a url to an image that is used to represent the web page. This is an example of an Open Graph meta tag. OG meta tags are identified in the HTML by a property attribute prefixed with og. ![]() Open Graph meta tags are used in the of an HTML page to expose information about web pages to social media platforms and other applications that unfurl URL metadata. If you’ve shared a link on social media and have seen the platform automatically show you a large image, title, description and URL for the link you want to share even before you’ve clicked Post - you’ve seen the OG protocol at work. The Open Graph (OG) protocol was created at Facebook in 2010 to enable web page links to become rich objects with similar functionality and appearance to other content posted on Facebook. Sign up for your free Contentful account and start building in minutes.
0 Comments
Leave a Reply. |