[docs-infra] OG images are not descriptive

[samuelsycamore]

Summary 💡

When sharing links from MUI's blog or docs, the OG card is a very generic image used across all pages.

This doesn't give the reader much information about what's inside, and doesn't offer a good reason to click through.

Is there a (not too cumbersome) way to auto-generate these OG images for individual pages? I've seen it done before but have not looked into what it would take to implement on a site like mui.com.

It doesn't need to be complicated—it could just pull the title and description text from the page. For blog posts, it could add the author's name and maybe their avatar as well, and/or tags if those would be useful.

Examples 🌈

Motivation 🔦

I believe this would significantly improve our click-through rate on links shared on social media. It would also just make our site and docs look more professional—the current version feels like the OG image is just a kind of "placeholder."

[danilo-leal]

I guess @alexfauquette could help out with this one! He was already playing with automatically generated banners for new X releases — guess that tackling this would be a natural next step?!

[alexfauquette]

What I did is not complete automation. It's more like an interface, where you put the text/emoticones, and you get the card in png

https://github.com/mui/card-generator

I assume we need a template for

• blogpost with title and authors
• release with version number and highlights

Even if the current solution is not automatic, I believe that if getting the card is straightforward (run this command and enter your title) it will be an improvement

[samuelsycamore]

That is excellent @alexfauquette! I guess we would also need to be able to insert these into each page, probably as front matter?

[oliviertassinari]

In the case of the social card for docs pages, custom images could be explored alongside https://www.notion.so/mui-org/SEO-SERP-Image-75bc177fefe64c0b899a42a6f919a907.

[alexfauquette]

Fixed, except for branding pages

https://www.opengraph.xyz/url/https%3A%2F%2Fmui.com%2Fmaterial-ui%2Freact-autocomplete%2F

@samuelsycamore I propose to close this issue, and start a new one listing the branding pages for which we would like a custom OG card by priority order

[danilo-leal]

Woohoo! I think it's okay to have custom-designed OG cards for the marketing pages. It's better to have more flexibility there—not sure we need to automatize that. Thus, it seems like we can definitely cross this one off :)