Open Graph (OG) tags allow you to control what content shows up when you share the webpage on major social media sites such as Facebook, Twitter, and Google. The essential Open Graph properties that you must configure in the <head> section of your webpage are the following.
og:title: The title of your webpage.og:image: An image URL displayed as the thumbnail of your webpage when it is shared. The recommended dimension of this image is 1200px X 627 px.og:url: The canonical URL of your webpage.
Azure Functions now supports running headless Chrome on Linux, and with this feature, you can now run browser automation tools such as Puppeteer on Azure Functions. Since this feature is also available on the consumption plan, you can keep the cost of running such functions very low by only paying for the processing capacity that you utilize.
Here is how I use Azure Functions and Puppeteer to generate dynamic OG images for my blog.
The Template
I created a static HTML webpage on my website available at this link that displays a nicely formatted responsive panel.
An embedded javascript on the webpage changes the placeholder text by reading the value of the query string parameter t. For example, if you append the query string t=Awesome Blog to the previous URL, you would see the following rendered HTML.
We will setup Puppeteer on Azure Function to take a screenshot of this web page and respond to the HTTP request made to the function with the captured image.
#azure functions #azure #azure functions
