0

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Dario de Judicibus
  • 187
  • 10
  • 1
    This won't work out as well as you think it might. Services that want your `og:image` typically only fetch it once, cache that image, and then serve that cached imaged going forward. – Ouroborus Dec 30 '22 at 11:44
  • I suppose I can avoid cache if the name of image is always different. If I generate that image, I can probably also generate a unique name for each one. What do you think? Would it work? – Dario de Judicibus Dec 30 '22 at 11:50
  • 1
    That would work if they bothered to re-scan your page. They don't. – Ouroborus Dec 30 '22 at 12:00
  • 1
    LinkedIn is particularly bad at this. Facebook, at least, provides a way for devs to request a re-scan. In general, those sites that are interested in this data are interested in the same data from millions of sites. Bandwidth costs money and so those sites limit the scans they do to the bare minimum, usually just the first time that a user links to a particular page. – Ouroborus Dec 30 '22 at 12:22

1 Answers1

0

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/

patfoo
  • 1
  • 1