How to create an API endpoint to auto generate images and index them to Google?

Question

If you search for "palmeiras x corinthians sofascore", you'll see that SofaScore has:

• 3 different images;
• 3 different aspect ratios;
• all 3 corresponding to the same soccer match.

I have inspected the HTML source code and found this:

<meta property="og:image" content="https://api.sofascore.com/api/v1/images/share/16x9/palmeiras-corinthians-9540700.png"/>

Now, what if I wanna do the same for my website, what should I do:

• simply create an API endpoint?
• create a similar meta tag with my own endpoint?

How do I deal with different aspect ratios?

Answer 1

Here's what I have done:

• created an endpoint images/share/16x9/foo-bar-9540700.jpg;
• got :filename as a request parameter;
• fetched external API for teams logo, based on id 9540700;
• used node-canvas to dynamically generate a thumbnail for the match;
• sent generated image in the response to the client;

Regarding Google indexing it: I just had to place the url for the endpoint in a meta tag with property="og:image".

The endpoint url can be placed in <img> tags, as well.

---

Useful resources:

• https://flaviocopes.com/canvas-node-generate-image/