Is there a way to automatically generate an og:image from a screen snapshot?

Question

Using the Open Graph protocol, an image can be signaled to applications such as Facebook to associate with a site link. For example:

<meta property="og:image" content="https://mysite.any/images/thumbnail.jpg">

However, this has a disadvantage: the image is a fixed one, i.e., it is always that same image whatever is the page. Obviously, using PHP, I can also select different existing images depending on the page being called, but doing this for any page on a site with hundreds of constantly updating pages is a mission impossible.

Ideally, I would like to be able to generate that image automatically when the server receives the HTTP call from the agent and generates the page content.

But how? Is there a simple way to do this, taking into account that the page is actually rendered by the browser and so the server actually has no idea how it will be represented? Probably I cannot do that by PHP but I need some JavaScript to do that. Is that correct?

Answer 1

Actually, there's a service that does exactly that. It's called og:screen and it generates Open Graph screenshots for websites, even thousands at a time if necessary: https://ogscreen.com/

There's some implementation work necessary on your end (few lines of code usually) and it works like this:

a webpage generates a base64 URL-safe encoded string of its own URL and embeds it into our og:screen image URL. When a social media bot reads the meta tag and tries to fetch the image, it prompts og:screen to instantly create a screenshot of the page.

You can check out their docs here: https://ogscreen.com/resources/